fix: guide user on empty external api monitoring page

Fixes #3703

.devenv/docker/clickhouse/compose.yaml

@@ -42,7 +42,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.129.12
     container_name: schema-migrator-sync
     command:
       - sync
@@ -55,7 +55,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.129.12
     container_name: schema-migrator-async
     command:
       - async

.github/CODEOWNERS

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

.github/workflows/gor-signoz-community.yaml

@@ -3,8 +3,8 @@ name: gor-signoz-community
 on:
   push:
     tags:
-      - "v[0-9]+.[0-9]+.[0-9]+"
-      - "v[0-9]+.[0-9]+.[0-9]+-rc.[0-9]+"
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+      - 'v[0-9]+.[0-9]+.[0-9]+-rc.[0-9]+'
 
 permissions:
   contents: write
@@ -21,10 +21,6 @@ jobs:
         shell: bash
         run: |
           echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
-      - name: node-setup
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
       - name: build-frontend
         run: make js-build
       - name: upload-frontend-artifact
@@ -93,7 +89,7 @@ jobs:
         uses: goreleaser/goreleaser-action@v6
         with:
           distribution: goreleaser-pro
-          version: "~> v2"
+          version: '~> v2'
           args: release --config ${{ env.CONFIG_PATH }} --clean --split
           workdir: .
         env:
@@ -151,7 +147,7 @@ jobs:
         if: steps.cache-linux.outputs.cache-hit == 'true' && steps.cache-darwin.outputs.cache-hit == 'true' # only run if caches hit
         with:
           distribution: goreleaser-pro
-          version: "~> v2"
+          version: '~> v2'
           args: continue --merge
           workdir: .
         env:

.github/workflows/gor-signoz.yaml

@@ -37,10 +37,6 @@ jobs:
           echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
           echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
           echo 'DOCS_BASE_URL="https://signoz.io"' >> .env
-      - name: node-setup
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
       - name: build-frontend
         run: make js-build
       - name: upload-frontend-artifact

.github/workflows/integrationci.yaml

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

.gitignore

@@ -57,6 +57,7 @@ bin/
 .local/
 */query-service/queries.active
 ee/query-service/db
+
 # e2e
 
 e2e/node_modules/

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.110.0
+    image: signoz/signoz:v0.108.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -209,7 +209,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.13
+    image: signoz/signoz-otel-collector:v0.129.12
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -233,7 +233,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.129.12
     deploy:
       restart_policy:
         condition: on-failure

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.110.0
+    image: signoz/signoz:v0.108.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -150,7 +150,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.13
+    image: signoz/signoz-otel-collector:v0.129.12
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -176,7 +176,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.129.12
     deploy:
       restart_policy:
         condition: on-failure

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.110.0}
+    image: signoz/signoz:${VERSION:-v0.108.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -213,7 +213,7 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.12}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -239,7 +239,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -250,7 +250,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
     container_name: schema-migrator-async
     command:
       - async

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.110.0}
+    image: signoz/signoz:${VERSION:-v0.108.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -144,7 +144,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.12}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -166,7 +166,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -178,7 +178,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
     container_name: schema-migrator-async
     command:
       - async

docs/contributing/onboarding.md

@@ -24,7 +24,7 @@ The configuration file is a JSON array containing data source objects. Each obje
 | `label` | `string` | Display name shown to users (e.g., `"AWS EC2"`) |
 | `tags` | `string[]` | Array of category tags for grouping (e.g., `["AWS"]`, `["database"]`) |
 | `module` | `string` | Destination module after onboarding completion |
-| `imgUrl` | `string` | Path to the logo/icon **(SVG required)** (e.g., `"/Logos/ec2.svg"`) |
+| `imgUrl` | `string` | Path to the logo/icon (e.g., `"/Logos/ec2.svg"`) |
 
 ### Optional Keys
 

frontend/.eslintrc.js

@@ -118,20 +118,21 @@ 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
 
-		// 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
+		// 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
 
 		// Prettier - code formatting
 		'prettier/prettier': [

frontend/public/Logos/groq.svg

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

frontend/public/Logos/langtrace.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
-  <image width="200" height="200" href="data:image/webp;base64,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" />
-</svg>

frontend/public/Logos/traceloop.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid meet">
-  <image width="256" height="256" href="data:image/webp;base64,UklGRjoOAABXRUJQVlA4WAoAAAAQAAAA/wAA/wAAQUxQSLsGAAAB8IZtE+q22baNJFsOrKIpqC01lLw1jOWayszMTGFmZo6s0nWVmQzXFeb4KoUjwwVO1BguV3HBDIL5YZqZNda/bIqICYCw/8P+DxvYmulyt2AX/ce+2UkyIm5/v8iHWra4XZnWDt1ciF178NP+Au7/H2pbeHN7did2/dV3cfX4HDV22tuw52AoGHicp8c+1DnH3sqJoaH/OpavUWsnANyEoeKvPRmeQL1vAmthyIBT6ezlihVaMzB0rLCRPYKap2eFEHg12beqZblDiclkv6nmbg4l3qEyUPVmDCW/pOqnGwZDifepLtAt6AklFlBBnWqer0OJu8j2qPb1UyFEw7lkk1V7yqgKHf4G5PGNilUZMClkaEygg+WKTQKI/DlUmACMRrFaP0cCQL/S0OADCwdcekap0n7QekBRKOC0AW+KR6WiAdC2scHf1VU+COwXvK+Pf4MBHUxaW9qFBX58tTtITMmqVKV0bRJ01nHDXV3z7aPOBbkJaXdpeYMDwv4/C6GR+uJYLV/OPF+MdeCjY8W/ekusnJQHxtK/mGp0JiPXh5oGdtxlkeBY5UVz5j8aISFmYSny+nIzOtJnM+p7IJnNNr0RzXtsMN9LNShwc592RnhR49oMph7/RFM3PcBk/whleke0MbAadW66jiVyG5o8cBeL5TOUWj0QAIwS1Pq3OI7laPraJI7xKLfEAFiOen/IMNBvPtzG0L9BEC6H6AbFgol0X6GGY+g2ouSG6NdQ80VkF/pUeJfM/qcofC1PtYNkD6CKZWTXouy8MtVaIqgW64AxVG8KK0Pd46neV2Iw1VJh2juoPtJtjbR63XpQOZVIppohrP6gauVA/YYOTRFUDwo7uEa1T8kG6bAbqHsJWzNKtTvJoEiFF8hgj6xRkK/Yf6x0L2pwpjvdnaLyAUYE9LoF6COOKPAMMG4XFBgBANPU2gCcl1ab7gvg7OuVMw1ab1LqcxsLpNabbEd3Fhh6RsomaHuCT6HgQhswDykxlcsOzJccF+GbAO1fnq3O7pHA32P+X6b5MRX47ZOq+LIvhw4nTMx2e7Qsypt5Ocjs+dDffjzlkV68dd4wkBl1tyv/pIfcnT0xAcL+P9twwsRst4f8ZL7rnighQ+duLvaI//FvjxhCLpuZW+TR0p09MaFjl2cje9Vku4AbfkSz/rWop4DhO1Hb7Ms7MMGHEo9fwmXfiGY+NYzLuiCI+vomtLMJhf4+nCdqG5q7IZXH9gnqvKmNaSjW24/lUzR7bQrLWtR6GgCMCMjBnRxPovmPRzDciGoHRgDko+S76Lr/XwF8ic5aqBfmwygUfYDuOdTwv3S3o+aj1sjCvmTbVcBhZB+ptuagsIepbI06jCX7VbWD9cLmUF2EOrqouqPq9Sh8LdVgJT6n6qOb+JVUVyjxAVW0cmXCxlFdqMQyKmuzamV5wq6ngtM6PEQFP6uW95qs6iiyt1TwxZLNU+216AZRm4B8pArfAHmCX7GGaFguqdFBB/9QIDCIDv6m2HIAo0TQRGBMrDXfCmCMrVSrxACAgdVivrRwwB0Bs+2I5IBrGpSqHgitR3iFfGoH3vuazLWlB/CmV6vkHQFt99ksoeY1C3APPmKipuk24E48oNDmPtDBjFwfU9nCWBBoe/iASbxrHCDQctf2gCq+3AzopJH64lj6B1MsIDX2llfHin9soBWknpfx8lgtX0w1IOz/sxA6briL/LbhhhzrxZl3aXltX0GxV90l/gZHp5LWliKrf++zdhGj3/8DNT251CEiZnYBmrJ0bVJHjA1+5D91M1+fb1HdlsVRbLZJdWha/wajnQFFKHO+hWmMFzU+GMd07lY0ddGANvqVotQVPCMbUOeiGJYe/0KTl/YDgMifUe6jHLEVqPU2C8ff0fQ/RwJMQsF/RDN8gHo/zZCJCk4Co0oSLqG7LKjY6Qi6nzSoMp5C0ZU2spWo+a1kQ1DFp76WhaPJilVzkc3U4WuPsNepzkHVD5J9r4MnKGw5VYpulWSHdQii8LVUg3X7i+y4DtgsbAFVsm6nyX7Wodkt7EmqSL9qu8k+1sGdJSyJCvJVW0D2kg5ZGbKOAfk41QaT9Q6okG4tFPUU3fm1iu0B+s81KLTCTZKORdDBJL2CoxgSGhW4CQCcchquAEbbHrUWAOcL5nMCANhzpLTcCqzRJ5T6yMICS82WY28FdqeMymuB+fzNKi22APM4n6mcdmj35kK+lndjgN3yfIU6B68B/kF7zFN4M3TUmulytzB4t0/pCyLtD3z8X78ajUc2XAMyhy8/WCevxe3KtELY/2H/hw0OAFZQOCBYBwAAcDIAnQEqAAEAAT5tMpJFpCOhmApkyEAGxLE3cLO/I/8A/AD9APeogBDf+wH8n/gH4AfoB/D8D/bUGJv3b8rvGLBD2z8kv6L+13LBGO/UZ+8+1n5jf2T+j+wDzCP0i/03UP8wn6r/83/Ye+Z/jv7B7I/13/ID5AP6p/eP/Z7WHqRft57AH8g/2XpTfsZ/3fkf/a/9xvgd/XX/4ewB6AHVf9AP4B+AH6V0/6X/37XCnfIaNJCv3UeIbyMN5GG7FGGXSbcdew8aH+Bc8jPujAWD5wlI0vGluc15OXPagLZ8UxFfBAlngGwyAgncED6mebGS9plnBjVRDpz0QjHI7NbLJCxCvFKIDQxTIXTAX5W3acocmvQ/OXAfnjdGNjAFiZXJq+/TbBzGEHdg+muQ+hFFPR2JnvUSNpSYiGR57j5nlFet8+EyOPVmbGlR6r47DqM+38DTtDHOHz36jaDYexg9qHpxk3+59nQC1SOzy4m4u34GLkKXdKCpMehdu53FcSHUZwi37E2m0zNsuu+Q0aSFfuo8Q3kYbyMN5GG6AAD8hoAAAAAAAtSatOsx3/xQJLZJVNwvp3oF/sWdRuskPj8s391kh8d5sIy+9WFVihdPhMB/7oNptL8qeszrOKuQiABZ2qtQOEHxZqWJnio26h/5Vo4krKGOO0sEz6Hv5rWo4fY5j+Zkip4N2flcerdMsQa4aobjtm8EeilMPd1RKe3T2L0a/Cv9h3t065fg6SjwXyBvg2hYN5RVMz/+NTMiir38FhGGkGCU+n7zH7a6z+ZsKOKACwNxEF24gJYE5Z8YDT/LDnQYzNPs7fnw0DWqqrx34u1n8kIsG90iig+vnPhkaVDzEnlMOItgwAov/p/WcPmzTS/ESKniY3/MPn06vQ7wic6l2jPoEyPrpPntLEOo7YMH2DlbEeYrf53exjRiZcoP/Ct0vnxkiHQpZk7RAgR6cllYgknBYToYbOnOoJ31iIPn+tjP9Wi1AD4rjN8FcbwzXiiXhq7Gpi/P39FnE7kEHxM3vJ6IfeN8kET6YhP9+bS4Ndq9z76kggowPI6pCeXTbktqMjiZBKP512NVTKWySMPWK2cDgYHLavMlfOsRt+ejI3anQJ8WOB5Sj4jg+PmmRO0YbrVrKJlMyW9DQhQxUYSb68hxwsa0pT95muv26wX/UbDfNNZqiY+FY3E3IrOLBfx/PvkZag+Z1tU15DmS4oWxI1MZPiItkOO5brQrLJ4gEX/aqDZVYH5qQqEYAdzEawMyn+D8EIsnVFuZBNbvILVTzHSwk5p+TPibb4Bij8La/IJ3+b8zP3KyRwEs7cd4bm+Kk65mOeRHpY//wUWtOhkyo+qCpkP9B+BZwjtgg93EV8KAePfDCEvQd6szMwcXg364KeljltsktN3CEwdKtH5sTvqV4jy9/ySVzVng2aUX/rOq5NjhT5vpK5nuKGWPdhY6RWG/JJfzsRE9JFNVJDLuZWWPyOhtK52DWPq8KkvizSdW1HXse/jEbnWBMMY4QwuO7eYDSR462HFk4zWyEZKugT+Uop5KD4KF+4xpfPgWfPcD4doS/+fEI2HjOrl8ctTT0EKp255SHoe3jdEi6QVMzZoAJS4j6vntijLltNjzgznBcSIrdKAgCdZjX9+VDrtqECJvxN3Z0S2oEoVZf2tji5V6DXamlubRVYpvsgB0DK/ACFIRFc4ggMNRpcbv9wYeN/ch3k6B5RkfzyDTkXb+RkS8ZLdbq1+tq/I8eK9g1/wuAZNhQkc5QmjUYgl3QAo86JmxC4zO0au6U/fSE11r16YB3WkeheQcJUKCbRTGS8OOs30DN7fpcxuuyEU3yM8HEqoyjd1rdQAi9K6LdRvQyLh3A9JmvA1EAjN8i2uLOeZi81BhiwAsZle61AOM78/l7yxuHy40ECHE9YostmdueER4HTWcMMGg0X8eJcujrbN1S4qyGxITPLghrKViISKTyPZ5qSo6EwnWhwA+XrAtKvtNVyS5f2iWAFmfHlQxfB+NXNwhxPwQ2akkMg3wgSifNE4lDRelowqblVu+ByzHBWsJkemp5mw2u/1Wl+RmpkyV7U5cIjxTkKyprg12fSsb7L3rIIHxd4ZgDArHDgESQGwDGC+iMlFrZKAfhcSUxuvPko5fkWdmQ/+oI2RMP4/d0h4/foef6PFHier1x+nRlT+0ZjBnE6Z32aVtbLbEPc+Z/EgAGsRF1RpteYADfJzufleSz65a2AZGpwwvDlrHbL9WdGx4Ww776VnxhYV27x6KH0biDB/mTxsIwv4zQQiKkDjcibMmzgp2PvZ3foNNj+SEDx11+lqzPpayPGMBRlQgr9yVhV93j2rzdy+mYvCoHNBVmA6kubmaB2ilYOI/AMpq6CFrzpkL8UJoedOwyLxtwJIWPjP+a++KkMbgYxBuo7dViu8XMjZ9jD1lMMABEIMT5fvOnzyyoKUFfnseMxeoFZjuySXC9vxk95ivyfGaZgXSPDdaiQAGYrj9aBUAAAAAAAA=" />
-</svg>

frontend/src/AppRoutes/Private.tsx

@@ -1,6 +1,3 @@
-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';
@@ -12,6 +9,9 @@ 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,6 +1,3 @@
-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';
@@ -33,6 +30,9 @@ 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,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,9 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import { GeneratedAPIInstance } from '../../../index';
 import type {
 	AuthtypesPostableAuthDomainDTO,
 	AuthtypesUpdateableAuthDomainDTO,
@@ -28,6 +27,8 @@ 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,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,9 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import { GeneratedAPIInstance } from '../../../index';
 import type {
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
@@ -34,6 +33,8 @@ 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,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,10 +13,10 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';
+
+import type { GetFeatures200, RenderErrorResponseDTO } from '../sigNoz.schemas';
 
 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,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,9 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import { GeneratedAPIInstance } from '../../../index';
 import type {
 	CreateIngestionKey200,
 	CreateIngestionKeyLimit201,
@@ -34,6 +33,8 @@ 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,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,14 +13,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,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,15 +16,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,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,9 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetMetricAlerts200,
 	GetMetricAlertsParams,
@@ -38,6 +37,8 @@ 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,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,15 +16,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,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,9 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetOrgPreference200,
 	GetOrgPreferencePathParameters,
@@ -31,6 +30,8 @@ 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,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,9 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import { GeneratedAPIInstance } from '../../../index';
 import type {
 	AuthtypesPostableEmailPasswordSessionDTO,
 	AuthtypesPostableRotateTokenDTO,
@@ -32,6 +31,8 @@ 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,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,9 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import { GeneratedAPIInstance } from '../../../index';
 import type {
 	AcceptInvite201,
 	ChangePasswordPathParameters,
@@ -38,8 +37,8 @@ import type {
 	RenderErrorResponseDTO,
 	RevokeAPIKeyPathParameters,
 	TypesChangePasswordRequestDTO,
-	TypesPostableAcceptInviteDTO,
 	TypesPostableAPIKeyDTO,
+	TypesPostableAcceptInviteDTO,
 	TypesPostableInviteDTO,
 	TypesPostableResetPasswordDTO,
 	TypesStorableAPIKeyDTO,
@@ -49,6 +48,8 @@ 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,7 +1,6 @@
 /* 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';
@@ -13,6 +12,7 @@ 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 { useMutation, UseMutationResult } from 'react-query';
 import axios from 'api';
+import { useMutation, UseMutationResult } from 'react-query';
 
 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 DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
-
 import './Filters.styles.scss';
 
+import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
+
 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,8 +1,8 @@
-import React from 'react';
-import { ArrowUpRight } from 'lucide-react';
-
 import './AuthFooter.styles.scss';
 
+import { ArrowUpRight } from 'lucide-react';
+import React from 'react';
+
 interface FooterItem {
 	icon?: string;
 	text: string;

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,8 +1,8 @@
-import { useCallback } from 'react';
+import './AuthHeader.styles.scss';
+
 import { Button } from '@signozhq/button';
 import { LifeBuoy } from 'lucide-react';
-
-import './AuthHeader.styles.scss';
+import { useCallback } from 'react';
 
 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 { useCallback, useMemo, useState } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import './CeleryOverviewConfigOptions.styles.scss';
+
 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 './CeleryOverviewConfigOptions.styles.scss';
+import { useCallback, useMemo, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 
 export interface SelectOptionConfig {
 	placeholder: string;

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

@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMutation } from 'react-query';
-import { useSelector } from 'react-redux';
+import './CeleryOverviewTable.styles.scss';
+
 import { LoadingOutlined, SearchOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
@@ -28,12 +27,13 @@ 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,8 +1,10 @@
-import { useHistory, useLocation } from 'react-router-dom';
+import './CeleryTaskConfigOptions.styles.scss';
+
 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,
@@ -10,8 +12,6 @@ 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,4 +1,5 @@
-import { useState } from 'react';
+import './CeleryTaskDetail.style.scss';
+
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Divider, Drawer, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -6,6 +7,7 @@ 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';
@@ -14,8 +16,6 @@ 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,6 +1,5 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import './CeleryTaskGraph.style.scss';
+
 import { Color } from '@signozhq/design-tokens';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -11,6 +10,9 @@ 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';
@@ -37,8 +39,6 @@ import {
 	CeleryTaskStateGraphConfig,
 } from './CeleryTaskStateGraphConfig';
 
-import './CeleryTaskGraph.style.scss';
-
 function CeleryTaskBar({
 	onClick,
 	queryEnabled,

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

@@ -1,6 +1,3 @@
-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';
@@ -11,6 +8,9 @@ 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,10 +1,12 @@
-import { useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
+import './CeleryTaskGraph.style.scss';
+
 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';
@@ -22,8 +24,6 @@ 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,6 +1,5 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import './CeleryTaskGraph.style.scss';
+
 import { Col, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
@@ -14,6 +13,9 @@ 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';
@@ -27,8 +29,6 @@ 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,9 +1,11 @@
 /* eslint-disable no-nested-ternary */
-import { Dispatch, SetStateAction, useMemo } from 'react';
+import './CeleryTaskGraph.style.scss';
+
 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,
@@ -17,8 +19,6 @@ 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,5 +1,3 @@
-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';
@@ -7,6 +5,8 @@ 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 { useCallback, useEffect, useRef, useState } from 'react';
-import { useMutation } from 'react-query';
+import './ChangelogModal.styles.scss';
+
 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,5 +1,7 @@
-import ReactMarkdown from 'react-markdown';
+import './ChangelogRenderer.styles.scss';
+
 import dayjs from 'dayjs';
+import ReactMarkdown from 'react-markdown';
 import {
 	ChangelogSchema,
 	Media,
@@ -7,8 +9,6 @@ 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,13 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 
-import {
-	KeyboardEvent,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
+import './ClientSideQBSearch.styles.scss';
+
 import { Color } from '@signozhq/design-tokens';
 import { Select, Tag, Tooltip } from 'antd';
 import {
@@ -39,6 +33,14 @@ 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,
@@ -50,8 +52,6 @@ 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.styles.scss

@@ -131,45 +131,6 @@
 	border-top: 1px solid var(--bg-ink-200);
 	padding: 8px 14px;
 	.timezone-container {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-
-		&__left {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			gap: 6px;
-
-			.timezone__name {
-				font-size: 12px;
-				line-height: 16px;
-				color: var(--bg-robin-400);
-				font-weight: 500;
-			}
-
-			.timezone__separator {
-				font-size: 12px;
-				line-height: 16px;
-				color: var(--bg-robin-300);
-				font-weight: 500;
-			}
-
-			.timezone__offset {
-				font-size: 11px;
-				line-height: 14px;
-				color: var(--bg-robin-400);
-				font-weight: 500;
-			}
-		}
-
-		&__right {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			gap: 6px;
-		}
-
 		&,
 		.timezone {
 			font-family: Inter;
@@ -177,7 +138,6 @@
 			line-height: 16px;
 			letter-spacing: -0.06px;
 		}
-
 		display: flex;
 		align-items: center;
 		color: var(--bg-vanilla-400);
@@ -196,21 +156,18 @@
 		}
 	}
 }
-
 .timezone-badge {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	padding: 0 4px;
 	border-radius: 2px;
-	color: var(--bg-vanilla-400);
-	background-color: var(--bg-ink-200);
-	font-size: 9px;
+	background: rgba(171, 189, 255, 0.04);
+	color: var(--bg-vanilla-100);
+	font-size: 12px;
 	font-weight: 400;
-	line-height: 12px;
-	letter-spacing: -0.045px;
-	margin-right: 4px;
-	width: 72px;
+	line-height: 16px;
+	letter-spacing: -0.06px;
 	cursor: pointer;
 }
 
@@ -226,7 +183,6 @@
 	font-size: 11px;
 	color: var(--bg-vanilla-400);
 	background-color: var(--bg-ink-200);
-	cursor: pointer;
 
 	&.is-live {
 		background-color: transparent;
@@ -282,10 +238,11 @@
 	.date-time-popover__footer {
 		border-color: var(--bg-vanilla-400);
 	}
-
 	.timezone-container {
 		color: var(--bg-ink-400);
-
+		&__clock-icon {
+			stroke: var(--bg-ink-400);
+		}
 		.timezone {
 			color: var(--bg-ink-100);
 			background: rgb(179 179 179 / 15%);

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -1,16 +1,10 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import {
-	ChangeEvent,
-	Dispatch,
-	SetStateAction,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
+import './CustomTimePicker.styles.scss';
+
 import { Input, InputRef, Popover, Tooltip } from 'antd';
+import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
@@ -24,14 +18,23 @@ 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,
+	useCallback,
+	useEffect,
+	useMemo,
+	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';
@@ -110,8 +113,22 @@ function CustomTimePicker({
 
 	const [activeView, setActiveView] = useState<ViewType>(DEFAULT_VIEW);
 
-	const { timezone } = useTimezone();
+	const { timezone, browserTimezone } = useTimezone();
 	const activeTimezoneOffset = timezone.offset;
+	const isTimezoneOverridden = useMemo(
+		() => timezone.offset !== browserTimezone.offset,
+		[timezone, browserTimezone],
+	);
+
+	const handleViewChange = useCallback(
+		(newView: 'timezone' | 'datetime'): void => {
+			if (activeView !== newView) {
+				setActiveView(newView);
+			}
+			setOpen(true);
+		},
+		[activeView, setOpen],
+	);
 
 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);
 
@@ -354,7 +371,6 @@ function CustomTimePicker({
 			startTime,
 			endTime,
 			DATE_TIME_FORMATS.UK_DATETIME_SECONDS,
-			timezone.value,
 		);
 
 		if (!isValidTimeRange) {
@@ -406,8 +422,8 @@ function CustomTimePicker({
 		</div>
 	);
 
-	const handleOpen = (e?: React.SyntheticEvent): void => {
-		e?.stopPropagation?.();
+	const handleOpen = (e: React.SyntheticEvent): void => {
+		e.stopPropagation();
 
 		if (showLiveLogs) {
 			setOpen(true);
@@ -420,12 +436,12 @@ function CustomTimePicker({
 		// reset the input status and error message as we reset the time to previous correct value
 		resetErrorStatus();
 
-		const startTime = dayjs(minTime / 1000_000)
-			.tz(timezone.value)
-			.format(DATE_TIME_FORMATS.UK_DATETIME_SECONDS);
-		const endTime = dayjs(maxTime / 1000_000)
-			.tz(timezone.value)
-			.format(DATE_TIME_FORMATS.UK_DATETIME_SECONDS);
+		const startTime = dayjs(minTime / 1000_000).format(
+			DATE_TIME_FORMATS.UK_DATETIME_SECONDS,
+		);
+		const endTime = dayjs(maxTime / 1000_000).format(
+			DATE_TIME_FORMATS.UK_DATETIME_SECONDS,
+		);
 
 		setInputValue(`${startTime} - ${endTime}`);
 	};
@@ -452,6 +468,18 @@ function CustomTimePicker({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [location.pathname]);
 
+	const handleTimezoneHintClick = (e: React.MouseEvent): void => {
+		e.stopPropagation();
+		handleViewChange('timezone');
+		setIsOpenedFromFooter(false);
+		logEvent(
+			'DateTimePicker: Timezone picker opened from time range input badge',
+			{
+				page: location.pathname,
+			},
+		);
+	};
+
 	const handleInputBlur = (): void => {
 		resetErrorStatus();
 	};
@@ -470,28 +498,20 @@ function CustomTimePicker({
 		return '';
 	};
 
-	const focusInput = (): void => {
-		// Use setTimeout to wait for React to update the DOM and make input editable
-		setTimeout(() => {
-			const inputElement = inputRef.current?.input;
-			if (inputElement) {
-				inputElement.focus();
-				inputElement.select();
-			}
-		}, 100);
-	};
-
 	// Focus and select input text when popover opens
 	useEffect(() => {
 		if (open && inputRef.current) {
-			focusInput();
+			// Use setTimeout to wait for React to update the DOM and make input editable
+			setTimeout(() => {
+				const inputElement = inputRef.current?.input;
+				if (inputElement) {
+					inputElement.focus();
+					inputElement.select();
+				}
+			}, 0);
 		}
 	}, [open]);
 
-	const handleTimezoneChange = (): void => {
-		focusInput();
-	};
-
 	return (
 		<div className="custom-time-picker">
 			<Tooltip title={getTooltipTitle()} placement="top">
@@ -512,7 +532,6 @@ function CustomTimePicker({
 								customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
 								onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
 								onSelectHandler={handleSelect}
-								onTimezoneChange={handleTimezoneChange}
 								onGoLive={defaultTo(onGoLive, noop)}
 								onExitLiveLogs={defaultTo(onExitLiveLogs, noop)}
 								options={items}
@@ -564,8 +583,8 @@ function CustomTimePicker({
 						prefix={getInputPrefix()}
 						suffix={
 							<div className="time-input-suffix">
-								{activeTimezoneOffset && (
-									<div className="timezone-badge">
+								{!!isTimezoneOverridden && activeTimezoneOffset && (
+									<div className="timezone-badge" onClick={handleTimezoneHintClick}>
 										<span>{activeTimezoneOffset}</span>
 									</div>
 								)}

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -1,12 +1,5 @@
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
+import './CustomTimePicker.styles.scss';
+
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -23,15 +16,21 @@ 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';
 
 import CalendarContainer from './CalendarContainer';
 import { CustomTimePickerInputStatus } from './CustomTimePicker';
 import TimezonePicker from './TimezonePicker';
-import { Timezone } from './timezoneUtils';
-
-import './CustomTimePicker.styles.scss';
 
 const TO_MILLISECONDS_FACTOR = 1000_000;
 
@@ -53,7 +52,6 @@ interface CustomTimePickerPopoverContentProps {
 		lexicalContext?: LexicalContext,
 	) => void;
 	onSelectHandler: (label: string, value: string) => void;
-	onTimezoneChange: (timezone: Timezone) => void;
 	onGoLive: () => void;
 	selectedTime: string;
 	activeView: 'datetime' | 'timezone';
@@ -103,7 +101,6 @@ function CustomTimePickerPopoverContent({
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
 	onSelectHandler,
-	onTimezoneChange,
 	onGoLive,
 	selectedTime,
 	activeView,
@@ -211,7 +208,6 @@ function CustomTimePickerPopoverContent({
 					setActiveView={setActiveView}
 					setIsOpen={setIsOpen}
 					isOpenedFromFooter={isOpenedFromFooter}
-					onTimezoneSelect={onTimezoneChange}
 				/>
 			</div>
 		);
@@ -356,30 +352,26 @@ function CustomTimePickerPopoverContent({
 
 			<div className="date-time-popover__footer">
 				<div className="timezone-container">
-					<div className="timezone-container__left">
-						<Clock
-							color={Color.BG_ROBIN_400}
-							className="timezone-container__clock-icon"
-							height={12}
-							width={12}
+					<Clock
+						color={Color.BG_VANILLA_400}
+						className="timezone-container__clock-icon"
+						height={12}
+						width={12}
+					/>
+					<span className="timezone__icon">Current timezone</span>
+					<div>⎯</div>
+					<button
+						type="button"
+						className="timezone"
+						onClick={handleTimezoneHintClick}
+					>
+						<span>{activeTimezoneOffset}</span>
+						<PenLine
+							color={Color.BG_VANILLA_100}
+							className="timezone__icon"
+							size={10}
 						/>
-
-						<span className="timezone__name">{timezone.name}</span>
-						<span className="timezone__separator">⎯</span>
-						<span className="timezone__offset">{activeTimezoneOffset}</span>
-					</div>
-
-					<div className="timezone-container__right">
-						<Button
-							type="text"
-							size="small"
-							className="periscope-btn text timezone-change-button"
-							onClick={handleTimezoneHintClick}
-							icon={<PenLine size={10} />}
-						>
-							Change Timezone
-						</Button>
-					</div>
+					</button>
 				</div>
 			</div>
 		</>

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { Dispatch, SetStateAction, useMemo } from 'react';
-import { useSelector } from 'react-redux';
+import './RangePickerModal.styles.scss';
+
 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,10 +1,5 @@
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useState,
-} from 'react';
+import './TimezonePicker.styles.scss';
+
 import { Color } from '@signozhq/design-tokens';
 import { Input } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -13,11 +8,16 @@ 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;
@@ -121,14 +121,12 @@ interface TimezonePickerProps {
 	setActiveView: Dispatch<SetStateAction<'datetime' | 'timezone'>>;
 	setIsOpen: Dispatch<SetStateAction<boolean>>;
 	isOpenedFromFooter: boolean;
-	onTimezoneSelect: (timezone: Timezone) => void;
 }
 
 function TimezonePicker({
 	setActiveView,
 	setIsOpen,
 	isOpenedFromFooter,
-	onTimezoneSelect,
 }: TimezonePickerProps): JSX.Element {
 	const [searchTerm, setSearchTerm] = useState('');
 	const { timezone, updateTimezone } = useTimezone();
@@ -155,11 +153,11 @@ function TimezonePicker({
 	}, [isOpenedFromFooter, setActiveView, setIsOpen]);
 
 	const handleTimezoneSelect = useCallback(
-		(timezone: Timezone): void => {
+		(timezone: Timezone) => {
 			setSelectedTimezone(timezone.name);
 			updateTimezone(timezone);
-			onTimezoneSelect(timezone);
 			handleCloseTimezonePicker();
+			setIsOpen(false);
 			logEvent('DateTimePicker: New Timezone Selected', {
 				timezone: {
 					name: timezone.name,
@@ -167,7 +165,7 @@ function TimezonePicker({
 				},
 			});
 		},
-		[handleCloseTimezonePicker, updateTimezone, onTimezoneSelect],
+		[handleCloseTimezonePicker, setIsOpen, updateTimezone],
 	);
 
 	// Register keyboard shortcuts
@@ -196,7 +194,7 @@ function TimezonePicker({
 			<div className="timezone-picker__list">
 				{getFilteredTimezones(searchTerm).map((timezone) => (
 					<TimezoneItem
-						key={`${timezone.value}-${timezone.name}`}
+						key={timezone.value}
 						timezone={timezone}
 						isSelected={timezone.name === selectedTimezone}
 						onClick={(): void => handleTimezoneSelect(timezone)}

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

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

frontend/src/components/DropDown/DropDown.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react';
+import './DropDown.styles.scss';
+
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import './DropDown.styles.scss';
+import { useState } from 'react';
 
 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 React from 'react';
 import { render, screen } from '@testing-library/react';
+import React from 'react';
 
 import withErrorBoundary, {
 	WithErrorBoundaryOptions,

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

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

frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.tsx

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

frontend/src/components/ErrorInPlace/ErrorInPlace.tsx

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

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import './ErrorModal.styles.scss';
+
 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 { ReactNode } from 'react';
+import './ErrorContent.styles.scss';
+
 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 { ReactNode } from 'react';
 import { Popover, PopoverProps } from 'antd';
+import { ReactNode } from 'react';
 
 interface ErrorPopoverProps extends Omit<PopoverProps, 'content'> {
 	/** Content to display in the popover */

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
 import {
 	DeleteOutlined,
 	MoreOutlined,
@@ -31,6 +29,8 @@ 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,12 +1,3 @@
-import {
-	forwardRef,
-	memo,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-} from 'react';
 import {
 	_adapters,
 	BarController,
@@ -33,6 +24,15 @@ 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,4 +1,3 @@
-import { ForwardedRef, ReactNode } from 'react';
 import {
 	ActiveElement,
 	Chart,
@@ -8,6 +7,7 @@ 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 { useCallback, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import './HeaderRightSection.styles.scss';
+
 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,7 +1,3 @@
-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';
@@ -10,6 +6,10 @@ 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 { useTranslation } from 'react-i18next';
+import './Containers.styles.scss';
+
 import { Space, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
 
 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 { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
+import './HostMetricTraces.styles.scss';
+
 import logEvent from 'api/common/logEvent';
 import { ResizeTable } from 'components/ResizeTable';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -21,6 +21,8 @@ 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';
 
@@ -28,8 +30,6 @@ 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,6 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { useSearchParams } from 'react-router-dom-v5-compat';
+import './HostMetricsDetail.styles.scss';
+
 import { Color, Spacing } from '@signozhq/design-tokens';
 import {
 	Button,
@@ -38,6 +37,9 @@ 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 {
@@ -58,8 +60,6 @@ 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,4 +1,5 @@
-import { useMemo } from 'react';
+import './HostMetricLogs.styles.scss';
+
 import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
@@ -6,14 +7,13 @@ 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,7 +1,6 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo } from 'react';
-import { useQuery } from 'react-query';
-import { Virtuoso } from 'react-virtuoso';
+import './HostMetricLogs.styles.scss';
+
 import { Card } from 'antd';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -11,14 +10,15 @@ 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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { QueryFunctionContext, useQueries, UseQueryResult } from 'react-query';
+import './Metrics.styles.scss';
+
 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 { useTranslation } from 'react-i18next';
+import './Processes.styles.scss';
+
 import { Space, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
 
 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 { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import './WaitListFragment.styles.scss';
+
 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 './WaitListFragment.styles.scss';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 export default function WaitlistFragment({
 	entityType,

frontend/src/components/Input/index.tsx

@@ -1,3 +1,4 @@
+import { Form, Input, InputProps, InputRef } from 'antd';
 import {
 	ChangeEventHandler,
 	FocusEventHandler,
@@ -6,7 +7,6 @@ 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 { useState } from 'react';
+import './InputWithLabel.styles.scss';
+
 import { Button, Input, Typography } from 'antd';
 import cx from 'classnames';
 import { X } from 'lucide-react';
-
-import './InputWithLabel.styles.scss';
+import { useState } from 'react';
 
 function InputWithLabel({
 	label,