Merge branch 'main' into SIG_8931

.github/CODEOWNERS

@@ -110,6 +110,7 @@
 # Dashboard Owners
 
 /frontend/src/hooks/dashboard/ @SigNoz/pulse-frontend
+/frontend/src/providers/Dashboard/ @SigNoz/pulse-frontend
 
 ## Dashboard Types
 

.github/workflows/integrationci.yaml

@@ -46,6 +46,7 @@ jobs:
           - ttl
           - preference
           - logspipelines
+          - alerts
         sqlstore-provider:
           - postgres
           - sqlite

frontend/.eslintrc.js

@@ -118,21 +118,20 @@ module.exports = {
 		'import/no-extraneous-dependencies': ['error', { devDependencies: true }], // Prevents importing packages not in package.json
 		// 'import/no-cycle': 'warn', // TODO: Enable later to detect circular dependencies
 
-		// TODO: Enable in separate PR with auto fixes
-		// // Import sorting rules
-		// 'simple-import-sort/imports': [
-		// 	'error',
-		// 	{
-		// 		groups: [
-		// 			['^react', '^@?\\w'], // React first, then external packages
-		// 			['^@/'], // Absolute imports with @ alias
-		// 			['^\\u0000'], // Side effect imports (import './file')
-		// 			['^\\.'], // Relative imports
-		// 			['^.+\\.s?css$'], // Style imports
-		// 		],
-		// 	},
-		// ],
-		// 'simple-import-sort/exports': 'error', // Auto-sorts exports
+		// Import sorting rules
+		'simple-import-sort/imports': [
+			'error',
+			{
+				groups: [
+					['^react', '^@?\\w'], // React first, then external packages
+					['^@/'], // Absolute imports with @ alias
+					['^\\u0000'], // Side effect imports (import './file')
+					['^\\.'], // Relative imports
+					['^.+\\.s?css$'], // Style imports
+				],
+			},
+		],
+		'simple-import-sort/exports': 'error', // Auto-sorts exports
 
 		// Prettier - code formatting
 		'prettier/prettier': [

frontend/src/AppRoutes/Private.tsx

@@ -1,3 +1,6 @@
+import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { matchPath, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getAll from 'api/v1/user/get';
@@ -9,9 +12,6 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { matchPath, useLocation } from 'react-router-dom';
 import { SuccessResponseV2 } from 'types/api';
 import APIError from 'types/api/error';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';

frontend/src/AppRoutes/index.tsx

@@ -1,3 +1,6 @@
+import { Suspense, useCallback, useEffect, useState } from 'react';
+import { Route, Router, Switch } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { ConfigProvider } from 'antd';
 import getLocalStorageApi from 'api/browser/localstorage/get';
@@ -30,9 +33,6 @@ import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
-import { Suspense, useCallback, useEffect, useState } from 'react';
-import { Route, Router, Switch } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { extractDomain } from 'utils/app';
 

frontend/src/AppRoutes/routes.ts

@@ -1,8 +1,8 @@
+import { RouteProps } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import AlertTypeSelectionPage from 'pages/AlertTypeSelection';
 import MessagingQueues from 'pages/MessagingQueues';
 import MeterExplorer from 'pages/MeterExplorer';
-import { RouteProps } from 'react-router-dom';
 
 import {
 	AlertHistory,

frontend/src/ReactI18/index.tsx

@@ -1,7 +1,7 @@
+import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
-import { initReactI18next } from 'react-i18next';
 
 import cacheBursting from '../../i18n-translations-hash.json';
 

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	AuthtypesPostableAuthDomainDTO,
 	AuthtypesUpdateableAuthDomainDTO,
@@ -27,8 +28,6 @@ import type {
 	UpdateAuthDomainPathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
@@ -33,8 +34,6 @@ import type {
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -13,10 +12,10 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-
-import type { GetFeatures200, RenderErrorResponseDTO } from '../sigNoz.schemas';
+import { useQuery } from 'react-query';
 
 import { GeneratedAPIInstance } from '../../../index';
+import type { GetFeatures200, RenderErrorResponseDTO } from '../sigNoz.schemas';
 
 type AwaitedInput<T> = PromiseLike<T> | T;
 

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	CreateIngestionKey200,
 	CreateIngestionKeyLimit201,
@@ -33,8 +34,6 @@ import type {
 	UpdateIngestionKeyPathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -13,14 +12,14 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetGlobalConfig200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,15 +15,15 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	ListPromotedAndIndexedPaths200,
 	PromotetypesPromotePathDTO,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetMetricAlerts200,
 	GetMetricAlertsParams,
@@ -37,8 +38,6 @@ import type {
 	UpdateMetricMetadataPathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,15 +15,15 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetMyOrganization200,
 	RenderErrorResponseDTO,
 	TypesOrganizationDTO,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetOrgPreference200,
 	GetOrgPreferencePathParameters,
@@ -30,8 +31,6 @@ import type {
 	UpdateUserPreferencePathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	AuthtypesPostableEmailPasswordSessionDTO,
 	AuthtypesPostableRotateTokenDTO,
@@ -31,8 +32,6 @@ import type {
 	RotateSession200,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	AcceptInvite201,
 	ChangePasswordPathParameters,
@@ -37,8 +38,8 @@ import type {
 	RenderErrorResponseDTO,
 	RevokeAPIKeyPathParameters,
 	TypesChangePasswordRequestDTO,
-	TypesPostableAPIKeyDTO,
 	TypesPostableAcceptInviteDTO,
+	TypesPostableAPIKeyDTO,
 	TypesPostableInviteDTO,
 	TypesPostableResetPasswordDTO,
 	TypesStorableAPIKeyDTO,
@@ -48,8 +49,6 @@ import type {
 	UpdateUserPathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

frontend/src/api/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable no-param-reassign */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { QueryClient } from 'react-query';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import post from 'api/v2/sessions/rotate/post';
 import afterLogin from 'AppRoutes/utils';
@@ -12,7 +13,6 @@ import axios, {
 import { ENVIRONMENT } from 'constants/env';
 import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryClient } from 'react-query';
 import { eventEmitter } from 'utils/getEventEmitter';
 
 import apiV1, {

frontend/src/api/plannedDowntime/deleteDowntimeSchedule.ts

@@ -1,5 +1,5 @@
-import axios from 'api';
 import { useMutation, UseMutationResult } from 'react-query';
+import axios from 'api';
 
 export interface DeleteDowntimeScheduleProps {
 	id?: number;

frontend/src/api/plannedDowntime/getAllDowntimeSchedules.ts

@@ -1,7 +1,7 @@
+import { useQuery, UseQueryResult } from 'react-query';
 import axios from 'api';
 import { AxiosError, AxiosResponse } from 'axios';
 import { Option } from 'container/PlannedDowntime/PlannedDowntimeutils';
-import { useQuery, UseQueryResult } from 'react-query';
 
 export type Recurrence = {
 	startTime?: string | null;

frontend/src/components/AlertDetailsFilters/Filters.tsx

@@ -1,7 +1,7 @@
-import './Filters.styles.scss';
-
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 
+import './Filters.styles.scss';
+
 export function Filters(): JSX.Element {
 	return (
 		<div className="filters">

frontend/src/components/AppLoading/AppLoading.tsx

@@ -1,10 +1,10 @@
-import './AppLoading.styles.scss';
-
 import { Typography } from 'antd';
 import get from 'api/browser/localstorage/get';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { THEME_MODE } from 'hooks/useDarkMode/constant';
 
+import './AppLoading.styles.scss';
+
 function AppLoading(): JSX.Element {
 	// Get theme from localStorage directly to avoid context dependency
 	const getThemeFromStorage = (): boolean => {

frontend/src/components/AuthError/AuthError.tsx

@@ -1,9 +1,9 @@
-import './AuthError.styles.scss';
-
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import { CircleAlert } from 'lucide-react';
 import APIError from 'types/api/error';
 
+import './AuthError.styles.scss';
+
 interface AuthErrorProps {
 	error: APIError;
 }

frontend/src/components/AuthPageContainer/AuthFooter.tsx

@@ -1,7 +1,7 @@
-import './AuthFooter.styles.scss';
-
-import { ArrowUpRight } from 'lucide-react';
 import React from 'react';
+import { ArrowUpRight } from 'lucide-react';
+
+import './AuthFooter.styles.scss';
 
 interface FooterItem {
 	icon?: string;

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,8 +1,8 @@
-import './AuthHeader.styles.scss';
-
+import { useCallback } from 'react';
 import { Button } from '@signozhq/button';
 import { LifeBuoy } from 'lucide-react';
-import { useCallback } from 'react';
+
+import './AuthHeader.styles.scss';
 
 function AuthHeader(): JSX.Element {
 	const handleGetHelp = useCallback((): void => {

frontend/src/components/AuthPageContainer/index.tsx

@@ -1,10 +1,10 @@
-import './AuthPageContainer.styles.scss';
-
 import { PropsWithChildren } from 'react';
 
 import AuthFooter from './AuthFooter';
 import AuthHeader from './AuthHeader';
 
+import './AuthPageContainer.styles.scss';
+
 type AuthPageContainerProps = PropsWithChildren<{
 	isOnboarding?: boolean;
 }>;

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -1,5 +1,5 @@
-import './CeleryOverviewConfigOptions.styles.scss';
-
+import { useCallback, useMemo, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Row, Select, Spin } from 'antd';
 import {
 	getValuesFromQueryParams,
@@ -9,8 +9,8 @@ import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOpt
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useCallback, useMemo, useState } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+
+import './CeleryOverviewConfigOptions.styles.scss';
 
 export interface SelectOptionConfig {
 	placeholder: string;

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

@@ -1,5 +1,6 @@
-import './CeleryOverviewTable.styles.scss';
-
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMutation } from 'react-query';
+import { useSelector } from 'react-redux';
 import { LoadingOutlined, SearchOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
@@ -27,13 +28,12 @@ import useDragColumns from 'hooks/useDragColumns';
 import { getDraggedColumns } from 'hooks/useDragColumns/utils';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMutation } from 'react-query';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { formatNumericValue } from 'utils/numericUtils';
 
+import './CeleryOverviewTable.styles.scss';
+
 const INITIAL_PAGE_SIZE = 20;
 
 const showPaginationItem = (total: number, range: number[]): JSX.Element => (

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

@@ -1,10 +1,8 @@
-import './CeleryTaskConfigOptions.styles.scss';
-
+import { useHistory, useLocation } from 'react-router-dom';
 import { Select, Spin, Typography } from 'antd';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useHistory, useLocation } from 'react-router-dom';
 
 import {
 	getValuesFromQueryParams,
@@ -12,6 +10,8 @@ import {
 } from '../CeleryUtils';
 import { useCeleryFilterOptions } from '../useCeleryFilterOptions';
 
+import './CeleryTaskConfigOptions.styles.scss';
+
 function CeleryTaskConfigOptions(): JSX.Element {
 	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
 		'celery.task_name',

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
 import { DefaultOptionType } from 'antd/es/select';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
 import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';

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

@@ -1,5 +1,4 @@
-import './CeleryTaskDetail.style.scss';
-
+import { useState } from 'react';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Divider, Drawer, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -7,7 +6,6 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { X } from 'lucide-react';
-import { useState } from 'react';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
@@ -16,6 +14,8 @@ import CeleryTaskGraph from '../CeleryTaskGraph/CeleryTaskGraph';
 import { createFiltersFromData } from '../CeleryUtils';
 import { useNavigateToExplorer } from '../useNavigateToExplorer';
 
+import './CeleryTaskDetail.style.scss';
+
 export type CeleryTaskData = {
 	entity: string;
 	value: string | number;

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

@@ -1,5 +1,6 @@
-import './CeleryTaskGraph.style.scss';
-
+import { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -10,9 +11,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useCallback, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -39,6 +37,8 @@ import {
 	CeleryTaskStateGraphConfig,
 } from './CeleryTaskStateGraphConfig';
 
+import './CeleryTaskGraph.style.scss';
+
 function CeleryTaskBar({
 	onClick,
 	queryEnabled,

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

@@ -1,3 +1,6 @@
+import { useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -8,9 +11,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useCallback, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';

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

@@ -1,12 +1,10 @@
-import './CeleryTaskGraph.style.scss';
-
+import { useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { Card, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
@@ -24,6 +22,8 @@ import {
 } from './CeleryTaskGraphUtils';
 import CeleryTaskLatencyGraph from './CeleryTaskLatencyGraph';
 
+import './CeleryTaskGraph.style.scss';
+
 export default function CeleryTaskGraphGrid({
 	onClick,
 	queryEnabled,

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

@@ -1,5 +1,6 @@
-import './CeleryTaskGraph.style.scss';
-
+import { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Col, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
@@ -13,9 +14,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useCallback, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { DataSource } from 'types/common/queryBuilder';
@@ -29,6 +27,8 @@ import {
 import { useNavigateToExplorer } from '../useNavigateToExplorer';
 import { celeryTaskLatencyWidgetData } from './CeleryTaskGraphUtils';
 
+import './CeleryTaskGraph.style.scss';
+
 interface TabData {
 	label: string;
 	key: string;

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

@@ -1,11 +1,9 @@
 /* eslint-disable no-nested-ternary */
-import './CeleryTaskGraph.style.scss';
-
+import { Dispatch, SetStateAction, useMemo } from 'react';
 import { Col, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { Dispatch, SetStateAction, useMemo } from 'react';
 
 import {
 	applyCeleryFilterOnWidgetData,
@@ -19,6 +17,8 @@ import {
 } from './CeleryTaskGraphUtils';
 import { useGetValueFromWidget } from './useGetValueFromWidget';
 
+import './CeleryTaskGraph.style.scss';
+
 interface TabData {
 	label: string;
 	key: string;

frontend/src/components/CeleryTask/CeleryTaskGraph/useGetValueFromWidget.ts

@@ -1,10 +1,10 @@
+import { useCallback } from 'react';
+import { useQueries } from 'react-query';
+import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getQueryPayloadFromWidgetsData } from 'pages/Celery/CeleryOverview/CeleryOverviewUtils';
-import { useCallback } from 'react';
-import { useQueries } from 'react-query';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';

frontend/src/components/CeleryTask/useCeleryFilterOptions.ts

@@ -1,6 +1,6 @@
+import { useState } from 'react';
 import { DefaultOptionType } from 'antd/es/select';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { useState } from 'react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+import { useSelector } from 'react-redux';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -5,8 +7,6 @@ import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useCallback } from 'react';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';

frontend/src/components/ChangePercentagePill/ChangePercentagePill.tsx

@@ -1,9 +1,9 @@
-import './ChangePercentagePill.styles.scss';
-
 import { Color } from '@signozhq/design-tokens';
 import cx from 'classnames';
 import { ArrowDown, ArrowUp } from 'lucide-react';
 
+import './ChangePercentagePill.styles.scss';
+
 interface ChangePercentagePillProps {
 	percentage: number;
 	direction: number;

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -1,5 +1,5 @@
-import './ChangelogModal.styles.scss';
-
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useMutation } from 'react-query';
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { Button, Modal } from 'antd';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
@@ -9,13 +9,13 @@ import dayjs from 'dayjs';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { ChevronsDown, ScrollText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useMutation } from 'react-query';
 import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 import { UserPreference } from 'types/api/preferences/preference';
 
 import ChangelogRenderer from './components/ChangelogRenderer';
 
+import './ChangelogModal.styles.scss';
+
 interface Props {
 	changelog: ChangelogSchema;
 	onClose: () => void;

frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx

@@ -1,7 +1,5 @@
-import './ChangelogRenderer.styles.scss';
-
-import dayjs from 'dayjs';
 import ReactMarkdown from 'react-markdown';
+import dayjs from 'dayjs';
 import {
 	ChangelogSchema,
 	Media,
@@ -9,6 +7,8 @@ import {
 	SupportedVideoTypes,
 } from 'types/api/changelog/getChangelogByVersion';
 
+import './ChangelogRenderer.styles.scss';
+
 interface Props {
 	changelog: ChangelogSchema;
 }

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,11 +1,11 @@
+import { useState } from 'react';
+import { useMutation } from 'react-query';
+import { useLocation } from 'react-router-dom';
 import { Button, Modal, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';
 import { CreditCard, MessageSquareText, X } from 'lucide-react';
-import { useState } from 'react';
-import { useMutation } from 'react-query';
-import { useLocation } from 'react-router-dom';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -1,7 +1,13 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 
-import './ClientSideQBSearch.styles.scss';
-
+import {
+	KeyboardEvent,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Select, Tag, Tooltip } from 'antd';
 import {
@@ -33,14 +39,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import type { BaseSelectRef } from 'rc-select';
-import {
-	KeyboardEvent,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
 import {
 	BaseAutocompleteData,
 	DataTypes,
@@ -52,6 +50,8 @@ import {
 import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
+import './ClientSideQBSearch.styles.scss';
+
 export interface AttributeKey {
 	key: string;
 }

frontend/src/components/Common/ErrorStateComponent.tsx

@@ -1,9 +1,9 @@
-import './Common.styles.scss';
-
 import { Typography } from 'antd';
 
 import APIError from '../../types/api/error';
 
+import './Common.styles.scss';
+
 interface ErrorStateComponentProps {
 	message?: string;
 	error?: APIError;

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -1,8 +1,15 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import './CustomTimePicker.styles.scss';
-
+import {
+	ChangeEvent,
+	Dispatch,
+	SetStateAction,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+import { useLocation } from 'react-router-dom';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -17,21 +24,14 @@ import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
 import { defaultTo, isFunction, noop } from 'lodash-es';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import {
-	ChangeEvent,
-	Dispatch,
-	SetStateAction,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';
 import { TimeRangeValidationResult, validateTimeRange } from 'utils/timeUtils';
 
 import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';
 
+import './CustomTimePicker.styles.scss';
+
 const maxAllowedMinTimeInMonths = 15;
 type ViewType = 'datetime' | 'timezone';
 const DEFAULT_VIEW: ViewType = 'datetime';

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -1,5 +1,12 @@
-import './CustomTimePicker.styles.scss';
-
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -16,15 +23,6 @@ import {
 import dayjs from 'dayjs';
 import { Clock, PenLine, TriangleAlertIcon } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
 import { getCustomTimeRanges } from 'utils/customTimeRangeUtils';
 import { TimeRangeValidationResult } from 'utils/timeUtils';
 
@@ -33,6 +31,8 @@ import { CustomTimePickerInputStatus } from './CustomTimePicker';
 import TimezonePicker from './TimezonePicker';
 import { Timezone } from './timezoneUtils';
 
+import './CustomTimePicker.styles.scss';
+
 const TO_MILLISECONDS_FACTOR = 1000_000;
 
 export type DateRange = {

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import './RangePickerModal.styles.scss';
-
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import { DatePicker } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
@@ -11,11 +11,11 @@ import {
 } from 'container/TopNav/DateTimeSelectionV2/types';
 import dayjs, { Dayjs } from 'dayjs';
 import { useTimezone } from 'providers/Timezone';
-import { Dispatch, SetStateAction, useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import './RangePickerModal.styles.scss';
+
 interface RangePickerModalProps {
 	setCustomDTPickerVisible: Dispatch<SetStateAction<boolean>>;
 	setIsOpen: Dispatch<SetStateAction<boolean>>;

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -1,5 +1,10 @@
-import './TimezonePicker.styles.scss';
-
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useState,
+} from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Input } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -8,16 +13,11 @@ import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShort
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { Check, Search } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useState,
-} from 'react';
 
 import { Timezone, TIMEZONE_DATA } from './timezoneUtils';
 
+import './TimezonePicker.styles.scss';
+
 interface SearchBarProps {
 	value: string;
 	onChange: (value: string) => void;

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

@@ -1,8 +1,8 @@
-import './DetailsDrawer.styles.scss';
-
+import { Dispatch, SetStateAction } from 'react';
 import { Drawer, Tabs, TabsProps } from 'antd';
 import cx from 'classnames';
-import { Dispatch, SetStateAction } from 'react';
+
+import './DetailsDrawer.styles.scss';
 
 interface IDetailsDrawerProps {
 	open: boolean;

frontend/src/components/DropDown/DropDown.tsx

@@ -1,9 +1,9 @@
-import './DropDown.styles.scss';
-
+import { useState } from 'react';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useState } from 'react';
+
+import './DropDown.styles.scss';
 
 function DropDown({
 	element,

frontend/src/components/Editor/index.tsx

@@ -1,6 +1,6 @@
+import { useMemo } from 'react';
 import MEditor, { EditorProps } from '@monaco-editor/react';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useMemo } from 'react';
 
 function Editor({
 	value,

frontend/src/components/ErrorBoundaryHOC/__tests__/withErrorBoundary.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
 
 import withErrorBoundary, {
 	WithErrorBoundaryOptions,

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

@@ -1,5 +1,5 @@
-import { Button } from 'antd';
 import { useState } from 'react';
+import { Button } from 'antd';
 
 import { withErrorBoundary } from './index';
 

frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.tsx

@@ -1,5 +1,5 @@
-import * as Sentry from '@sentry/react';
 import { ComponentType, ReactElement } from 'react';
+import * as Sentry from '@sentry/react';
 
 import ErrorBoundaryFallback from '../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 

frontend/src/components/ErrorInPlace/ErrorInPlace.tsx

@@ -1,5 +1,5 @@
-import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import { ReactNode } from 'react';
+import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import APIError from 'types/api/error';
 
 interface ErrorInPlaceProps {

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,15 +1,15 @@
-import './ErrorModal.styles.scss';
-
+import React from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Modal, Tag } from 'antd';
 import { CircleAlert, X } from 'lucide-react';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';
-import React from 'react';
 import APIError from 'types/api/error';
 
 import ErrorContent from './components/ErrorContent';
 
+import './ErrorModal.styles.scss';
+
 type Props = {
 	error: APIError;
 	triggerComponent?: React.ReactElement;

frontend/src/components/ErrorModal/components/ErrorContent.tsx

@@ -1,14 +1,14 @@
-import './ErrorContent.styles.scss';
-
+import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import ErrorIcon from 'assets/Error';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { BookOpenText, ChevronsDown } from 'lucide-react';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
-import { ReactNode } from 'react';
 import APIError from 'types/api/error';
 
+import './ErrorContent.styles.scss';
+
 interface ErrorContentProps {
 	error: APIError;
 	icon?: ReactNode;

frontend/src/components/ErrorPopover/ErrorPopover.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { Popover, PopoverProps } from 'antd';
 import { ReactNode } from 'react';
+import { Popover, PopoverProps } from 'antd';
 
 interface ErrorPopoverProps extends Omit<PopoverProps, 'content'> {
 	/** Content to display in the popover */

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
 import {
 	DeleteOutlined,
 	MoreOutlined,
@@ -29,8 +31,6 @@ import { useUpdateView } from 'hooks/saveViews/useUpdateView';
 import useErrorNotification from 'hooks/useErrorNotification';
 import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
-import { useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { popupContainer } from 'utils/selectPopupContainer';
 

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -1,10 +1,10 @@
+import { MouseEvent, useCallback } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 import { Col, Row, Tooltip, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
-import { MouseEvent, useCallback } from 'react';
 
 import { MenuItemContainer } from './styles';
 import { MenuItemLabelGeneratorProps } from './types';

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,10 +1,10 @@
+import { useTranslation } from 'react-i18next';
 import { Card, Form, Input, Typography } from 'antd';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSaveView } from 'hooks/saveViews/useSaveView';
 import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
-import { useTranslation } from 'react-i18next';
 
 import { SaveButton } from './styles';
 import { SaveViewFormProps, SaveViewWithNameProps } from './types';

frontend/src/components/ExplorerCard/test/SaveViewWithName.test.tsx

@@ -1,6 +1,6 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { fireEvent, render } from '@testing-library/react';
 import ROUTES from 'constants/routes';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import { DataSource } from 'types/common/queryBuilder';
 
 import SaveViewWithName from '../SaveViewWithName';

frontend/src/components/ExplorerCard/types.ts

@@ -1,9 +1,9 @@
+import { UseMutateAsyncFunction } from 'react-query';
 import { FormInstance } from 'antd';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import { AxiosResponse } from 'axios';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { OptionsQuery } from 'container/OptionsMenu/types';
-import { UseMutateAsyncFunction } from 'react-query';
 import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import {

frontend/src/components/Graph/index.tsx

@@ -1,3 +1,12 @@
+import {
+	forwardRef,
+	memo,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+} from 'react';
 import {
 	_adapters,
 	BarController,
@@ -24,15 +33,6 @@ import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import isEqual from 'lodash-es/isEqual';
 import { useTimezone } from 'providers/Timezone';
-import {
-	forwardRef,
-	memo,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-} from 'react';
 
 import { hasData } from './hasData';
 import { legend } from './Plugin';

frontend/src/components/Graph/types.ts

@@ -1,3 +1,4 @@
+import { ForwardedRef, ReactNode } from 'react';
 import {
 	ActiveElement,
 	Chart,
@@ -7,7 +8,6 @@ import {
 	ChartType,
 	TimeUnit,
 } from 'chart.js';
-import { ForwardedRef, ReactNode } from 'react';
 
 import {
 	dragSelectPluginId,

frontend/src/components/Graph/utils.ts

@@ -1,10 +1,10 @@
+import { MutableRefObject } from 'react';
 import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
 // eslint-disable-next-line import/namespace -- side-effect import that registers Chart.js date adapter
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
-import { MutableRefObject } from 'react';
 
 import { getAxisLabelColor } from './helpers';
 import {

frontend/src/components/Graph/xAxisConfig.ts

@@ -1,6 +1,6 @@
-import { Chart, TimeUnit } from 'chart.js';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import { Chart, TimeUnit } from 'chart.js';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,10 +1,10 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/sonner';
 import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { handleContactSupport } from 'pages/Integrations/utils';
-import { useCallback, useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 
 function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	const [activeTab, setActiveTab] = useState('feedback');

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -1,16 +1,16 @@
-import './HeaderRightSection.styles.scss';
-
+import { useCallback, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Globe, Inbox, SquarePen } from 'lucide-react';
-import { useCallback, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 
 import AnnouncementsModal from './AnnouncementsModal';
 import FeedbackModal from './FeedbackModal';
 import ShareURLModal from './ShareURLModal';
 
+import './HeaderRightSection.styles.scss';
+
 interface HeaderRightSectionProps {
 	enableAnnouncements: boolean;
 	enableShare: boolean;

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -1,3 +1,7 @@
+import { useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { matchPath, useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Switch, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -6,10 +10,6 @@ import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import { Check, Info, Link2 } from 'lucide-react';
-import { useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { matchPath, useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 // Mock dependencies before imports
+import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { handleContactSupport } from 'pages/Integrations/utils';
-import { useLocation } from 'react-router-dom';
 
 import FeedbackModal from '../FeedbackModal';
 

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

@@ -2,11 +2,11 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 /* eslint-disable react/jsx-props-no-spreading */
 // Mock dependencies before imports
+import { useLocation } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useLocation } from 'react-router-dom';
 
 import HeaderRightSection from '../HeaderRightSection';
 

frontend/src/components/HeaderRightSection/__tests__/ShareURLModal.test.tsx

@@ -1,13 +1,13 @@
 // Mock dependencies before imports
+import { useSelector } from 'react-redux';
+import { matchPath, useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
-import { useSelector } from 'react-redux';
-import { matchPath, useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
 
 import ShareURLModal from '../ShareURLModal';
 

frontend/src/components/HostMetricsDetail/Containers/Containers.tsx

@@ -1,10 +1,10 @@
-import './Containers.styles.scss';
-
-import { Space, Typography } from 'antd';
 import { useTranslation } from 'react-i18next';
+import { Space, Typography } from 'antd';
 
 import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
 
+import './Containers.styles.scss';
+
 const { Text } = Typography;
 
 function Containers(): JSX.Element {

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx

@@ -1,5 +1,5 @@
-import './HostMetricTraces.styles.scss';
-
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
 import logEvent from 'api/common/logEvent';
 import { ResizeTable } from 'components/ResizeTable';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -21,8 +21,6 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -30,6 +28,8 @@ import { VIEWS } from '../constants';
 import { getHostTracesQueryPayload, selectedColumns } from './constants';
 import { getListColumns } from './utils';
 
+import './HostMetricTraces.styles.scss';
+
 interface Props {
 	timeRange: {
 		startTime: number;

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -1,5 +1,6 @@
-import './HostMetricsDetail.styles.scss';
-
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import {
 	Button,
@@ -37,9 +38,6 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
@@ -60,6 +58,8 @@ import HostMetricLogsDetailedView from './HostMetricsLogs/HostMetricLogsDetailed
 import HostMetricTraces from './HostMetricTraces/HostMetricTraces';
 import Metrics from './Metrics/Metrics';
 import Processes from './Processes/Processes';
+
+import './HostMetricsDetail.styles.scss';
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function HostMetricsDetails({
 	host,

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

@@ -1,5 +1,4 @@
-import './HostMetricLogs.styles.scss';
-
+import { useMemo } from 'react';
 import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
@@ -7,13 +6,14 @@ import {
 	Time,
 } from 'container/TopNav/DateTimeSelectionV2/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useMemo } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { VIEWS } from '../constants';
 import HostMetricsLogs from './HostMetricsLogs';
 
+import './HostMetricLogs.styles.scss';
+
 interface Props {
 	timeRange: {
 		startTime: number;

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

@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
-import './HostMetricLogs.styles.scss';
-
+import { useCallback, useEffect, useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { Virtuoso } from 'react-virtuoso';
 import { Card } from 'antd';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -10,15 +11,14 @@ import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { useCallback, useEffect, useMemo } from 'react';
-import { useQuery } from 'react-query';
-import { Virtuoso } from 'react-virtuoso';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import { getHostLogsQueryPayload } from './constants';
 import NoLogsContainer from './NoLogsContainer';
 
+import './HostMetricLogs.styles.scss';
+
 interface Props {
 	timeRange: {
 		startTime: number;

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -1,5 +1,5 @@
-import './Metrics.styles.scss';
-
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { QueryFunctionContext, useQueries, UseQueryResult } from 'react-query';
 import { Card, Col, Row, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
@@ -20,14 +20,14 @@ import { useMultiIntersectionObserver } from 'hooks/useMultiIntersectionObserver
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { QueryFunctionContext, useQueries, UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
 
+import './Metrics.styles.scss';
+
 interface MetricsTabProps {
 	timeRange: {
 		startTime: number;

frontend/src/components/HostMetricsDetail/Processes/Processes.tsx

@@ -1,10 +1,10 @@
-import './Processes.styles.scss';
-
-import { Space, Typography } from 'antd';
 import { useTranslation } from 'react-i18next';
+import { Space, Typography } from 'antd';
 
 import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
 
+import './Processes.styles.scss';
+
 const { Text } = Typography;
 
 function Processes(): JSX.Element {

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

@@ -1,13 +1,13 @@
-import './WaitListFragment.styles.scss';
-
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
 import { CheckCircle2, HandPlatter } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+
+import './WaitListFragment.styles.scss';
 
 export default function WaitlistFragment({
 	entityType,

frontend/src/components/Input/index.tsx

@@ -1,4 +1,3 @@
-import { Form, Input, InputProps, InputRef } from 'antd';
 import {
 	ChangeEventHandler,
 	FocusEventHandler,
@@ -7,6 +6,7 @@ import {
 	ReactNode,
 	Ref,
 } from 'react';
+import { Form, Input, InputProps, InputRef } from 'antd';
 
 function InputComponent({
 	value,

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,9 +1,9 @@
-import './InputWithLabel.styles.scss';
-
+import { useState } from 'react';
 import { Button, Input, Typography } from 'antd';
 import cx from 'classnames';
 import { X } from 'lucide-react';
-import { useState } from 'react';
+
+import './InputWithLabel.styles.scss';
 
 function InputWithLabel({
 	label,

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,5 +1,6 @@
-import './LaunchChatSupport.styles.scss';
-
+import { useMemo, useState } from 'react';
+import { useMutation } from 'react-query';
+import { useLocation } from 'react-router-dom';
 import { Button, Modal, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
@@ -10,13 +11,12 @@ import { useNotifications } from 'hooks/useNotifications';
 import { defaultTo } from 'lodash-es';
 import { CreditCard, HelpCircle, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { useMemo, useState } from 'react';
-import { useMutation } from 'react-query';
-import { useLocation } from 'react-router-dom';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
 
+import './LaunchChatSupport.styles.scss';
+
 export interface LaunchChatSupportProps {
 	eventName: string;
 	attributes: Record<string, unknown>;

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,9 +1,9 @@
-import './LearnMore.styles.scss';
-
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { ArrowUpRight } from 'lucide-react';
 
+import './LearnMore.styles.scss';
+
 type LearnMoreProps = {
 	text?: string;
 	url?: string;

frontend/src/components/Loadable/Loadable.test.tsx

@@ -1,9 +1,9 @@
+import React, { ComponentType, Suspense } from 'react';
 import {
 	render,
 	screen,
 	waitForElementToBeRemoved,
 } from '@testing-library/react';
-import React, { ComponentType, Suspense } from 'react';
 
 import Loadable from './index';
 

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.tsx

@@ -1,11 +1,11 @@
-import './QueryBuilderSearchWrapper.styles.scss';
-
+import { Dispatch, SetStateAction, useEffect } from 'react';
 import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
 import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import { Dispatch, SetStateAction, useEffect } from 'react';
 import { ILog } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
+import './QueryBuilderSearchWrapper.styles.scss';
+
 function QueryBuilderSearchWrapper({
 	log,
 	filters,

frontend/src/components/LogDetail/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import './LogDetails.styles.scss';
-
+import { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
 import { RadioChangeEvent } from 'antd/lib';
@@ -40,9 +41,6 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { useCopyToClipboard, useLocation } from 'react-use';
 import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -51,6 +49,8 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
 
+import './LogDetails.styles.scss';
+
 function LogDetailInner({
 	log,
 	onClose,

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -1,12 +1,12 @@
-import './AddToQueryHOC.styles.scss';
-
+import { memo, MouseEvent, ReactNode, useMemo } from 'react';
 import { Popover } from 'antd';
 import cx from 'classnames';
 import { OPERATORS } from 'constants/queryBuilder';
 import { FontSize } from 'container/OptionsMenu/types';
-import { memo, MouseEvent, ReactNode, useMemo } from 'react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
+import './AddToQueryHOC.styles.scss';
+
 function AddToQueryHOC({
 	fieldKey,
 	fieldValue,

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -1,7 +1,7 @@
-import { Popover } from 'antd';
-import { useNotifications } from 'hooks/useNotifications';
 import { ReactNode, useCallback, useEffect } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { Popover } from 'antd';
+import { useNotifications } from 'hooks/useNotifications';
 
 function CopyClipboardHOC({
 	entityKey,

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

@@ -1,5 +1,4 @@
-import './ListLogView.styles.scss';
-
+import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
 import { Typography } from 'antd';
 import cx from 'classnames';
@@ -15,7 +14,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 // utils
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
-import { memo, useCallback, useMemo } from 'react';
 // interfaces
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
@@ -29,6 +27,8 @@ import { getLogIndicatorType } from '../LogStateIndicator/utils';
 import { Container, LogContainer, LogText } from './styles';
 import { isValidLogField } from './util';
 
+import './ListLogView.styles.scss';
+
 interface LogFieldProps {
 	fieldKey: string;
 	fieldValue: string;

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.tsx

@@ -1,9 +1,9 @@
-import './LogLinesActionButtons.styles.scss';
-
+import { memo, MouseEventHandler } from 'react';
 import { LinkOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
 import { TextSelect } from 'lucide-react';
-import { memo, MouseEventHandler } from 'react';
+
+import './LogLinesActionButtons.styles.scss';
 
 export interface LogLinesActionButtonsProps {
 	handleShowContext: MouseEventHandler<HTMLElement>;

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx

@@ -1,10 +1,10 @@
-import './LogStateIndicator.styles.scss';
-
 import cx from 'classnames';
 import { FontSize } from 'container/OptionsMenu/types';
 
 import { getLogTypeBySeverityNumber } from './utils';
 
+import './LogStateIndicator.styles.scss';
+
 export const SEVERITY_TEXT_TYPE = {
 	TRACE: 'TRACE',
 	TRACE2: 'TRACE2',

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

@@ -1,3 +1,12 @@
+import {
+	KeyboardEvent,
+	memo,
+	MouseEvent,
+	MouseEventHandler,
+	useCallback,
+	useMemo,
+	useState,
+} from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { DrawerProps, Tooltip } from 'antd';
 import LogDetail from 'components/LogDetail';
@@ -11,15 +20,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { isEmpty, isNumber, isUndefined } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
-import {
-	KeyboardEvent,
-	memo,
-	MouseEvent,
-	MouseEventHandler,
-	useCallback,
-	useMemo,
-	useState,
-} from 'react';
 
 import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';

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

@@ -1,6 +1,6 @@
+import { MouseEvent } from 'react';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
-import { MouseEvent } from 'react';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 

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

@@ -1,5 +1,5 @@
-import { TableProps } from 'antd';
 import { CSSProperties } from 'react';
+import { TableProps } from 'antd';
 
 export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 	return {

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -1,5 +1,4 @@
-import './useTableView.styles.scss';
-
+import { useMemo } from 'react';
 import { Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import cx from 'classnames';
@@ -8,7 +7,6 @@ import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
-import { useMemo } from 'react';
 
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 import {
@@ -23,6 +21,8 @@ import {
 	UseTableViewResult,
 } from './types';
 
+import './useTableView.styles.scss';
+
 export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 	const {
 		logs,

frontend/src/components/LogsDownloadOptionsMenu/LogsDownloadOptionsMenu.test.tsx

@@ -1,5 +1,3 @@
-import '@testing-library/jest-dom';
-
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { message } from 'antd';
 import { ENVIRONMENT } from 'constants/env';
@@ -7,6 +5,8 @@ import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
+import '@testing-library/jest-dom';
+
 import { DownloadFormats, DownloadRowCounts } from './constants';
 import LogsDownloadOptionsMenu from './LogsDownloadOptionsMenu';