chore: fix method call in handler

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

@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.112.0
+    image: signoz/signoz:v0.111.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

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.112.0
+    image: signoz/signoz:v0.111.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker/docker-compose.ha.yaml

@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.112.0}
+    image: signoz/signoz:${VERSION:-v0.111.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

deploy/docker/docker-compose.yaml

@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.112.0}
+    image: signoz/signoz:${VERSION:-v0.111.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

docs/api/openapi.yml

@@ -3526,6 +3526,175 @@ paths:
       summary: Rotate session
       tags:
       - sessions
+  /api/v2/zeus/deployments:
+    get:
+      deprecated: false
+      description: This endpoint gets the deployment info from zeus.
+      operationId: GetDeploymentsFromZeus
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/ZeustypesGettableDeployment'
+                  status:
+                    type: string
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get deployments from Zeus.
+      tags:
+      - zeus
+  /api/v2/zeus/hosts:
+    put:
+      deprecated: false
+      description: This endpoint saves the host of a deployment to zeus.
+      operationId: PutHostInZeus
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ZeustypesPostableHost'
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "409":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Conflict
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Put host in Zeus for a deployment.
+      tags:
+      - zeus
+  /api/v2/zeus/profiles:
+    put:
+      deprecated: false
+      description: This endpoint saves the profile of a deployment to zeus.
+      operationId: PutProfileInZeus
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ZeustypesPostableProfile'
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "409":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Conflict
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Put profile in Zeus for a deployment.
+      tags:
+      - zeus
 components:
   schemas:
     AuthtypesAttributeMapping:
@@ -4688,6 +4857,146 @@ components:
           format: date-time
           type: string
       type: object
+    ZeustypesClusterResponseModel:
+      properties:
+        address:
+          type: string
+        buffer:
+          format: int64
+          type: integer
+        ca:
+          type: string
+        cloud_account_id:
+          type: string
+        cloud_provider:
+          type: string
+        cloud_region:
+          type: string
+        created_at:
+          format: date-time
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+        region:
+          $ref: '#/components/schemas/ZeustypesRegionModel'
+        region_id:
+          type: string
+        updated_at:
+          format: date-time
+          type: string
+      type: object
+    ZeustypesDeploymentHistoryModel:
+      properties:
+        created_at:
+          format: date-time
+          type: string
+        deployment_id:
+          type: string
+        event:
+          type: string
+        id:
+          type: string
+        state_after:
+          type: string
+        state_before:
+          type: string
+      type: object
+    ZeustypesGettableDeployment:
+      properties:
+        cluster:
+          $ref: '#/components/schemas/ZeustypesClusterResponseModel'
+        cluster_id:
+          type: string
+        created_at:
+          format: date-time
+          type: string
+        histories:
+          items:
+            $ref: '#/components/schemas/ZeustypesDeploymentHistoryModel'
+          nullable: true
+          type: array
+        hosts:
+          items:
+            $ref: '#/components/schemas/ZeustypesHostModel'
+          type: array
+        id:
+          type: string
+        license_id:
+          type: string
+        name:
+          type: string
+        password:
+          type: string
+        state:
+          type: string
+        tier:
+          type: string
+        updated_at:
+          format: date-time
+          type: string
+        user:
+          type: string
+      type: object
+    ZeustypesHostModel:
+      properties:
+        is_default:
+          type: boolean
+        name:
+          type: string
+      type: object
+    ZeustypesPostableHost:
+      properties:
+        name:
+          type: string
+      required:
+      - name
+      type: object
+    ZeustypesPostableProfile:
+      properties:
+        existing_observability_tool:
+          type: string
+        has_existing_observability_tool:
+          type: boolean
+        logs_scale_per_day_in_gb:
+          format: int64
+          type: integer
+        number_of_hosts:
+          format: int64
+          type: integer
+        number_of_services:
+          format: int64
+          type: integer
+        reasons_for_interest_in_signoz:
+          items:
+            type: string
+          nullable: true
+          type: array
+        timeline_for_migrating_to_signoz:
+          type: string
+        uses_otel:
+          type: boolean
+        where_did_you_discover_signoz:
+          type: string
+      type: object
+    ZeustypesRegionModel:
+      properties:
+        category:
+          type: string
+        created_at:
+          format: date-time
+          type: string
+        dns:
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+        updated_at:
+          format: date-time
+          type: string
+      type: object
   securitySchemes:
     api_key:
       description: API Keys

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

@@ -188,34 +188,15 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 func (ah *APIHandler) getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (
 	string, *basemodel.ApiError,
 ) {
-	// TODO: remove this struct from here
-	type deploymentResponse struct {
-		Name        string `json:"name"`
-		ClusterInfo struct {
-			Region struct {
-				DNS string `json:"dns"`
-			} `json:"region"`
-		} `json:"cluster"`
-	}
-
-	respBytes, err := ah.Signoz.Zeus.GetDeployment(ctx, licenseKey)
+	deployment, err := ah.Signoz.Zeus.GetDeployment(ctx, licenseKey)
 	if err != nil {
 		return "", basemodel.InternalError(fmt.Errorf(
 			"couldn't query for deployment info: error: %w", err,
 		))
 	}
 
-	resp := new(deploymentResponse)
-
-	err = json.Unmarshal(respBytes, resp)
-	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't unmarshal deployment info response: error: %w", err,
-		))
-	}
-
-	regionDns := resp.ClusterInfo.Region.DNS
-	deploymentName := resp.Name
+	regionDns := deployment.Cluster.Region.DNS
+	deploymentName := deployment.Name
 
 	if len(regionDns) < 1 || len(deploymentName) < 1 {
 		// Fail early if actual response structure and expectation here ever diverge

ee/zeus/httpzeus/provider.go

@@ -3,6 +3,7 @@ package httpzeus
 import (
 	"bytes"
 	"context"
+	"encoding/json"
 	"io"
 	"net/http"
 	"net/url"
@@ -10,6 +11,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/http/client"
+	"github.com/SigNoz/signoz/pkg/types/zeustypes"
 	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/tidwall/gjson"
 )
@@ -92,7 +94,7 @@ func (provider *Provider) GetPortalURL(ctx context.Context, key string, body []b
 	return []byte(gjson.GetBytes(response, "data").String()), nil
 }
 
-func (provider *Provider) GetDeployment(ctx context.Context, key string) ([]byte, error) {
+func (provider *Provider) GetDeployment(ctx context.Context, key string) (*zeustypes.GettableDeployment, error) {
 	response, err := provider.do(
 		ctx,
 		provider.config.URL.JoinPath("/v2/deployments/me"),
@@ -104,7 +106,12 @@ func (provider *Provider) GetDeployment(ctx context.Context, key string) ([]byte
 		return nil, err
 	}
 
-	return []byte(gjson.GetBytes(response, "data").String()), nil
+	gettableDeployment := new(zeustypes.GettableDeployment)
+	if err := json.Unmarshal([]byte(gjson.GetBytes(response, "data").String()), &gettableDeployment); err != nil {
+		return nil, err
+	}
+
+	return gettableDeployment, nil
 }
 
 func (provider *Provider) PutMeters(ctx context.Context, key string, data []byte) error {
@@ -119,8 +126,13 @@ func (provider *Provider) PutMeters(ctx context.Context, key string, data []byte
 	return err
 }
 
-func (provider *Provider) PutProfile(ctx context.Context, key string, body []byte) error {
-	_, err := provider.do(
+func (provider *Provider) PutProfile(ctx context.Context, key string, profile *zeustypes.PostableProfile) error {
+	body, err := json.Marshal(profile)
+	if err != nil {
+		return err
+	}
+
+	_, err = provider.do(
 		ctx,
 		provider.config.URL.JoinPath("/v2/profiles/me"),
 		http.MethodPut,
@@ -131,10 +143,15 @@ func (provider *Provider) PutProfile(ctx context.Context, key string, body []byt
 	return err
 }
 
-func (provider *Provider) PutHost(ctx context.Context, key string, body []byte) error {
-	_, err := provider.do(
+func (provider *Provider) PutHost(ctx context.Context, key string, host *zeustypes.PostableHost) error {
+	body, err := json.Marshal(host)
+	if err != nil {
+		return err
+	}
+
+	_, err = provider.do(
 		ctx,
-		provider.config.URL.JoinPath("/v2/deployments/me/hosts"),
+		provider.config.URL.JoinPath("/v2/deployments/me/host"),
 		http.MethodPut,
 		key,
 		body,
@@ -169,21 +186,28 @@ func (provider *Provider) do(ctx context.Context, url *url.URL, method string, k
 		return body, nil
 	}
 
-	return nil, provider.errFromStatusCode(response.StatusCode)
+	errorMessage := gjson.GetBytes(body, "error").String()
+	if errorMessage == "" {
+		errorMessage = "an unknown error occurred"
+	}
+
+	return nil, provider.errFromStatusCode(response.StatusCode, errorMessage)
 }
 
 // This can be taken down to the client package
-func (provider *Provider) errFromStatusCode(statusCode int) error {
+func (provider *Provider) errFromStatusCode(statusCode int, errorMessage string) error {
 	switch statusCode {
 	case http.StatusBadRequest:
-		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "bad request")
+		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, errorMessage)
 	case http.StatusUnauthorized:
-		return errors.Newf(errors.TypeUnauthenticated, errors.CodeUnauthenticated, "unauthenticated")
+		return errors.New(errors.TypeUnauthenticated, errors.CodeUnauthenticated, errorMessage)
 	case http.StatusForbidden:
-		return errors.Newf(errors.TypeForbidden, errors.CodeForbidden, "forbidden")
+		return errors.New(errors.TypeForbidden, errors.CodeForbidden, errorMessage)
 	case http.StatusNotFound:
-		return errors.Newf(errors.TypeNotFound, errors.CodeNotFound, "not found")
+		return errors.New(errors.TypeNotFound, errors.CodeNotFound, errorMessage)
+	case http.StatusConflict:
+		return errors.New(errors.TypeAlreadyExists, errors.CodeAlreadyExists, errorMessage)
 	}
 
-	return errors.Newf(errors.TypeInternal, errors.CodeInternal, "internal")
+	return errors.New(errors.TypeInternal, errors.CodeInternal, errorMessage)
 }

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

@@ -1561,6 +1561,230 @@ export interface TypesUserDTO {
 	updatedAt?: Date;
 }
 
+export interface ZeustypesClusterResponseModelDTO {
+	/**
+	 * @type string
+	 */
+	address?: string;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	buffer?: number;
+	/**
+	 * @type string
+	 */
+	ca?: string;
+	/**
+	 * @type string
+	 */
+	cloud_account_id?: string;
+	/**
+	 * @type string
+	 */
+	cloud_provider?: string;
+	/**
+	 * @type string
+	 */
+	cloud_region?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	created_at?: Date;
+	/**
+	 * @type string
+	 */
+	id?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	region?: ZeustypesRegionModelDTO;
+	/**
+	 * @type string
+	 */
+	region_id?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updated_at?: Date;
+}
+
+export interface ZeustypesDeploymentHistoryModelDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	created_at?: Date;
+	/**
+	 * @type string
+	 */
+	deployment_id?: string;
+	/**
+	 * @type string
+	 */
+	event?: string;
+	/**
+	 * @type string
+	 */
+	id?: string;
+	/**
+	 * @type string
+	 */
+	state_after?: string;
+	/**
+	 * @type string
+	 */
+	state_before?: string;
+}
+
+export interface ZeustypesGettableDeploymentDTO {
+	cluster?: ZeustypesClusterResponseModelDTO;
+	/**
+	 * @type string
+	 */
+	cluster_id?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	created_at?: Date;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	histories?: ZeustypesDeploymentHistoryModelDTO[] | null;
+	/**
+	 * @type array
+	 */
+	hosts?: ZeustypesHostModelDTO[];
+	/**
+	 * @type string
+	 */
+	id?: string;
+	/**
+	 * @type string
+	 */
+	license_id?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	password?: string;
+	/**
+	 * @type string
+	 */
+	state?: string;
+	/**
+	 * @type string
+	 */
+	tier?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updated_at?: Date;
+	/**
+	 * @type string
+	 */
+	user?: string;
+}
+
+export interface ZeustypesHostModelDTO {
+	/**
+	 * @type boolean
+	 */
+	is_default?: boolean;
+	/**
+	 * @type string
+	 */
+	name?: string;
+}
+
+export interface ZeustypesPostableHostDTO {
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
+export interface ZeustypesPostableProfileDTO {
+	/**
+	 * @type string
+	 */
+	existing_observability_tool?: string;
+	/**
+	 * @type boolean
+	 */
+	has_existing_observability_tool?: boolean;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	logs_scale_per_day_in_gb?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	number_of_hosts?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	number_of_services?: number;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	reasons_for_interest_in_signoz?: string[] | null;
+	/**
+	 * @type string
+	 */
+	timeline_for_migrating_to_signoz?: string;
+	/**
+	 * @type boolean
+	 */
+	uses_otel?: boolean;
+	/**
+	 * @type string
+	 */
+	where_did_you_discover_signoz?: string;
+}
+
+export interface ZeustypesRegionModelDTO {
+	/**
+	 * @type string
+	 */
+	category?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	created_at?: Date;
+	/**
+	 * @type string
+	 */
+	dns?: string;
+	/**
+	 * @type string
+	 */
+	id?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updated_at?: Date;
+}
+
 export type ChangePasswordPathParameters = {
 	id: string;
 };
@@ -2252,3 +2476,11 @@ export type RotateSession200 = {
 	 */
 	status?: string;
 };
+
+export type GetDeploymentsFromZeus200 = {
+	data?: ZeustypesGettableDeploymentDTO;
+	/**
+	 * @type string
+	 */
+	status?: string;
+};

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

@@ -0,0 +1,279 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'yarn generate:api'
+ * SigNoz
+ */
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+import { useMutation, useQuery } from 'react-query';
+
+import { GeneratedAPIInstance } from '../../../index';
+import type {
+	GetDeploymentsFromZeus200,
+	RenderErrorResponseDTO,
+	ZeustypesPostableHostDTO,
+	ZeustypesPostableProfileDTO,
+} from '../sigNoz.schemas';
+
+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
+/**
+ * This endpoint gets the deployment info from zeus.
+ * @summary Get deployments from Zeus.
+ */
+export const getDeploymentsFromZeus = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetDeploymentsFromZeus200>({
+		url: `/api/v2/zeus/deployments`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetDeploymentsFromZeusQueryKey = () => {
+	return ['getDeploymentsFromZeus'] as const;
+};
+
+export const getGetDeploymentsFromZeusQueryOptions = <
+	TData = Awaited<ReturnType<typeof getDeploymentsFromZeus>>,
+	TError = RenderErrorResponseDTO
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getDeploymentsFromZeus>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetDeploymentsFromZeusQueryKey();
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getDeploymentsFromZeus>>
+	> = ({ signal }) => getDeploymentsFromZeus(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getDeploymentsFromZeus>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetDeploymentsFromZeusQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getDeploymentsFromZeus>>
+>;
+export type GetDeploymentsFromZeusQueryError = RenderErrorResponseDTO;
+
+/**
+ * @summary Get deployments from Zeus.
+ */
+
+export function useGetDeploymentsFromZeus<
+	TData = Awaited<ReturnType<typeof getDeploymentsFromZeus>>,
+	TError = RenderErrorResponseDTO
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getDeploymentsFromZeus>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetDeploymentsFromZeusQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get deployments from Zeus.
+ */
+export const invalidateGetDeploymentsFromZeus = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetDeploymentsFromZeusQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint saves the host of a deployment to zeus.
+ * @summary Put host in Zeus for a deployment.
+ */
+export const putHostInZeus = (
+	zeustypesPostableHostDTO: ZeustypesPostableHostDTO,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/zeus/hosts`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: zeustypesPostableHostDTO,
+	});
+};
+
+export const getPutHostInZeusMutationOptions = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof putHostInZeus>>,
+		TError,
+		{ data: ZeustypesPostableHostDTO },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof putHostInZeus>>,
+	TError,
+	{ data: ZeustypesPostableHostDTO },
+	TContext
+> => {
+	const mutationKey = ['putHostInZeus'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+		  'mutationKey' in options.mutation &&
+		  options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof putHostInZeus>>,
+		{ data: ZeustypesPostableHostDTO }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return putHostInZeus(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PutHostInZeusMutationResult = NonNullable<
+	Awaited<ReturnType<typeof putHostInZeus>>
+>;
+export type PutHostInZeusMutationBody = ZeustypesPostableHostDTO;
+export type PutHostInZeusMutationError = RenderErrorResponseDTO;
+
+/**
+ * @summary Put host in Zeus for a deployment.
+ */
+export const usePutHostInZeus = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof putHostInZeus>>,
+		TError,
+		{ data: ZeustypesPostableHostDTO },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof putHostInZeus>>,
+	TError,
+	{ data: ZeustypesPostableHostDTO },
+	TContext
+> => {
+	const mutationOptions = getPutHostInZeusMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint saves the profile of a deployment to zeus.
+ * @summary Put profile in Zeus for a deployment.
+ */
+export const putProfileInZeus = (
+	zeustypesPostableProfileDTO: ZeustypesPostableProfileDTO,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/zeus/profiles`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: zeustypesPostableProfileDTO,
+	});
+};
+
+export const getPutProfileInZeusMutationOptions = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof putProfileInZeus>>,
+		TError,
+		{ data: ZeustypesPostableProfileDTO },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof putProfileInZeus>>,
+	TError,
+	{ data: ZeustypesPostableProfileDTO },
+	TContext
+> => {
+	const mutationKey = ['putProfileInZeus'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+		  'mutationKey' in options.mutation &&
+		  options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof putProfileInZeus>>,
+		{ data: ZeustypesPostableProfileDTO }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return putProfileInZeus(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PutProfileInZeusMutationResult = NonNullable<
+	Awaited<ReturnType<typeof putProfileInZeus>>
+>;
+export type PutProfileInZeusMutationBody = ZeustypesPostableProfileDTO;
+export type PutProfileInZeusMutationError = RenderErrorResponseDTO;
+
+/**
+ * @summary Put profile in Zeus for a deployment.
+ */
+export const usePutProfileInZeus = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof putProfileInZeus>>,
+		TError,
+		{ data: ZeustypesPostableProfileDTO },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof putProfileInZeus>>,
+	TError,
+	{ data: ZeustypesPostableProfileDTO },
+	TContext
+> => {
+	const mutationOptions = getPutProfileInZeusMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { Virtuoso } from 'react-virtuoso';
 import { Card } from 'antd';
-import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -11,8 +10,6 @@ import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
-import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -31,15 +28,6 @@ interface Props {
 }
 
 function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
-	const virtuosoRef = useRef<VirtuosoHandle>(null);
-	const {
-		activeLog,
-		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
-
 	const basePayload = getHostLogsQueryPayload(
 		timeRange.startTime,
 		timeRange.endTime,
@@ -84,40 +72,29 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 		setIsPaginating(false);
 	}, [data, setIsPaginating]);
 
-	const handleScrollToLog = useScrollToLog({
-		logs,
-		virtuosoRef,
-	});
-
 	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => {
-			return (
-				<div key={logToRender.id}>
-					<RawLogView
-						isTextOverflowEllipsisDisabled
-						data={logToRender}
-						linesPerRow={5}
-						fontSize={FontSize.MEDIUM}
-						selectedFields={[
-							{
-								dataType: 'string',
-								type: '',
-								name: 'body',
-							},
-							{
-								dataType: 'string',
-								type: '',
-								name: 'timestamp',
-							},
-						]}
-						onSetActiveLog={handleSetActiveLog}
-						onClearActiveLog={handleCloseLogDetail}
-						isActiveLog={activeLog?.id === logToRender.id}
-					/>
-				</div>
-			);
-		},
-		[activeLog, handleSetActiveLog, handleCloseLogDetail],
+		(_: number, logToRender: ILog): JSX.Element => (
+			<RawLogView
+				isTextOverflowEllipsisDisabled
+				key={logToRender.id}
+				data={logToRender}
+				linesPerRow={5}
+				fontSize={FontSize.MEDIUM}
+				selectedFields={[
+					{
+						dataType: 'string',
+						type: '',
+						name: 'body',
+					},
+					{
+						dataType: 'string',
+						type: '',
+						name: 'timestamp',
+					},
+				]}
+			/>
+		),
+		[],
 	);
 
 	const renderFooter = useCallback(
@@ -141,7 +118,6 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 					<Virtuoso
 						className="host-metrics-logs-virtuoso"
 						key="host-metrics-logs-virtuoso"
-						ref={virtuosoRef}
 						data={logs}
 						endReached={loadMoreLogs}
 						totalCount={logs.length}
@@ -163,24 +139,7 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 			{!isLoading && !isError && logs.length === 0 && <NoLogsContainer />}
 			{isError && !isLoading && <LogsError />}
 			{!isLoading && !isError && logs.length > 0 && (
-				<div
-					className="host-metrics-logs-list-container"
-					data-log-detail-ignore="true"
-				>
-					{renderContent}
-				</div>
-			)}
-			{selectedTab && activeLog && (
-				<LogDetail
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					logs={logs}
-					onNavigateLog={handleSetActiveLog}
-					selectedTab={selectedTab}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					onScrollToLog={handleScrollToLog}
-				/>
+				<div className="host-metrics-logs-list-container">{renderContent}</div>
 			)}
 		</div>
 	);

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -13,9 +13,6 @@ export type LogDetailProps = {
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
-	logs?: ILog[];
-	onNavigateLog?: (log: ILog) => void;
-	onScrollToLog?: (logId: string) => void;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;

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

@@ -15,8 +15,6 @@
 		}
 
 		.log-detail-drawer__title-right {
-			display: flex;
-			align-items: center;
 			.ant-btn {
 				display: flex;
 				align-items: center;
@@ -68,10 +66,6 @@
 		margin-bottom: 16px;
 	}
 
-	.log-detail-drawer__content {
-		height: 100%;
-	}
-
 	.log-detail-drawer__log {
 		width: 100%;
 		display: flex;
@@ -189,115 +183,9 @@
 	.ant-drawer-close {
 		padding: 0px;
 	}
-	.log-detail-drawer__footer-hint {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: 8px 16px;
-		text-align: left;
-		color: var(--text-vanilla-200);
-		background: var(--bg-ink-400);
-		z-index: 10;
-
-		.log-detail-drawer__footer-hint-content {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-		}
-
-		.log-detail-drawer__footer-hint-icon {
-			display: inline;
-			vertical-align: middle;
-			color: var(--text-vanilla-200);
-		}
-
-		.log-detail-drawer__footer-hint-text {
-			font-size: 13px;
-			margin: 0;
-		}
-	}
-	.log-arrows {
-		display: flex;
-		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-		border-radius: 6px;
-		padding: 2px 6px;
-		align-items: center;
-		margin-left: 8px;
-	}
-
-	.log-arrow-btn {
-		padding: 0;
-		min-width: 28px;
-		height: 28px;
-		border-radius: 4px;
-		background: var(--bg-ink-400);
-		color: var(--text-vanilla-400);
-		border: 1px solid var(--bg-ink-300);
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: background-color 0.2s ease-in-out;
-	}
-
-	.log-arrow-btn-up,
-	.log-arrow-btn-down {
-		background: var(--bg-ink-400);
-	}
-
-	.log-arrow-btn:active,
-	.log-arrow-btn:focus {
-		background: var(--bg-ink-300);
-		color: var(--text-vanilla-100);
-	}
-
-	.log-arrow-btn[disabled] {
-		opacity: 0.5;
-		cursor: not-allowed;
-		background: var(--bg-ink-500);
-		color: var(--text-vanilla-200);
-
-		.log-arrow-btn:hover:not([disabled]) {
-			background: var(--bg-ink-300);
-			color: var(--text-vanilla-100);
-		}
-	}
 }
 
 .lightMode {
-	.log-arrows {
-		background: var(--bg-vanilla-100);
-		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
-	}
-
-	.log-arrow-btn {
-		background: var(--bg-vanilla-100);
-		color: var(--text-ink-400);
-		border: 1px solid var(--bg-vanilla-300);
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
-	}
-
-	.log-arrow-btn-up,
-	.log-arrow-btn-down {
-		background: var(--bg-vanilla-100);
-	}
-
-	.log-arrow-btn:active,
-	.log-arrow-btn:focus {
-		background: var(--bg-vanilla-200);
-		color: var(--text-ink-500);
-	}
-
-	.log-arrow-btn:hover:not([disabled]) {
-		background: var(--bg-vanilla-200);
-		color: var(--text-ink-500);
-	}
-
-	.log-arrow-btn[disabled] {
-		background: var(--bg-vanilla-100);
-		color: var(--text-ink-200);
-	}
 	.ant-drawer-header {
 		border-bottom: 1px solid var(--bg-vanilla-400);
 		background: var(--bg-vanilla-100);
@@ -364,33 +252,4 @@
 			color: var(--text-ink-300);
 		}
 	}
-
-	.log-detail-drawer__footer-hint {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: 8px 16px;
-		text-align: left;
-		color: var(--text-vanilla-700);
-		background: var(--bg-vanilla-100);
-		z-index: 10;
-
-		.log-detail-drawer__footer-hint-content {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-		}
-
-		.log-detail-drawer__footer-hint-icon {
-			display: inline;
-			vertical-align: middle;
-			color: var(--text-vanilla-700);
-		}
-
-		.log-detail-drawer__footer-hint-text {
-			font-size: 13px;
-			margin: 0;
-		}
-	}
 }

frontend/src/components/LogDetail/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
@@ -32,12 +32,8 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import createQueryParams from 'lib/createQueryParams';
 import { cloneDeep } from 'lodash-es';
 import {
-	ArrowDown,
-	ArrowUp,
 	BarChart2,
 	Braces,
-	ChevronDown,
-	ChevronUp,
 	Compass,
 	Copy,
 	Filter,
@@ -64,9 +60,6 @@ function LogDetailInner({
 	isListViewPanel = false,
 	listViewPanelSelectedFields,
 	handleChangeSelectedView,
-	logs,
-	onNavigateLog,
-	onScrollToLog,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -81,78 +74,6 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery, updateAllQueriesOperators } = useQueryBuilder();
 
-	// Handle clicks outside to close drawer, except on explicitly ignored regions
-	useEffect(() => {
-		const handleClickOutside = (e: MouseEvent): void => {
-			const target = e.target as HTMLElement;
-
-			// Don't close if clicking on explicitly ignored regions
-			if (target.closest('[data-log-detail-ignore="true"]')) {
-				return;
-			}
-
-			// Close the drawer for any other outside click
-			onClose?.(e as any);
-		};
-
-		document.addEventListener('mousedown', handleClickOutside);
-
-		return (): void => {
-			document.removeEventListener('mousedown', handleClickOutside);
-		};
-	}, [onClose]);
-
-	// Keyboard navigation - handle up/down arrow keys
-	// Only listen when in OVERVIEW tab
-	useEffect(() => {
-		if (
-			!logs ||
-			!onNavigateLog ||
-			logs.length === 0 ||
-			selectedView !== VIEW_TYPES.OVERVIEW
-		) {
-			return;
-		}
-
-		const handleKeyDown = (e: KeyboardEvent): void => {
-			const currentIndex = logs.findIndex((l) => l.id === log.id);
-			if (currentIndex === -1) {
-				return;
-			}
-
-			if (e.key === 'ArrowUp') {
-				e.preventDefault();
-				e.stopPropagation();
-				// Navigate to previous log
-				if (currentIndex > 0) {
-					const prevLog = logs[currentIndex - 1];
-					onNavigateLog(prevLog);
-					// Trigger scroll to the log element
-					if (onScrollToLog) {
-						onScrollToLog(prevLog.id);
-					}
-				}
-			} else if (e.key === 'ArrowDown') {
-				e.preventDefault();
-				e.stopPropagation();
-				// Navigate to next log
-				if (currentIndex < logs.length - 1) {
-					const nextLog = logs[currentIndex + 1];
-					onNavigateLog(nextLog);
-					// Trigger scroll to the log element
-					if (onScrollToLog) {
-						onScrollToLog(nextLog.id);
-					}
-				}
-			}
-		};
-
-		document.addEventListener('keydown', handleKeyDown);
-		return (): void => {
-			document.removeEventListener('keydown', handleKeyDown);
-		};
-	}, [log.id, logs, onNavigateLog, onScrollToLog, selectedView]);
-
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) {
 			return null;
@@ -306,87 +227,32 @@ function LogDetailInner({
 	);
 
 	const logType = log?.attributes_string?.log_level || LogType.INFO;
-	const currentLogIndex = logs ? logs.findIndex((l) => l.id === log.id) : -1;
-	const isPrevDisabled =
-		!logs || !onNavigateLog || logs.length === 0 || currentLogIndex <= 0;
-	const isNextDisabled =
-		!logs ||
-		!onNavigateLog ||
-		logs.length === 0 ||
-		currentLogIndex === logs.length - 1;
-
-	type HandleNavigateLogParams = {
-		direction: 'next' | 'previous';
-	};
-
-	const handleNavigateLog = ({ direction }: HandleNavigateLogParams): void => {
-		if (!logs || !onNavigateLog || currentLogIndex === -1) {
-			return;
-		}
-		if (direction === 'previous' && !isPrevDisabled) {
-			const prevLog = logs[currentLogIndex - 1];
-			onNavigateLog(prevLog);
-			onScrollToLog?.(prevLog.id);
-		} else if (direction === 'next' && !isNextDisabled) {
-			const nextLog = logs[currentLogIndex + 1];
-			onNavigateLog(nextLog);
-			onScrollToLog?.(nextLog.id);
-		}
-	};
 
 	return (
 		<Drawer
 			width="60%"
-			mask={false}
-			maskClosable={false}
+			maskStyle={{ background: 'none' }}
 			title={
-				<div className="log-detail-drawer__title" data-log-detail-ignore="true">
+				<div className="log-detail-drawer__title">
 					<div className="log-detail-drawer__title-left">
 						<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
 						<Typography.Text className="title">Log details</Typography.Text>
 					</div>
-					<div className="log-detail-drawer__title-right">
-						<div className="log-arrows">
-							<Tooltip
-								title={isPrevDisabled ? '' : 'Move to previous log'}
-								placement="top"
-								mouseLeaveDelay={0}
+					{showOpenInExplorerBtn && (
+						<div className="log-detail-drawer__title-right">
+							<Button
+								className="open-in-explorer-btn"
+								icon={<Compass size={16} />}
+								onClick={handleOpenInExplorer}
 							>
-								<Button
-									icon={<ChevronUp size={14} />}
-									className="log-arrow-btn log-arrow-btn-up"
-									disabled={isPrevDisabled}
-									onClick={(): void => handleNavigateLog({ direction: 'previous' })}
-								/>
-							</Tooltip>
-							<Tooltip
-								title={isNextDisabled ? '' : 'Move to next log'}
-								placement="top"
-								mouseLeaveDelay={0}
-							>
-								<Button
-									icon={<ChevronDown size={14} />}
-									className="log-arrow-btn log-arrow-btn-down"
-									disabled={isNextDisabled}
-									onClick={(): void => handleNavigateLog({ direction: 'next' })}
-								/>
-							</Tooltip>
+								Open in Explorer
+							</Button>
 						</div>
-						{showOpenInExplorerBtn && (
-							<div>
-								<Button
-									className="open-in-explorer-btn"
-									icon={<Compass size={16} />}
-									onClick={handleOpenInExplorer}
-								>
-									Open in Explorer
-								</Button>
-							</div>
-						)}
-					</div>
+					)}
 				</div>
 			}
 			placement="right"
+			// closable
 			onClose={drawerCloseHandler}
 			open={log !== null}
 			style={{
@@ -397,164 +263,138 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
-				<div className="log-detail-drawer__log">
-					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-					<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
-						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
-					</Tooltip>
+			<div className="log-detail-drawer__log">
+				<Divider type="vertical" className={cx('log-type-indicator', logType)} />
+				<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
+					<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
+				</Tooltip>
 
-					<div className="log-overflow-shadow">&nbsp;</div>
-				</div>
+				<div className="log-overflow-shadow">&nbsp;</div>
+			</div>
 
-				<div className="tabs-and-search">
-					<Radio.Group
-						className="views-tabs"
-						onChange={handleModeChange}
-						value={selectedView}
+			<div className="tabs-and-search">
+				<Radio.Group
+					className="views-tabs"
+					onChange={handleModeChange}
+					value={selectedView}
+				>
+					<Radio.Button
+						className={
+							// eslint-disable-next-line sonarjs/no-duplicate-string
+							selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.OVERVIEW}
 					>
-						<Radio.Button
-							className={
-								// eslint-disable-next-line sonarjs/no-duplicate-string
-								selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.OVERVIEW}
-						>
-							<div className="view-title">
-								<Table size={14} />
-								Overview
-							</div>
-						</Radio.Button>
-						<Radio.Button
-							className={
-								selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.JSON}
-						>
-							<div className="view-title">
-								<Braces size={14} />
-								JSON
-							</div>
-						</Radio.Button>
-						<Radio.Button
-							className={
-								selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.CONTEXT}
-						>
-							<div className="view-title">
-								<TextSelect size={14} />
-								Context
-							</div>
-						</Radio.Button>
-						<Radio.Button
-							className={
-								selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.INFRAMETRICS}
-						>
-							<div className="view-title">
-								<BarChart2 size={14} />
-								Metrics
-							</div>
-						</Radio.Button>
-					</Radio.Group>
-
-					<div className="log-detail-drawer__actions">
-						{selectedView === VIEW_TYPES.CONTEXT && (
-							<Tooltip
-								title="Show Filters"
-								placement="topLeft"
-								aria-label="Show Filters"
-							>
-								<Button
-									className="action-btn"
-									icon={<Filter size={16} />}
-									onClick={handleFilterVisible}
-								/>
-							</Tooltip>
-						)}
+						<div className="view-title">
+							<Table size={14} />
+							Overview
+						</div>
+					</Radio.Button>
+					<Radio.Button
+						className={selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'}
+						value={VIEW_TYPES.JSON}
+					>
+						<div className="view-title">
+							<Braces size={14} />
+							JSON
+						</div>
+					</Radio.Button>
+					<Radio.Button
+						className={
+							selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.CONTEXT}
+					>
+						<div className="view-title">
+							<TextSelect size={14} />
+							Context
+						</div>
+					</Radio.Button>
+					<Radio.Button
+						className={
+							selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.INFRAMETRICS}
+					>
+						<div className="view-title">
+							<BarChart2 size={14} />
+							Metrics
+						</div>
+					</Radio.Button>
+				</Radio.Group>
 
+				<div className="log-detail-drawer__actions">
+					{selectedView === VIEW_TYPES.CONTEXT && (
 						<Tooltip
-							title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
+							title="Show Filters"
 							placement="topLeft"
-							aria-label={
-								selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
-							}
+							aria-label="Show Filters"
 						>
 							<Button
 								className="action-btn"
-								icon={<Copy size={16} />}
-								onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
+								icon={<Filter size={16} />}
+								onClick={handleFilterVisible}
 							/>
 						</Tooltip>
-					</div>
-				</div>
-				{isFilterVisible && contextQuery?.builder.queryData[0] && (
-					<div className="log-detail-drawer-query-container">
-						<QuerySearch
-							onChange={(value): void => handleQueryExpressionChange(value, 0)}
-							dataSource={DataSource.LOGS}
-							queryData={contextQuery?.builder.queryData[0]}
-							onRun={handleRunQuery}
+					)}
+
+					<Tooltip
+						title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
+						placement="topLeft"
+						aria-label={
+							selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
+						}
+					>
+						<Button
+							className="action-btn"
+							icon={<Copy size={16} />}
+							onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
 						/>
-					</div>
-				)}
-
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<Overview
-						logData={log}
-						onAddToQuery={onAddToQuery}
-						onClickActionItem={onClickActionItem}
-						isListViewPanel={isListViewPanel}
-						selectedOptions={options}
-						listViewPanelSelectedFields={listViewPanelSelectedFields}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
-				)}
-				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
-
-				{selectedView === VIEW_TYPES.CONTEXT && (
-					<ContextView
-						log={log}
-						filters={filters}
-						contextQuery={contextQuery}
-						isEdit={isEdit}
-					/>
-				)}
-				{selectedView === VIEW_TYPES.INFRAMETRICS && (
-					<InfraMetrics
-						clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
-						podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
-						nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
-						hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
-						timestamp={log.timestamp.toString()}
-						dataSource={DataSource.LOGS}
-					/>
-				)}
-
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<div className="log-detail-drawer__footer-hint">
-						<div className="log-detail-drawer__footer-hint-content">
-							<Typography.Text
-								type="secondary"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								Use
-							</Typography.Text>
-							<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
-							<span>/</span>
-							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
-							<Typography.Text
-								type="secondary"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								to view previous/next log
-							</Typography.Text>
-						</div>
-					</div>
-				)}
+					</Tooltip>
+				</div>
 			</div>
+			{isFilterVisible && contextQuery?.builder.queryData[0] && (
+				<div className="log-detail-drawer-query-container">
+					<QuerySearch
+						onChange={(value): void => handleQueryExpressionChange(value, 0)}
+						dataSource={DataSource.LOGS}
+						queryData={contextQuery?.builder.queryData[0]}
+						onRun={handleRunQuery}
+					/>
+				</div>
+			)}
+
+			{selectedView === VIEW_TYPES.OVERVIEW && (
+				<Overview
+					logData={log}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onClickActionItem}
+					isListViewPanel={isListViewPanel}
+					selectedOptions={options}
+					listViewPanelSelectedFields={listViewPanelSelectedFields}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			)}
+			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
+
+			{selectedView === VIEW_TYPES.CONTEXT && (
+				<ContextView
+					log={log}
+					filters={filters}
+					contextQuery={contextQuery}
+					isEdit={isEdit}
+				/>
+			)}
+			{selectedView === VIEW_TYPES.INFRAMETRICS && (
+				<InfraMetrics
+					clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
+					podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
+					nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
+					hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
+					timestamp={log.timestamp.toString()}
+					dataSource={DataSource.LOGS}
+				/>
+			)}
 		</Drawer>
 	);
 }

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

@@ -2,11 +2,13 @@ import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
 import { Typography } from 'antd';
 import cx from 'classnames';
+import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 // utils
@@ -102,17 +104,12 @@ function LogSelectedField({
 type ListLogViewProps = {
 	logData: ILog;
 	selectedFields: IField[];
-	onSetActiveLog: (
-		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
-	) => void;
+	onSetActiveLog: (log: ILog) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
 	linesPerRow: number;
 	fontSize: FontSize;
 	handleChangeSelectedView?: ChangeViewFunctionType;
-	isActiveLog?: boolean;
-	onClearActiveLog?: () => void;
 };
 
 function ListLogView({
@@ -123,8 +120,7 @@ function ListLogView({
 	activeLog,
 	linesPerRow,
 	fontSize,
-	isActiveLog,
-	onClearActiveLog,
+	handleChangeSelectedView,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -133,24 +129,35 @@ function ListLogView({
 	);
 	const isReadOnlyLog = !isLogsExplorerPage;
 
+	const {
+		activeLog: activeContextLog,
+		onAddToQuery: handleAddToQuery,
+		onSetActiveLog: handleSetActiveContextLog,
+		onClearActiveLog: handleClearActiveContextLog,
+	} = useActiveLog();
+
 	const isDarkMode = useIsDarkMode();
 
-	const handleDetailedView = useCallback(() => {
-		if (isActiveLog) {
-			onClearActiveLog?.();
-			return;
-		}
+	const handlerClearActiveContextLog = useCallback(
+		(event: React.MouseEvent | React.KeyboardEvent) => {
+			event.preventDefault();
+			event.stopPropagation();
+			handleClearActiveContextLog();
+		},
+		[handleClearActiveContextLog],
+	);
 
+	const handleDetailedView = useCallback(() => {
 		onSetActiveLog(logData);
-	}, [logData, onSetActiveLog, isActiveLog, onClearActiveLog]);
+	}, [logData, onSetActiveLog]);
 
 	const handleShowContext = useCallback(
 		(event: React.MouseEvent) => {
 			event.preventDefault();
 			event.stopPropagation();
-			onSetActiveLog(logData, VIEW_TYPES.CONTEXT);
+			handleSetActiveContextLog(logData);
 		},
-		[logData, onSetActiveLog],
+		[logData, handleSetActiveContextLog],
 	);
 
 	const updatedSelecedFields = useMemo(
@@ -179,7 +186,11 @@ function ListLogView({
 	return (
 		<>
 			<Container
-				$isActiveLog={isHighlighted || activeLog?.id === logData.id}
+				$isActiveLog={
+					isHighlighted ||
+					activeLog?.id === logData.id ||
+					activeContextLog?.id === logData.id
+				}
 				$isDarkMode={isDarkMode}
 				$logType={logType}
 				onClick={handleDetailedView}
@@ -240,6 +251,15 @@ function ListLogView({
 					/>
 				)}
 			</Container>
+			{activeContextLog && (
+				<LogDetail
+					log={activeContextLog}
+					onAddToQuery={handleAddToQuery}
+					selectedTab={VIEW_TYPES.CONTEXT}
+					onClose={handlerClearActiveContextLog}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			)}
 		</>
 	);
 }

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

@@ -1,15 +1,19 @@
 import {
+	KeyboardEvent,
 	memo,
 	MouseEvent,
 	MouseEventHandler,
 	useCallback,
 	useMemo,
+	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Tooltip } from 'antd';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
+import { DrawerProps, Tooltip } from 'antd';
+import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -35,8 +39,7 @@ function RawLogView({
 	selectedFields = [],
 	fontSize,
 	onLogClick,
-	onSetActiveLog,
-	onClearActiveLog,
+	handleChangeSelectedView,
 }: RawLogViewProps): JSX.Element {
 	const {
 		isHighlighted: isUrlHighlighted,
@@ -45,6 +48,15 @@ function RawLogView({
 	} = useCopyLogLink(data.id);
 	const flattenLogData = useMemo(() => FlatLogData(data), [data]);
 
+	const {
+		activeLog,
+		onSetActiveLog,
+		onClearActiveLog,
+		onAddToQuery,
+	} = useActiveLog();
+
+	const [selectedTab, setSelectedTab] = useState<VIEWS | undefined>();
+
 	const isDarkMode = useIsDarkMode();
 	const isReadOnlyLog = !isLogsExplorerPage || isReadOnly;
 
@@ -122,24 +134,34 @@ function RawLogView({
 			// Use custom click handler if provided, otherwise use default behavior
 			if (onLogClick) {
 				onLogClick(data, event);
-				return;
+			} else {
+				onSetActiveLog(data);
+				setSelectedTab(VIEW_TYPES.OVERVIEW);
 			}
-			if (isActiveLog) {
-				onClearActiveLog?.();
-				return;
-			}
-
-			onSetActiveLog?.(data);
 		},
-		[isReadOnly, onLogClick, isActiveLog, onSetActiveLog, data, onClearActiveLog],
+		[isReadOnly, data, onSetActiveLog, onLogClick],
+	);
+
+	const handleCloseLogDetail: DrawerProps['onClose'] = useCallback(
+		(
+			event: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>,
+		) => {
+			event.preventDefault();
+			event.stopPropagation();
+
+			onClearActiveLog();
+			setSelectedTab(undefined);
+		},
+		[onClearActiveLog],
 	);
 
 	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-
-			onSetActiveLog?.(data, VIEW_TYPES.CONTEXT);
+			// handleSetActiveContextLog(data);
+			setSelectedTab(VIEW_TYPES.CONTEXT);
+			onSetActiveLog(data);
 		},
 		[data, onSetActiveLog],
 	);
@@ -159,7 +181,7 @@ function RawLogView({
 			$isDarkMode={isDarkMode}
 			$isReadOnly={isReadOnly}
 			$isHightlightedLog={isUrlHighlighted}
-			$isActiveLog={isActiveLog}
+			$isActiveLog={activeLog?.id === data.id || isActiveLog}
 			$isCustomHighlighted={isHighlighted}
 			$logType={logType}
 			fontSize={fontSize}
@@ -196,6 +218,17 @@ function RawLogView({
 					onLogCopy={onLogCopy}
 				/>
 			)}
+
+			{selectedTab && (
+				<LogDetail
+					selectedTab={selectedTab}
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			)}
 		</RawLogViewContainer>
 	);
 }

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

@@ -45,6 +45,9 @@ export const RawLogViewContainer = styled(Row)<{
 				: `margin: 2px 0;`}
 	}
 
+	${({ $isActiveLog, $logType }): string =>
+		getActiveLogBackground($isActiveLog, true, $logType)}
+
 	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
 			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)

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

@@ -1,5 +1,4 @@
 import { MouseEvent } from 'react';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
@@ -17,11 +16,6 @@ export interface RawLogViewProps {
 	selectedFields?: IField[];
 	onLogClick?: (log: ILog, event: MouseEvent) => void;
 	handleChangeSelectedView?: ChangeViewFunctionType;
-	onSetActiveLog?: (
-		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
-	) => void;
-	onClearActiveLog?: () => void;
 }
 
 export interface RawLogContentProps {

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -67,17 +67,7 @@ export const prepareUPlotConfig = ({
 		maxTimeScale,
 	});
 
-	const seriesList = apiResponse.data?.result || [];
-
-	if (seriesList.length === 1) {
-		builder.setCursor({
-			focus: {
-				prox: 1e3,
-			},
-		});
-	}
-
-	seriesList.forEach((series) => {
+	apiResponse.data?.result?.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogs.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { Virtuoso } from 'react-virtuoso';
 import { Card } from 'antd';
-import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -12,8 +11,6 @@ import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
-import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -43,15 +40,6 @@ function EntityLogs({
 	category,
 	queryKeyFilters,
 }: Props): JSX.Element {
-	const virtuosoRef = useRef<VirtuosoHandle>(null);
-	const {
-		activeLog,
-		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
-
 	const basePayload = getEntityEventsOrLogsQueryPayload(
 		timeRange.startTime,
 		timeRange.endTime,
@@ -74,40 +62,29 @@ function EntityLogs({
 		basePayload,
 	});
 
-	const handleScrollToLog = useScrollToLog({
-		logs,
-		virtuosoRef,
-	});
-
 	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => {
-			return (
-				<div key={logToRender.id}>
-					<RawLogView
-						isTextOverflowEllipsisDisabled
-						data={logToRender}
-						linesPerRow={5}
-						fontSize={FontSize.MEDIUM}
-						selectedFields={[
-							{
-								dataType: 'string',
-								type: '',
-								name: 'body',
-							},
-							{
-								dataType: 'string',
-								type: '',
-								name: 'timestamp',
-							},
-						]}
-						onSetActiveLog={handleSetActiveLog}
-						onClearActiveLog={handleCloseLogDetail}
-						isActiveLog={activeLog?.id === logToRender.id}
-					/>
-				</div>
-			);
-		},
-		[activeLog, handleSetActiveLog, handleCloseLogDetail],
+		(_: number, logToRender: ILog): JSX.Element => (
+			<RawLogView
+				isTextOverflowEllipsisDisabled
+				key={logToRender.id}
+				data={logToRender}
+				linesPerRow={5}
+				fontSize={FontSize.MEDIUM}
+				selectedFields={[
+					{
+						dataType: 'string',
+						type: '',
+						name: 'body',
+					},
+					{
+						dataType: 'string',
+						type: '',
+						name: 'timestamp',
+					},
+				]}
+			/>
+		),
+		[],
 	);
 
 	const { data, isLoading, isFetching, isError } = useQuery({
@@ -154,7 +131,6 @@ function EntityLogs({
 					<Virtuoso
 						className="entity-logs-virtuoso"
 						key="entity-logs-virtuoso"
-						ref={virtuosoRef}
 						data={logs}
 						endReached={loadMoreLogs}
 						totalCount={logs.length}
@@ -178,21 +154,7 @@ function EntityLogs({
 			)}
 			{isError && !isLoading && <LogsError />}
 			{!isLoading && !isError && logs.length > 0 && (
-				<div className="entity-logs-list-container" data-log-detail-ignore="true">
-					{renderContent}
-				</div>
-			)}
-			{selectedTab && activeLog && (
-				<LogDetail
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					logs={logs}
-					onNavigateLog={handleSetActiveLog}
-					selectedTab={selectedTab}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					onScrollToLog={handleScrollToLog}
-				/>
+				<div className="entity-logs-list-container">{renderContent}</div>
 			)}
 		</div>
 	);

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -2,6 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card, Typography } from 'antd';
 import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -13,9 +14,8 @@ import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
-import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useEventSource } from 'providers/EventSource';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -38,11 +38,10 @@ function LiveLogsList({
 
 	const {
 		activeLog,
+		onClearActiveLog,
 		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
+		onSetActiveLog,
+	} = useActiveLog();
 
 	// get only data from the logs object
 	const formattedLogs: ILog[] = useMemo(
@@ -66,56 +65,42 @@ function LiveLogsList({
 		...options.selectColumns,
 	]);
 
-	const handleScrollToLog = useScrollToLog({
-		logs: formattedLogs,
-		virtuosoRef: ref,
-	});
-
 	const getItemContent = useCallback(
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<div key={log.id}>
-						<RawLogView
-							data={log}
-							isActiveLog={activeLog?.id === log.id}
-							linesPerRow={options.maxLines}
-							selectedFields={selectedFields}
-							fontSize={options.fontSize}
-							handleChangeSelectedView={handleChangeSelectedView}
-							onSetActiveLog={handleSetActiveLog}
-							onClearActiveLog={handleCloseLogDetail}
-						/>
-					</div>
+					<RawLogView
+						key={log.id}
+						data={log}
+						linesPerRow={options.maxLines}
+						selectedFields={selectedFields}
+						fontSize={options.fontSize}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
 				);
 			}
 
 			return (
-				<div key={log.id}>
-					<ListLogView
-						logData={log}
-						isActiveLog={activeLog?.id === log.id}
-						selectedFields={selectedFields}
-						linesPerRow={options.maxLines}
-						onAddToQuery={onAddToQuery}
-						onSetActiveLog={handleSetActiveLog}
-						onClearActiveLog={handleCloseLogDetail}
-						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
-				</div>
+				<ListLogView
+					key={log.id}
+					logData={log}
+					selectedFields={selectedFields}
+					linesPerRow={options.maxLines}
+					onAddToQuery={onAddToQuery}
+					onSetActiveLog={onSetActiveLog}
+					fontSize={options.fontSize}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
 			);
 		},
 		[
+			handleChangeSelectedView,
+			onAddToQuery,
+			onSetActiveLog,
+			options.fontSize,
 			options.format,
 			options.maxLines,
-			options.fontSize,
-			activeLog?.id,
 			selectedFields,
-			onAddToQuery,
-			handleSetActiveLog,
-			handleCloseLogDetail,
-			handleChangeSelectedView,
 		],
 	);
 
@@ -171,10 +156,6 @@ function LiveLogsList({
 								activeLogIndex,
 							}}
 							handleChangeSelectedView={handleChangeSelectedView}
-							logs={formattedLogs}
-							onSetActiveLog={handleSetActiveLog}
-							onClearActiveLog={handleCloseLogDetail}
-							activeLog={activeLog}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
@@ -192,17 +173,14 @@ function LiveLogsList({
 				</InfinityWrapperStyled>
 			)}
 
-			{activeLog && selectedTab && (
+			{activeLog && (
 				<LogDetail
-					selectedTab={selectedTab}
+					selectedTab={VIEW_TYPES.OVERVIEW}
 					log={activeLog}
-					onClose={handleCloseLogDetail}
+					onClose={onClearActiveLog}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onAddToQuery}
 					handleChangeSelectedView={handleChangeSelectedView}
-					logs={formattedLogs}
-					onNavigateLog={handleSetActiveLog}
-					onScrollToLog={handleScrollToLog}
 				/>
 			)}
 		</div>

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -395,7 +395,7 @@ export default function TableViewActions(
 								onOpenChange={setIsOpen}
 								arrow={false}
 								content={
-									<div data-log-detail-ignore="true">
+									<div>
 										<Button
 											className="more-filter-actions"
 											type="text"
@@ -481,7 +481,7 @@ export default function TableViewActions(
 							onOpenChange={setIsOpen}
 							arrow={false}
 							content={
-								<div data-log-detail-ignore="true">
+								<div>
 									<Button
 										className="more-filter-actions"
 										type="text"

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx

@@ -7,7 +7,6 @@ import {
 	useMemo,
 } from 'react';
 import { ColumnsType } from 'antd/es/table';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
 import { ColumnTypeRender } from 'components/Logs/TableView/types';
 import { FontSize } from 'container/OptionsMenu/types';
@@ -23,27 +22,22 @@ interface TableRowProps {
 	tableColumns: ColumnsType<Record<string, unknown>>;
 	index: number;
 	log: Record<string, unknown>;
-	onShowLogDetails?: (
-		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
-	) => void;
+	handleSetActiveContextLog: (log: ILog) => void;
+	onShowLogDetails: (log: ILog) => void;
 	logs: ILog[];
 	hasActions: boolean;
 	fontSize: FontSize;
-	isActiveLog?: boolean;
-	onClearActiveLog?: () => void;
 }
 
 export default function TableRow({
 	tableColumns,
 	index,
 	log,
+	handleSetActiveContextLog,
 	onShowLogDetails,
 	logs,
 	hasActions,
 	fontSize,
-	isActiveLog,
-	onClearActiveLog,
 }: TableRowProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -58,31 +52,21 @@ export default function TableRow({
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-			if (!currentLog) {
+			if (!handleSetActiveContextLog || !currentLog) {
 				return;
 			}
 
-			onShowLogDetails?.(currentLog, VIEW_TYPES.CONTEXT);
+			handleSetActiveContextLog(currentLog);
 		},
-		[currentLog, onShowLogDetails],
+		[currentLog, handleSetActiveContextLog],
 	);
 
 	const handleShowLogDetails = useCallback(() => {
-		if (!currentLog) {
+		if (!onShowLogDetails || !currentLog) {
 			return;
 		}
-
-		// If this log is already active, close the detail drawer
-		if (isActiveLog && onClearActiveLog) {
-			onClearActiveLog();
-			return;
-		}
-
-		// Otherwise, open the detail drawer for this log
-		if (onShowLogDetails) {
-			onShowLogDetails(currentLog);
-		}
-	}, [currentLog, onShowLogDetails, isActiveLog, onClearActiveLog]);
+		onShowLogDetails(currentLog);
+	}, [currentLog, onShowLogDetails]);
 
 	const hasSingleColumn =
 		tableColumns.filter((column) => column.key !== 'state-indicator').length ===

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -4,6 +4,7 @@ import {
 	TableVirtuoso,
 	TableVirtuosoHandle,
 } from 'react-virtuoso';
+import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import { useTableView } from 'components/Logs/TableView/useTableView';
@@ -57,40 +58,26 @@ const CustomTableRow: TableComponents<ILog>['TableRow'] = ({
 
 const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 	function InfinityTableView(
-		{
-			isLoading,
-			tableViewProps,
-			infitiyTableProps,
-			onSetActiveLog,
-			onClearActiveLog,
-			activeLog,
-		},
+		{ isLoading, tableViewProps, infitiyTableProps, handleChangeSelectedView },
 		ref,
 	): JSX.Element | null {
-		const { activeLog: activeContextLog } = useActiveLog();
-
-		const onSetActiveLogExpand = useCallback(
-			(log: ILog) => {
-				onSetActiveLog?.(log);
-			},
-			[onSetActiveLog],
-		);
-
-		const onSetActiveLogContext = useCallback(
-			(log: ILog) => {
-				onSetActiveLog?.(log, VIEW_TYPES.CONTEXT);
-			},
-			[onSetActiveLog],
-		);
-
-		const onCloseActiveLog = useCallback(() => {
-			onClearActiveLog?.();
-		}, [onClearActiveLog]);
+		const {
+			activeLog: activeContextLog,
+			onSetActiveLog: handleSetActiveContextLog,
+			onClearActiveLog: handleClearActiveContextLog,
+			onAddToQuery: handleAddToQuery,
+		} = useActiveLog();
+		const {
+			activeLog,
+			onSetActiveLog,
+			onClearActiveLog,
+			onAddToQuery,
+		} = useActiveLog();
 
 		const { dataSource, columns } = useTableView({
 			...tableViewProps,
-			onClickExpand: onSetActiveLogExpand,
-			onOpenLogsContext: onSetActiveLogContext,
+			onClickExpand: onSetActiveLog,
+			onOpenLogsContext: handleSetActiveContextLog,
 		});
 
 		const { draggedColumns, onDragColumns } = useDragColumns<
@@ -111,32 +98,27 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		);
 
 		const itemContent = useCallback(
-			(index: number, log: Record<string, unknown>): JSX.Element => {
-				return (
-					<div key={log.id as string}>
-						<TableRow
-							tableColumns={tableColumns}
-							index={index}
-							log={log}
-							logs={tableViewProps.logs}
-							hasActions
-							fontSize={tableViewProps.fontSize}
-							onShowLogDetails={onSetActiveLog}
-							isActiveLog={activeLog?.id === log.id}
-							onClearActiveLog={onCloseActiveLog}
-						/>
-					</div>
-				);
-			},
+			(index: number, log: Record<string, unknown>): JSX.Element => (
+				<TableRow
+					tableColumns={tableColumns}
+					index={index}
+					log={log}
+					handleSetActiveContextLog={handleSetActiveContextLog}
+					logs={tableViewProps.logs}
+					hasActions
+					fontSize={tableViewProps.fontSize}
+					onShowLogDetails={onSetActiveLog}
+				/>
+			),
 			[
+				handleSetActiveContextLog,
 				tableColumns,
-				onSetActiveLog,
-				tableViewProps.logs,
 				tableViewProps.fontSize,
-				activeLog?.id,
-				onCloseActiveLog,
+				tableViewProps.logs,
+				onSetActiveLog,
 			],
 		);
+
 		const tableHeader = useCallback(
 			() => (
 				<tr>
@@ -197,6 +179,24 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 						? { endReached: infitiyTableProps.onEndReached }
 						: {})}
 				/>
+
+				{activeContextLog && (
+					<LogDetail
+						log={activeContextLog}
+						onClose={handleClearActiveContextLog}
+						onAddToQuery={handleAddToQuery}
+						selectedTab={VIEW_TYPES.CONTEXT}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
+				)}
+				<LogDetail
+					selectedTab={VIEW_TYPES.OVERVIEW}
+					log={activeLog}
+					onClose={onClearActiveLog}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
 			</>
 		);
 	},

frontend/src/container/LogsExplorerList/InfinityTableView/types.ts

@@ -1,7 +1,5 @@
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { UseTableViewProps } from 'components/Logs/TableView/types';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
-import { ILog } from 'types/api/logs/log';
 
 export type InfinityTableProps = {
 	isLoading?: boolean;
@@ -10,11 +8,4 @@ export type InfinityTableProps = {
 		onEndReached: (index: number) => void;
 	};
 	handleChangeSelectedView?: ChangeViewFunctionType;
-	logs?: ILog[];
-	onSetActiveLog?: (
-		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
-	) => void;
-	onClearActiveLog?: () => void;
-	activeLog?: ILog | null;
 };

frontend/src/container/LogsExplorerList/index.tsx

@@ -4,6 +4,7 @@ import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 // components
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
@@ -15,9 +16,8 @@ import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { FontSize } from 'container/OptionsMenu/types';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
-import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import APIError from 'types/api/error';
 // interfaces
@@ -55,11 +55,10 @@ function LogsExplorerList({
 
 	const {
 		activeLog,
+		onClearActiveLog,
 		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
+		onSetActiveLog,
+	} = useActiveLog();
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -83,12 +82,6 @@ function LogsExplorerList({
 		() => convertKeysToColumnFields(options.selectColumns),
 		[options],
 	);
-
-	const handleScrollToLog = useScrollToLog({
-		logs,
-		virtuosoRef: ref,
-	});
-
 	useEffect(() => {
 		if (!isLoading && !isFetching && !isError && logs.length !== 0) {
 			logEvent('Logs Explorer: Data present', {
@@ -101,48 +94,40 @@ function LogsExplorerList({
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<div key={log.id}>
-						<RawLogView
-							data={log}
-							isActiveLog={activeLog?.id === log.id}
-							linesPerRow={options.maxLines}
-							selectedFields={selectedFields}
-							fontSize={options.fontSize}
-							handleChangeSelectedView={handleChangeSelectedView}
-							onSetActiveLog={handleSetActiveLog}
-							onClearActiveLog={handleCloseLogDetail}
-						/>
-					</div>
+					<RawLogView
+						key={log.id}
+						data={log}
+						linesPerRow={options.maxLines}
+						selectedFields={selectedFields}
+						fontSize={options.fontSize}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
 				);
 			}
 
 			return (
-				<div key={log.id}>
-					<ListLogView
-						logData={log}
-						isActiveLog={activeLog?.id === log.id}
-						selectedFields={selectedFields}
-						onAddToQuery={onAddToQuery}
-						onSetActiveLog={handleSetActiveLog}
-						activeLog={activeLog}
-						fontSize={options.fontSize}
-						linesPerRow={options.maxLines}
-						handleChangeSelectedView={handleChangeSelectedView}
-						onClearActiveLog={handleCloseLogDetail}
-					/>
-				</div>
+				<ListLogView
+					key={log.id}
+					logData={log}
+					selectedFields={selectedFields}
+					onAddToQuery={onAddToQuery}
+					onSetActiveLog={onSetActiveLog}
+					activeLog={activeLog}
+					fontSize={options.fontSize}
+					linesPerRow={options.maxLines}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
 			);
 		},
 		[
-			options.format,
-			options.fontSize,
-			options.maxLines,
 			activeLog,
-			selectedFields,
-			onAddToQuery,
-			handleSetActiveLog,
 			handleChangeSelectedView,
-			handleCloseLogDetail,
+			onAddToQuery,
+			onSetActiveLog,
+			options.fontSize,
+			options.format,
+			options.maxLines,
+			selectedFields,
 		],
 	);
 
@@ -168,10 +153,6 @@ function LogsExplorerList({
 					}}
 					infitiyTableProps={{ onEndReached }}
 					handleChangeSelectedView={handleChangeSelectedView}
-					logs={logs}
-					onSetActiveLog={handleSetActiveLog}
-					onClearActiveLog={handleCloseLogDetail}
-					activeLog={activeLog}
 				/>
 			);
 		}
@@ -218,9 +199,6 @@ function LogsExplorerList({
 		getItemContent,
 		selectedFields,
 		handleChangeSelectedView,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-		activeLog,
 	]);
 
 	const isTraceToLogsNavigation = useMemo(() => {
@@ -300,19 +278,14 @@ function LogsExplorerList({
 						{renderContent}
 					</InfinityWrapperStyled>
 
-					{selectedTab && activeLog && (
-						<LogDetail
-							selectedTab={selectedTab}
-							log={activeLog}
-							onClose={handleCloseLogDetail}
-							onAddToQuery={onAddToQuery}
-							onClickActionItem={onAddToQuery}
-							handleChangeSelectedView={handleChangeSelectedView}
-							logs={logs}
-							onNavigateLog={handleSetActiveLog}
-							onScrollToLog={handleScrollToLog}
-						/>
-					)}
+					<LogDetail
+						selectedTab={VIEW_TYPES.OVERVIEW}
+						log={activeLog}
+						onClose={onClearActiveLog}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onAddToQuery}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
 				</>
 			)}
 		</div>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -466,10 +466,7 @@ function LogsExplorerViewsContainer({
 						</div>
 					)}
 
-				<div
-					className="logs-explorer-views-type-content"
-					data-log-detail-ignore="true"
-				>
+				<div className="logs-explorer-views-type-content">
 					{showLiveLogs && (
 						<LiveLogs handleChangeSelectedView={handleChangeSelectedView} />
 					)}

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react';
 import { UseQueryResult } from 'react-query';
 import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { ResizeTable } from 'components/ResizeTable';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -15,7 +16,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import Controls from 'container/Controls';
 import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
 import { tableStyles } from 'container/TracesExplorer/ListView/styles';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useLogsData } from 'hooks/useLogsData';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { FlatLogData } from 'lib/logs/flatLogData';
@@ -82,24 +83,24 @@ function LogsPanelComponent({
 		() => logs.map((log) => FlatLogData(log) as RowData),
 		[logs],
 	);
+
 	const {
 		activeLog,
+		onSetActiveLog,
+		onClearActiveLog,
 		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
+	} = useActiveLog();
 
 	const handleRow = useCallback(
 		(record: RowData): HTMLAttributes<RowData> => ({
 			onClick: (): void => {
 				const log = logs.find((item) => item.id === record.id);
 				if (log) {
-					handleSetActiveLog(log);
+					onSetActiveLog(log);
 				}
 			},
 		}),
-		[handleSetActiveLog, logs],
+		[logs, onSetActiveLog],
 	);
 
 	const handleRequestData = (newOffset: number): void => {
@@ -131,7 +132,7 @@ function LogsPanelComponent({
 
 	return (
 		<>
-			<div className="logs-table" data-log-detail-ignore="true">
+			<div className="logs-table">
 				<div className="resize-table">
 					<OverlayScrollbar>
 						<ResizeTable
@@ -165,19 +166,15 @@ function LogsPanelComponent({
 					</div>
 				)}
 			</div>
-			{selectedTab && activeLog && (
-				<LogDetail
-					selectedTab={selectedTab}
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					isListViewPanel
-					listViewPanelSelectedFields={widget?.selectedLogFields}
-					logs={logs}
-					onNavigateLog={handleSetActiveLog}
-				/>
-			)}
+			<LogDetail
+				selectedTab={VIEW_TYPES.OVERVIEW}
+				log={activeLog}
+				onClose={onClearActiveLog}
+				onAddToQuery={onAddToQuery}
+				onClickActionItem={onAddToQuery}
+				isListViewPanel
+				listViewPanelSelectedFields={widget?.selectedLogFields}
+			/>
 		</>
 	);
 }

frontend/src/hooks/logs/useLogDetailHandlers.ts

@@ -1,59 +0,0 @@
-import { useCallback, useState } from 'react';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import type { UseActiveLog } from 'hooks/logs/types';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { ILog } from 'types/api/logs/log';
-
-type SelectedTab = typeof VIEW_TYPES[keyof typeof VIEW_TYPES] | undefined;
-
-type UseLogDetailHandlersParams = {
-	defaultTab?: SelectedTab;
-};
-
-type UseLogDetailHandlersResult = {
-	activeLog: UseActiveLog['activeLog'];
-	onAddToQuery: UseActiveLog['onAddToQuery'];
-	selectedTab: SelectedTab;
-	handleSetActiveLog: (log: ILog, selectedTab?: SelectedTab) => void;
-	handleCloseLogDetail: () => void;
-};
-
-function useLogDetailHandlers({
-	defaultTab = VIEW_TYPES.OVERVIEW,
-}: UseLogDetailHandlersParams = {}): UseLogDetailHandlersResult {
-	const {
-		activeLog,
-		onSetActiveLog,
-		onClearActiveLog,
-		onAddToQuery,
-	} = useActiveLog();
-	const [selectedTab, setSelectedTab] = useState<SelectedTab>(defaultTab);
-
-	const handleSetActiveLog = useCallback(
-		(log: ILog, nextTab: SelectedTab = defaultTab): void => {
-			if (activeLog?.id === log.id) {
-				onClearActiveLog();
-				setSelectedTab(undefined);
-				return;
-			}
-			onSetActiveLog(log);
-			setSelectedTab(nextTab ?? defaultTab);
-		},
-		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog],
-	);
-
-	const handleCloseLogDetail = useCallback((): void => {
-		onClearActiveLog();
-		setSelectedTab(undefined);
-	}, [onClearActiveLog]);
-
-	return {
-		activeLog,
-		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	};
-}
-
-export default useLogDetailHandlers;

frontend/src/hooks/logs/useScrollToLog.ts

@@ -1,28 +0,0 @@
-import { useCallback } from 'react';
-import type { VirtuosoHandle } from 'react-virtuoso';
-
-type UseScrollToLogParams = {
-	logs: Array<{ id: string }>;
-	virtuosoRef: React.RefObject<VirtuosoHandle | null>;
-};
-
-function useScrollToLog({
-	logs,
-	virtuosoRef,
-}: UseScrollToLogParams): (logId: string) => void {
-	return useCallback(
-		(logId: string): void => {
-			const logIndex = logs.findIndex(({ id }) => id === logId);
-			if (logIndex !== -1 && virtuosoRef.current) {
-				virtuosoRef.current.scrollToIndex({
-					index: logIndex,
-					align: 'center',
-					behavior: 'smooth',
-				});
-			}
-		},
-		[logs, virtuosoRef],
-	);
-}
-
-export default useScrollToLog;

frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts

@@ -7,10 +7,11 @@ import { merge } from 'lodash-es';
 import noop from 'lodash-es/noop';
 import uPlot, { Cursor, Hooks, Options } from 'uplot';
 
-import { DEFAULT_CURSOR_CONFIG, DEFAULT_PLOT_CONFIG } from '../constants';
 import {
 	ConfigBuilder,
 	ConfigBuilderProps,
+	DEFAULT_CURSOR_CONFIG,
+	DEFAULT_PLOT_CONFIG,
 	LegendItem,
 	SelectionPreferencesSource,
 } from './types';

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -1,7 +1,6 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
 import {
@@ -292,16 +291,21 @@ function getBarPathBuilder({
 			idx1: number,
 		): Series.Paths | null => {
 			let effectiveBarMaxWidth = barMaxWidth;
-			const widthBasedOnStepInterval = calculateWidthBasedOnStepInterval({
-				uPlotInstance: self,
-				stepInterval,
-			});
 
-			if (widthBasedOnStepInterval > 0) {
-				effectiveBarMaxWidth = Math.min(
-					effectiveBarMaxWidth,
-					widthBasedOnStepInterval,
-				);
+			const xScale = self.scales.x as uPlot.Scale | undefined;
+			if (xScale && typeof xScale.min === 'number') {
+				const start = xScale.min as number;
+				const end = start + stepInterval;
+				const startPx = self.valToPos(start, 'x');
+				const endPx = self.valToPos(end, 'x');
+				const intervalPx = Math.abs(endPx - startPx);
+
+				if (intervalPx > 0) {
+					effectiveBarMaxWidth =
+						typeof barMaxWidth === 'number'
+							? Math.min(barMaxWidth, intervalPx)
+							: intervalPx;
+				}
 			}
 
 			const barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${effectiveBarMaxWidth}`;

frontend/src/lib/uPlotV2/config/types.ts

@@ -1,6 +1,6 @@
 import { PrecisionOption } from 'components/Graph/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import uPlot, { Series } from 'uplot';
+import uPlot, { Cursor, Options, Series } from 'uplot';
 
 import { ThresholdsDrawHookOptions } from '../hooks/types';
 
@@ -186,3 +186,47 @@ export interface LegendItem {
 	color: uPlot.Series['stroke'];
 	show: boolean;
 }
+
+export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
+	focus: {
+		alpha: 0.3,
+	},
+	cursor: {
+		focus: {
+			prox: 30,
+		},
+	},
+	legend: {
+		show: false,
+	},
+	padding: [16, 16, 8, 8],
+	series: [],
+	hooks: {},
+};
+
+const POINTS_FILL_COLOR = '#FFFFFF';
+
+export const DEFAULT_CURSOR_CONFIG: Cursor = {
+	drag: { setScale: true },
+	points: {
+		one: true,
+		size: (u, seriesIdx) => (u.series[seriesIdx]?.points?.size ?? 0) * 3,
+		width: (_u, _seriesIdx, size) => size / 4,
+		stroke: (u, seriesIdx): string => {
+			const points = u.series[seriesIdx]?.points;
+			const strokeFn =
+				typeof points?.stroke === 'function' ? points.stroke : undefined;
+			const strokeValue =
+				strokeFn !== undefined
+					? strokeFn(u, seriesIdx)
+					: typeof points?.stroke === 'string'
+					? points.stroke
+					: '';
+			return `${strokeValue}90`;
+		},
+		fill: (): string => POINTS_FILL_COLOR,
+	},
+	focus: {
+		prox: 30,
+	},
+};

frontend/src/lib/uPlotV2/constants.ts

@@ -1,47 +0,0 @@
-import { Cursor, Options } from 'uplot';
-
-const POINTS_FILL_COLOR = '#FFFFFF';
-
-export const DEFAULT_HOVER_PROX_VALUE = 30; // only snap if within 30px horizontally
-export const DEFAULT_FOCUS_PROX_VALUE = 30; // enable focus when the cursor is within 30px of the series
-
-export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
-	focus: {
-		alpha: 0.3,
-	},
-	legend: {
-		show: false,
-	},
-	padding: [16, 16, 8, 8],
-	series: [],
-	hooks: {},
-};
-
-export const DEFAULT_CURSOR_CONFIG: Cursor = {
-	drag: { setScale: true },
-	points: {
-		one: true,
-		size: (u, seriesIdx) => (u.series[seriesIdx]?.points?.size ?? 0) * 3,
-		width: (_u, _seriesIdx, size) => size / 4,
-		stroke: (u, seriesIdx): string => {
-			const points = u.series[seriesIdx]?.points;
-			const strokeFn =
-				typeof points?.stroke === 'function' ? points.stroke : undefined;
-			const strokeValue =
-				strokeFn !== undefined
-					? strokeFn(u, seriesIdx)
-					: typeof points?.stroke === 'string'
-					? points.stroke
-					: '';
-			return `${strokeValue}90`;
-		},
-		fill: (): string => POINTS_FILL_COLOR,
-	},
-	focus: {
-		prox: DEFAULT_FOCUS_PROX_VALUE,
-	},
-	hover: {
-		prox: DEFAULT_HOVER_PROX_VALUE,
-		bias: 0,
-	},
-};

frontend/src/lib/uPlotV2/utils/index.ts

@@ -1,17 +0,0 @@
-export function calculateWidthBasedOnStepInterval({
-	uPlotInstance,
-	stepInterval,
-}: {
-	uPlotInstance: uPlot;
-	stepInterval: number;
-}): number {
-	const xScale = uPlotInstance.scales.x;
-	if (xScale && typeof xScale.min === 'number') {
-		const start = xScale.min as number;
-		const end = start + stepInterval;
-		const startPx = uPlotInstance.valToPos(start, 'x');
-		const endPx = uPlotInstance.valToPos(end, 'x');
-		return Math.abs(endPx - startPx);
-	}
-	return 0;
-}

frontend/src/styles.scss

@@ -567,15 +567,6 @@ body {
 		border: 1px solid var(--bg-vanilla-300);
 	}
 
-	.ant-tooltip {
-		--antd-arrow-background-color: var(--bg-vanilla-100);
-
-		.ant-tooltip-inner {
-			background-color: var(--bg-vanilla-100);
-			color: var(---bg-ink-500);
-		}
-	}
-
 	.ant-dropdown-menu {
 		border: 1px solid var(--bg-vanilla-300);
 		background: var(--bg-vanilla-100);

frontend/src/utils/logs.ts

@@ -9,9 +9,10 @@ export const getDefaultLogBackground = (
 	if (isReadOnly) {
 		return '';
 	}
+	// TODO handle the light mode here
 	return `&:hover {
     background-color: ${
-					isDarkMode ? 'rgba(171, 189, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'
+					isDarkMode ? 'rgba(171, 189, 255, 0.04)' : 'var(--bg-vanilla-200)'
 				};
     }`;
 };
@@ -27,38 +28,22 @@ export const getActiveLogBackground = (
 	if (isDarkMode) {
 		switch (logType) {
 			case LogType.INFO:
-				return `background-color: ${Color.BG_ROBIN_500}40 !important;`;
+				return `background-color: ${Color.BG_ROBIN_500}10 !important;`;
 			case LogType.WARN:
-				return `background-color: ${Color.BG_AMBER_500}40 !important;`;
+				return `background-color: ${Color.BG_AMBER_500}10 !important;`;
 			case LogType.ERROR:
-				return `background-color: ${Color.BG_CHERRY_500}40 !important;`;
+				return `background-color: ${Color.BG_CHERRY_500}10 !important;`;
 			case LogType.TRACE:
-				return `background-color: ${Color.BG_FOREST_400}40 !important;`;
+				return `background-color: ${Color.BG_FOREST_400}10 !important;`;
 			case LogType.DEBUG:
-				return `background-color: ${Color.BG_AQUA_500}40 !important;`;
+				return `background-color: ${Color.BG_AQUA_500}10 !important;`;
 			case LogType.FATAL:
-				return `background-color: ${Color.BG_SAKURA_500}40 !important;`;
+				return `background-color: ${Color.BG_SAKURA_500}10 !important;`;
 			default:
-				return `background-color: ${Color.BG_ROBIN_500}40 !important;`;
+				return `background-color: ${Color.BG_SLATE_200} !important;`;
 		}
 	}
-	// Light mode - use lighter background colors
-	switch (logType) {
-		case LogType.INFO:
-			return `background-color: ${Color.BG_ROBIN_100} !important;`;
-		case LogType.WARN:
-			return `background-color: ${Color.BG_AMBER_100} !important;`;
-		case LogType.ERROR:
-			return `background-color: ${Color.BG_CHERRY_100} !important;`;
-		case LogType.TRACE:
-			return `background-color: ${Color.BG_FOREST_200} !important;`;
-		case LogType.DEBUG:
-			return `background-color: ${Color.BG_AQUA_100} !important;`;
-		case LogType.FATAL:
-			return `background-color: ${Color.BG_SAKURA_100} !important;`;
-		default:
-			return `background-color: ${Color.BG_VANILLA_300} !important;`;
-	}
+	return `background-color: ${Color.BG_VANILLA_400}!important; color: ${Color.TEXT_SLATE_400} !important;`;
 };
 
 export const getHightLightedLogBackground = (

pkg/apiserver/signozapiserver/provider.go

@@ -22,6 +22,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
+	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/gorilla/mux"
 )
 
@@ -44,6 +45,7 @@ type provider struct {
 	gatewayHandler         gateway.Handler
 	fieldsHandler          fields.Handler
 	authzHandler           authz.Handler
+	zeusHandler            zeus.Handler
 }
 
 func NewFactory(
@@ -63,6 +65,7 @@ func NewFactory(
 	gatewayHandler gateway.Handler,
 	fieldsHandler fields.Handler,
 	authzHandler authz.Handler,
+	zeusHandler zeus.Handler,
 ) factory.ProviderFactory[apiserver.APIServer, apiserver.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("signoz"), func(ctx context.Context, providerSettings factory.ProviderSettings, config apiserver.Config) (apiserver.APIServer, error) {
 		return newProvider(
@@ -85,6 +88,7 @@ func NewFactory(
 			gatewayHandler,
 			fieldsHandler,
 			authzHandler,
+			zeusHandler,
 		)
 	})
 }
@@ -109,6 +113,7 @@ func newProvider(
 	gatewayHandler gateway.Handler,
 	fieldsHandler fields.Handler,
 	authzHandler authz.Handler,
+	zeusHandler zeus.Handler,
 ) (apiserver.APIServer, error) {
 	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/apiserver/signozapiserver")
 	router := mux.NewRouter().UseEncodedPath()
@@ -131,6 +136,7 @@ func newProvider(
 		gatewayHandler:         gatewayHandler,
 		fieldsHandler:          fieldsHandler,
 		authzHandler:           authzHandler,
+		zeusHandler:            zeusHandler,
 	}
 
 	provider.authZ = middleware.NewAuthZ(settings.Logger(), orgGetter, authz)
@@ -199,6 +205,10 @@ func (provider *provider) AddToRouter(router *mux.Router) error {
 		return err
 	}
 
+	if err := provider.addZeusRoutes(router); err != nil {
+		return err
+	}
+
 	return nil
 }
 

pkg/apiserver/signozapiserver/zeus.go

@@ -0,0 +1,65 @@
+package signozapiserver
+
+import (
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/http/handler"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/zeustypes"
+	"github.com/gorilla/mux"
+)
+
+func (provider *provider) addZeusRoutes(router *mux.Router) error {
+	if err := router.Handle("/api/v2/zeus/profiles", handler.New(provider.authZ.AdminAccess(provider.zeusHandler.PutProfile), handler.OpenAPIDef{
+		ID:                  "PutProfileInZeus",
+		Tags:                []string{"zeus"},
+		Summary:             "Put profile in Zeus for a deployment.",
+		Description:         "This endpoint saves the profile of a deployment to zeus.",
+		Request:             new(zeustypes.PostableProfile),
+		RequestContentType:  "application/json",
+		Response:            nil,
+		ResponseContentType: "",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized, http.StatusForbidden, http.StatusNotFound, http.StatusConflict},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/zeus/deployments", handler.New(provider.authZ.AdminAccess(provider.zeusHandler.GetDeployment), handler.OpenAPIDef{
+		ID:                  "GetDeploymentsFromZeus",
+		Tags:                []string{"zeus"},
+		Summary:             "Get deployments from Zeus.",
+		Description:         "This endpoint gets the deployment info from zeus.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(zeustypes.GettableDeployment),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized, http.StatusForbidden, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/zeus/hosts", handler.New(provider.authZ.AdminAccess(provider.zeusHandler.PutHost), handler.OpenAPIDef{
+		ID:                  "PutHostInZeus",
+		Tags:                []string{"zeus"},
+		Summary:             "Put host in Zeus for a deployment.",
+		Description:         "This endpoint saves the host of a deployment to zeus.",
+		Request:             new(zeustypes.PostableHost),
+		RequestContentType:  "application/json",
+		Response:            nil,
+		ResponseContentType: "",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized, http.StatusForbidden, http.StatusNotFound, http.StatusConflict},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	return nil
+}

pkg/signoz/handler.go

@@ -31,6 +31,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/tracefunnel/impltracefunnel"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/SigNoz/signoz/pkg/zeus"
 )
 
 type Handlers struct {
@@ -48,6 +49,7 @@ type Handlers struct {
 	GatewayHandler  gateway.Handler
 	Fields          fields.Handler
 	AuthzHandler    authz.Handler
+	ZeusHandler     zeus.Handler
 }
 
 func NewHandlers(
@@ -60,6 +62,7 @@ func NewHandlers(
 	gatewayService gateway.Gateway,
 	telemetryMetadataStore telemetrytypes.MetadataStore,
 	authz authz.AuthZ,
+	zeusService zeus.Zeus,
 ) Handlers {
 	return Handlers{
 		SavedView:       implsavedview.NewHandler(modules.SavedView),
@@ -76,5 +79,6 @@ func NewHandlers(
 		GatewayHandler:  gateway.NewHandler(gatewayService),
 		Fields:          implfields.NewHandler(providerSettings, telemetryMetadataStore),
 		AuthzHandler:    signozauthzapi.NewHandler(authz),
+		ZeusHandler:     zeus.NewHandler(zeusService, licensing),
 	}
 }

pkg/signoz/handler_test.go

@@ -42,7 +42,7 @@ func TestNewHandlers(t *testing.T) {
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
 	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
 
-	handlers := NewHandlers(modules, providerSettings, nil, nil, nil, nil, nil, nil, nil)
+	handlers := NewHandlers(modules, providerSettings, nil, nil, nil, nil, nil, nil, nil, nil)
 	reflectVal := reflect.ValueOf(handlers)
 	for i := 0; i < reflectVal.NumField(); i++ {
 		f := reflectVal.Field(i)

pkg/signoz/openapi.go

@@ -23,6 +23,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/session"
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
+	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/swaggest/jsonschema-go"
 	"github.com/swaggest/openapi-go"
 	"github.com/swaggest/openapi-go/openapi3"
@@ -52,6 +53,7 @@ func NewOpenAPI(ctx context.Context, instrumentation instrumentation.Instrumenta
 		struct{ gateway.Handler }{},
 		struct{ fields.Handler }{},
 		struct{ authz.Handler }{},
+		struct{ zeus.Handler }{},
 	).New(ctx, instrumentation.ToProviderSettings(), apiserver.Config{})
 	if err != nil {
 		return nil, err

pkg/signoz/provider.go

@@ -252,6 +252,7 @@ func NewAPIServerProviderFactories(orgGetter organization.Getter, authz authz.Au
 			handlers.GatewayHandler,
 			handlers.Fields,
 			handlers.AuthzHandler,
+			handlers.ZeusHandler,
 		),
 	)
 }

pkg/signoz/signoz.go

@@ -392,7 +392,7 @@ func New(
 	userService := impluser.NewService(providerSettings, impluser.NewStore(sqlstore, providerSettings), modules.User, orgGetter, authz, config.User.Root)
 
 	// Initialize all handlers for the modules
-	handlers := NewHandlers(modules, providerSettings, querier, licensing, global, flagger, gateway, telemetryMetadataStore, authz)
+	handlers := NewHandlers(modules, providerSettings, querier, licensing, global, flagger, gateway, telemetryMetadataStore, authz, zeus)
 
 	// Initialize the API server
 	apiserver, err := factory.NewProviderFromNamedMap(

pkg/types/zeustypes/types.go

@@ -0,0 +1,85 @@
+package zeustypes
+
+import (
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type PostableHost struct {
+	Name string `json:"name" required:"true"`
+}
+
+type PostableProfile struct {
+	UsesOtel                     bool     `json:"uses_otel"`
+	HasExistingObservabilityTool bool     `json:"has_existing_observability_tool"`
+	ExistingObservabilityTool    string   `json:"existing_observability_tool"`
+	ReasonsForInterestInSigNoz   []string `json:"reasons_for_interest_in_signoz"`
+	LogsScalePerDayInGB          int64    `json:"logs_scale_per_day_in_gb"`
+	NumberOfServices             int64    `json:"number_of_services"`
+	NumberOfHosts                int64    `json:"number_of_hosts"`
+	WhereDidYouDiscoverSigNoz    string   `json:"where_did_you_discover_signoz"`
+	TimelineForMigratingToSigNoz string   `json:"timeline_for_migrating_to_signoz"`
+}
+
+type GettableDeployment struct {
+	DeploymentModel
+	Cluster   ClusterResponseModel     `json:"cluster"`
+	Histories []DeploymentHistoryModel `json:"histories"`
+}
+
+type DeploymentModel struct {
+	ID        valuer.UUID `json:"id"`
+	Name      string      `json:"name"`
+	State     string      `json:"state"`
+	Tier      string      `json:"tier"`
+	User      string      `json:"user"`
+	LicenseID string      `json:"license_id,omitempty"`
+	Password  string      `json:"password,omitempty"`
+	CreatedAt time.Time   `json:"created_at"`
+	UpdatedAt time.Time   `json:"updated_at"`
+	ClusterID valuer.UUID `json:"cluster_id"`
+	Hosts     []HostModel `json:"hosts,omitempty"`
+}
+
+type ClusterResponseModel struct {
+	ClusterModel
+	Region RegionModel `json:"region"`
+}
+
+type DeploymentHistoryModel struct {
+	ID           valuer.UUID `json:"id"`
+	StateBefore  string      `json:"state_before"`
+	StateAfter   string      `json:"state_after"`
+	Event        string      `json:"event"`
+	CreatedAt    time.Time   `json:"created_at"`
+	DeploymentID valuer.UUID `json:"deployment_id"`
+}
+
+type HostModel struct {
+	Name      string `json:"name"`
+	IsDefault bool   `json:"is_default"`
+}
+
+type ClusterModel struct {
+	ID             valuer.UUID `json:"id"`
+	Name           string      `json:"name"`
+	CloudProvider  string      `json:"cloud_provider"`
+	CloudAccountID string      `json:"cloud_account_id"`
+	CloudRegion    string      `json:"cloud_region"`
+	Address        string      `json:"address"`
+	Ca             string      `json:"ca"`
+	Buffer         int64       `json:"buffer"`
+	CreatedAt      time.Time   `json:"created_at"`
+	UpdatedAt      time.Time   `json:"updated_at"`
+	RegionID       valuer.UUID `json:"region_id"`
+}
+
+type RegionModel struct {
+	ID        valuer.UUID `json:"id"`
+	Name      string      `json:"name"`
+	Category  string      `json:"category"`
+	DNS       string      `json:"dns"`
+	CreatedAt time.Time   `json:"created_at"`
+	UpdatedAt time.Time   `json:"updated_at"`
+}

pkg/zeus/handler.go

@@ -0,0 +1,112 @@
+package zeus
+
+import (
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/http/binding"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/licensing"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/zeustypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type handler struct {
+	zeus      Zeus
+	licensing licensing.Licensing
+}
+
+func NewHandler(zeus Zeus, licensing licensing.Licensing) Handler {
+	return &handler{
+		zeus:      zeus,
+		licensing: licensing,
+	}
+}
+
+func (h *handler) PutProfile(rw http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	license, err := h.licensing.GetActive(ctx, valuer.MustNewUUID(claims.OrgID))
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := new(zeustypes.PostableProfile)
+	if err := binding.JSON.BindBody(r.Body, req); err != nil {
+		render.Error(rw, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "invalid request body"))
+		return
+	}
+
+	if err := h.zeus.PutProfile(ctx, license.Key, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusNoContent, nil)
+}
+
+func (h *handler) GetDeployment(rw http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	license, err := h.licensing.GetActive(ctx, valuer.MustNewUUID(claims.OrgID))
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	response, err := h.zeus.GetDeployment(ctx, license.Key)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, response)
+}
+
+func (h *handler) PutHost(rw http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	license, err := h.licensing.GetActive(ctx, valuer.MustNewUUID(claims.OrgID))
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := new(zeustypes.PostableHost)
+	if err := binding.JSON.BindBody(r.Body, req); err != nil {
+		render.Error(rw, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "invalid request body"))
+		return
+	}
+
+	if req.Name == "" {
+		render.Error(rw, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "name is required"))
+		return
+	}
+
+	if err := h.zeus.PutHost(ctx, license.Key, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusNoContent, nil)
+}

pkg/zeus/noopzeus/provider.go

@@ -5,6 +5,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/types/zeustypes"
 	"github.com/SigNoz/signoz/pkg/zeus"
 )
 
@@ -32,7 +33,7 @@ func (provider *provider) GetPortalURL(_ context.Context, _ string, _ []byte) ([
 	return nil, errors.New(errors.TypeUnsupported, zeus.ErrCodeUnsupported, "getting the portal url is not supported")
 }
 
-func (provider *provider) GetDeployment(_ context.Context, _ string) ([]byte, error) {
+func (provider *provider) GetDeployment(_ context.Context, _ string) (*zeustypes.GettableDeployment, error) {
 	return nil, errors.New(errors.TypeUnsupported, zeus.ErrCodeUnsupported, "getting the deployment is not supported")
 }
 
@@ -40,10 +41,10 @@ func (provider *provider) PutMeters(_ context.Context, _ string, _ []byte) error
 	return errors.New(errors.TypeUnsupported, zeus.ErrCodeUnsupported, "putting meters is not supported")
 }
 
-func (provider *provider) PutProfile(_ context.Context, _ string, _ []byte) error {
+func (provider *provider) PutProfile(_ context.Context, _ string, _ *zeustypes.PostableProfile) error {
 	return errors.New(errors.TypeUnsupported, zeus.ErrCodeUnsupported, "putting profile is not supported")
 }
 
-func (provider *provider) PutHost(_ context.Context, _ string, _ []byte) error {
+func (provider *provider) PutHost(_ context.Context, _ string, _ *zeustypes.PostableHost) error {
 	return errors.New(errors.TypeUnsupported, zeus.ErrCodeUnsupported, "putting host is not supported")
 }

pkg/zeus/zeus.go

@@ -2,8 +2,10 @@ package zeus
 
 import (
 	"context"
+	"net/http"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/zeustypes"
 )
 
 var (
@@ -22,14 +24,25 @@ type Zeus interface {
 	GetPortalURL(context.Context, string, []byte) ([]byte, error)
 
 	// Returns the deployment for the given license key.
-	GetDeployment(context.Context, string) ([]byte, error)
+	GetDeployment(context.Context, string) (*zeustypes.GettableDeployment, error)
 
 	// Puts the meters for the given license key.
 	PutMeters(context.Context, string, []byte) error
 
 	// Put profile for the given license key.
-	PutProfile(context.Context, string, []byte) error
+	PutProfile(context.Context, string, *zeustypes.PostableProfile) error
 
 	// Put host for the given license key.
-	PutHost(context.Context, string, []byte) error
+	PutHost(context.Context, string, *zeustypes.PostableHost) error
+}
+
+type Handler interface {
+	// API level handler for PutProfile
+	PutProfile(http.ResponseWriter, *http.Request)
+
+	// API level handler for GetDeployment
+	GetDeployment(http.ResponseWriter, *http.Request)
+
+	// API level handler for PutHost
+	PutHost(http.ResponseWriter, *http.Request)
 }