feat: generate semantic convention families

* feat(onboarding): add HCP Vault, OpenTelemetry eBPF, Langflow, Cohere, and Auth0 datasources

Add UI onboarding configurations (logos + datasource entries) so these tools
appear in the Add Data Source onboarding flow. SVG logos optimized with svgo.

Closes signoz.io#3614 (HCP Vault)
Closes signoz.io#3626 (OpenTelemetry eBPF / OBI)
Closes signoz.io#3680 (Langflow)
Closes signoz.io#3702 (Cohere)
Closes signoz.io#3562 (Auth0)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(onboarding): add PgBouncer datasource

Add PgBouncer (PostgreSQL connection pooler) metrics onboarding entry,
reusing the existing PostgreSQL logo.

Closes signoz.io#3553 (PgBouncer)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore(onboarding): update SVG logos and category of datasources

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Jugal Kishore <jugal@signoz.io>

.github/workflows/goci.yaml

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

Makefile

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

docs/api/openapi.yml

@@ -10247,9 +10247,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - dashboard:update
       - tokenizer:
-        - ADMIN
+        - dashboard:update
       summary: Delete public dashboard
       tags:
       - dashboard
@@ -10298,9 +10298,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - dashboard:read
       - tokenizer:
-        - ADMIN
+        - dashboard:read
       summary: Get public dashboard
       tags:
       - dashboard
@@ -10355,9 +10355,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - dashboard:update
       - tokenizer:
-        - ADMIN
+        - dashboard:update
       summary: Create public dashboard
       tags:
       - dashboard
@@ -10399,9 +10399,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - dashboard:update
       - tokenizer:
-        - ADMIN
+        - dashboard:update
       summary: Update public dashboard
       tags:
       - dashboard
@@ -14739,9 +14739,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:list
       - tokenizer:
-        - VIEWER
+        - dashboard:list
       summary: List dashboard saved views
       tags:
       - dashboard
@@ -14796,9 +14796,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:list
       - tokenizer:
-        - EDITOR
+        - dashboard:list
       summary: Create dashboard saved view
       tags:
       - dashboard
@@ -14849,9 +14849,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:list
       - tokenizer:
-        - EDITOR
+        - dashboard:list
       summary: Delete dashboard saved view
       tags:
       - dashboard
@@ -14917,9 +14917,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:list
       - tokenizer:
-        - EDITOR
+        - dashboard:list
       summary: Update dashboard saved view
       tags:
       - dashboard
@@ -14994,9 +14994,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:list
       - tokenizer:
-        - VIEWER
+        - dashboard:list
       summary: List dashboards (v2)
       tags:
       - dashboard
@@ -15051,9 +15051,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:create
       - tokenizer:
-        - EDITOR
+        - dashboard:create
       summary: Create dashboard (v2)
       tags:
       - dashboard
@@ -15104,9 +15104,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:delete
       - tokenizer:
-        - EDITOR
+        - dashboard:delete
       summary: Delete dashboard (v2)
       tags:
       - dashboard
@@ -15167,9 +15167,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:read
       - tokenizer:
-        - VIEWER
+        - dashboard:read
       summary: Get dashboard (v2)
       tags:
       - dashboard
@@ -15241,9 +15241,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:update
       - tokenizer:
-        - EDITOR
+        - dashboard:update
       summary: Patch dashboard (v2)
       tags:
       - dashboard
@@ -15310,9 +15310,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:update
       - tokenizer:
-        - EDITOR
+        - dashboard:update
       summary: Update dashboard (v2)
       tags:
       - dashboard
@@ -15378,9 +15378,11 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:read
+        - dashboard:create
       - tokenizer:
-        - EDITOR
+        - dashboard:read
+        - dashboard:create
       summary: Clone dashboard (v2)
       tags:
       - dashboard
@@ -15431,9 +15433,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:update
       - tokenizer:
-        - EDITOR
+        - dashboard:update
       summary: Unlock dashboard (v2)
       tags:
       - dashboard
@@ -15483,9 +15485,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:update
       - tokenizer:
-        - EDITOR
+        - dashboard:update
       summary: Lock dashboard (v2)
       tags:
       - dashboard
@@ -15549,9 +15551,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - dashboard:update
       - tokenizer:
-        - EDITOR
+        - dashboard:update
       summary: Migrate dashboard to v2
       tags:
       - dashboard
@@ -23695,9 +23697,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:list
       - tokenizer:
-        - VIEWER
+        - dashboard:list
       summary: List dashboards for the current user (v2)
       tags:
       - dashboard
@@ -23742,9 +23744,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:list
       - tokenizer:
-        - VIEWER
+        - dashboard:list
       summary: Unpin a dashboard for the current user (v2)
       tags:
       - dashboard
@@ -23801,9 +23803,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - dashboard:list
       - tokenizer:
-        - VIEWER
+        - dashboard:list
       summary: Pin a dashboard for the current user (v2)
       tags:
       - dashboard

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

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

frontend/public/locales/en/channels.json

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

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

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

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

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

frontend/src/assets/Logos/apache.svg

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

frontend/src/assets/Logos/auth0.svg

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

frontend/src/assets/Logos/baseten.svg

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

frontend/src/assets/Logos/cohere.svg

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

frontend/src/assets/Logos/dbos.svg

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

frontend/src/assets/Logos/dspy.svg

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

frontend/src/assets/Logos/elasticsearch.svg

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

frontend/src/assets/Logos/groq.svg

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

frontend/src/assets/Logos/haproxy.svg

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

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

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

frontend/src/assets/Logos/langflow.svg

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

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

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

frontend/src/assets/Logos/planetscale.svg

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

frontend/src/assets/Logos/rabbitmq.svg

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

frontend/src/assets/Logos/railway.svg

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

frontend/src/assets/Logos/scala.svg

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

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

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

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

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

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

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

frontend/src/container/CreateAlertChannels/config.ts

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

frontend/src/container/CreateAlertChannels/defaults.ts

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

frontend/src/container/CreateAlertChannels/index.tsx

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

frontend/src/container/CreateAlertChannels/utils.ts

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

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

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

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

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

frontend/src/container/EditAlertChannels/index.tsx

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

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

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

frontend/src/container/FormAlertChannels/index.tsx

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

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

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

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

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

frontend/src/container/InfraMonitoringHosts/constants.tsx

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

frontend/src/container/InfraMonitoringHosts/index.tsx

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

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

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

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

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

frontend/src/container/InfraMonitoringHosts/utils.tsx

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

frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx

@@ -140,6 +140,7 @@ function Hosts(): JSX.Element {
 					records: data.records,
 					total: data.total,
 					endTimeBeforeRetention: data.endTimeBeforeRetention,
+					warning: data.warning,
 				};
 			} catch (error) {
 				return {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,132 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-import { K8sBaseFilters } from '../Base/types';
-
-export interface K8sDeploymentsListPayload {
-	filters: TagFilter;
-	groupBy?: BaseAutocompleteData[];
-	offset?: number;
-	limit?: number;
-	orderBy?: {
-		columnName: string;
-		order: 'asc' | 'desc';
-	};
-}
-
-export interface K8sDeploymentsData {
-	deploymentName: string;
-	cpuUsage: number;
-	memoryUsage: number;
-	desiredPods: number;
-	availablePods: number;
-	cpuRequest: number;
-	memoryRequest: number;
-	cpuLimit: number;
-	memoryLimit: number;
-	restarts: number;
-	meta: {
-		k8s_cluster_name: string;
-		k8s_deployment_name: string;
-		k8s_namespace_name: string;
-	};
-}
-
-export interface K8sDeploymentsListResponse {
-	status: string;
-	data: {
-		type: string;
-		records: K8sDeploymentsData[];
-		groups: null;
-		total: number;
-		sentAnyHostMetricsData: boolean;
-		isSendingK8SAgentMetrics: boolean;
-	};
-}
-
-// TODO(H4ad): Erase this whole file when migrating to openapi
-export const deploymentsMetaMap = [
-	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
-	{ dot: 'k8s.deployment.name', under: 'k8s_deployment_name' },
-	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
-] as const;
-
-export function mapDeploymentsMeta(
-	raw: Record<string, unknown>,
-): K8sDeploymentsData['meta'] {
-	const out: Record<string, unknown> = { ...raw };
-	deploymentsMetaMap.forEach(({ dot, under }) => {
-		if (dot in raw) {
-			const v = raw[dot];
-			out[under] = typeof v === 'string' ? v : raw[under];
-		}
-	});
-	return out as K8sDeploymentsData['meta'];
-}
-
-export const getK8sDeploymentsList = async (
-	props: K8sBaseFilters,
-	signal?: AbortSignal,
-	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
-): Promise<SuccessResponse<K8sDeploymentsListResponse> | ErrorResponse> => {
-	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
-									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-				}
-			: props;
-
-		const response = await axios.post('/deployments/list', requestProps, {
-			signal,
-			headers,
-		});
-		const payload: K8sDeploymentsListResponse = response.data;
-
-		payload.data.records = payload.data.records.map((record) => ({
-			...record,
-			meta: mapDeploymentsMeta(record.meta as Record<string, unknown>),
-		}));
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload,
-			params: requestProps,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};

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

@@ -1,608 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
-import { v4 } from 'uuid';
-
-import {
-	createFilterItem,
-	K8sDetailsMetadataConfig,
-} from '../Base/K8sBaseDetails';
-import { QUERY_KEYS } from '../EntityDetailsUtils/utils';
-import { K8sDeploymentsData } from './api';
-
-export const k8sDeploymentGetSelectedItemFilters = (
-	selectedItemId: string,
-): TagFilter => ({
-	op: 'AND',
-	items: [
-		{
-			id: 'k8s_deployment_name',
-			key: {
-				key: 'k8s_deployment_name',
-				type: null,
-			},
-			op: '=',
-			value: selectedItemId,
-		},
-	],
-});
-
-export const k8sDeploymentDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sDeploymentsData>[] =
-	[
-		{
-			label: 'Deployment Name',
-			getValue: (p): string => p.meta.k8s_deployment_name,
-		},
-		{
-			label: 'Cluster Name',
-			getValue: (p): string => p.meta.k8s_cluster_name,
-		},
-		{
-			label: 'Namespace Name',
-			getValue: (p): string => p.meta.k8s_namespace_name,
-		},
-	];
-
-export const k8sDeploymentInitialEventsFilter = (
-	item: K8sDeploymentsData,
-): ReturnType<typeof createFilterItem>[] => [
-	createFilterItem(QUERY_KEYS.K8S_OBJECT_KIND, 'Deployment'),
-	createFilterItem(QUERY_KEYS.K8S_OBJECT_NAME, item.meta.k8s_deployment_name),
-];
-
-export const k8sDeploymentInitialLogTracesFilter = (
-	item: K8sDeploymentsData,
-): ReturnType<typeof createFilterItem>[] => [
-	createFilterItem(
-		QUERY_KEYS.K8S_DEPLOYMENT_NAME,
-		item.meta.k8s_deployment_name,
-	),
-	createFilterItem(QUERY_KEYS.K8S_NAMESPACE_NAME, item.meta.k8s_namespace_name),
-];
-
-export const k8sDeploymentGetEntityName = (item: K8sDeploymentsData): string =>
-	item.meta.k8s_deployment_name;
-
-export const deploymentWidgetInfo = [
-	{
-		title: 'CPU usage, request, limits',
-		yAxisUnit: '',
-	},
-	{
-		title: 'Memory usage, request, limits',
-		yAxisUnit: 'bytes',
-	},
-	{
-		title: 'Network IO',
-		yAxisUnit: 'binBps',
-	},
-	{
-		title: 'Network error count',
-		yAxisUnit: '',
-	},
-];
-
-export const getDeploymentMetricsQueryPayload = (
-	deployment: K8sDeploymentsData,
-	start: number,
-	end: number,
-	dotMetricsEnabled: boolean,
-): GetQueryResultsProps[] => {
-	const k8sPodCpuUtilizationKey = dotMetricsEnabled
-		? 'k8s.pod.cpu.usage'
-		: 'k8s_pod_cpu_usage';
-
-	const k8sContainerCpuRequestKey = dotMetricsEnabled
-		? 'k8s.container.cpu_request'
-		: 'k8s_container_cpu_request';
-
-	const k8sContainerCpuLimitKey = dotMetricsEnabled
-		? 'k8s.container.cpu_limit'
-		: 'k8s_container_cpu_limit';
-
-	const k8sPodMemoryUsageKey = dotMetricsEnabled
-		? 'k8s.pod.memory.usage'
-		: 'k8s_pod_memory_usage';
-
-	const k8sContainerMemoryRequestKey = dotMetricsEnabled
-		? 'k8s.container.memory_request'
-		: 'k8s_container_memory_request';
-
-	const k8sContainerMemoryLimitKey = dotMetricsEnabled
-		? 'k8s.container.memory_limit'
-		: 'k8s_container_memory_limit';
-
-	const k8sPodNetworkIoKey = dotMetricsEnabled
-		? 'k8s.pod.network.io'
-		: 'k8s_pod_network_io';
-
-	const k8sPodNetworkErrorsKey = dotMetricsEnabled
-		? 'k8s.pod.network.errors'
-		: 'k8s_pod_network_errors';
-
-	const k8sDeploymentNameKey = dotMetricsEnabled
-		? 'k8s.deployment.name'
-		: 'k8s_deployment_name';
-
-	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
-
-	return [
-		{
-			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TIME_SERIES,
-			query: {
-				builder: {
-					queryData: [
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
-								key: k8sPodCpuUtilizationKey,
-								type: 'Gauge',
-							},
-							aggregateOperator: 'avg',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'A',
-							filters: {
-								items: [
-									{
-										id: 'aec60cba',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_deployment_name--string--tag--false',
-											key: k8sDeploymentNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: deployment.meta.k8s_deployment_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [],
-							having: [],
-							legend: 'usage',
-							limit: null,
-							orderBy: [],
-							queryName: 'A',
-							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'sum',
-							stepInterval: 60,
-							timeAggregation: 'avg',
-						},
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_container_cpu_request--float64--Gauge--true',
-								key: k8sContainerCpuRequestKey,
-								type: 'Gauge',
-							},
-							aggregateOperator: 'avg',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'B',
-							filters: {
-								items: [
-									{
-										id: 'd047ec14',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_pod_name--string--tag--false',
-											key: k8sPodNameKey,
-											type: 'tag',
-										},
-										op: 'contains',
-										value: deployment.meta.k8s_deployment_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [],
-							having: [],
-							legend: 'requests',
-							limit: null,
-							orderBy: [],
-							queryName: 'B',
-							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'sum',
-							stepInterval: 60,
-							timeAggregation: 'avg',
-						},
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_container_cpu_limit--float64--Gauge--true',
-								key: k8sContainerCpuLimitKey,
-								type: 'Gauge',
-							},
-							aggregateOperator: 'avg',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'C',
-							filters: {
-								items: [
-									{
-										id: '750b7856',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_pod_name--string--tag--false',
-											key: k8sPodNameKey,
-											type: 'tag',
-										},
-										op: 'contains',
-										value: deployment.meta.k8s_deployment_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [],
-							having: [],
-							legend: 'limits',
-							limit: null,
-							orderBy: [],
-							queryName: 'C',
-							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'sum',
-							stepInterval: 60,
-							timeAggregation: 'avg',
-						},
-					],
-					queryFormulas: [],
-					queryTraceOperator: [],
-				},
-				clickhouse_sql: [
-					{
-						disabled: false,
-						legend: '',
-						name: 'A',
-						query: '',
-					},
-				],
-				id: v4(),
-				promql: [
-					{
-						disabled: false,
-						legend: '',
-						name: 'A',
-						query: '',
-					},
-				],
-				queryType: EQueryType.QUERY_BUILDER,
-			},
-			variables: {},
-			formatForWeb: false,
-			start,
-			end,
-		},
-		{
-			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TIME_SERIES,
-			query: {
-				builder: {
-					queryData: [
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_pod_memory_usage--float64--Gauge--true',
-								key: k8sPodMemoryUsageKey,
-								type: 'Gauge',
-							},
-							aggregateOperator: 'avg',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'A',
-							filters: {
-								items: [
-									{
-										id: '768c2f47',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_deployment_name--string--tag--false',
-											key: k8sDeploymentNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: deployment.meta.k8s_deployment_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [],
-							having: [],
-							legend: 'usage',
-							limit: null,
-							orderBy: [],
-							queryName: 'A',
-							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'sum',
-							stepInterval: 60,
-							timeAggregation: 'avg',
-						},
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_container_memory_request--float64--Gauge--true',
-								key: k8sContainerMemoryRequestKey,
-								type: 'Gauge',
-							},
-							aggregateOperator: 'avg',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'B',
-							filters: {
-								items: [
-									{
-										id: '1a96fa81',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_pod_name--string--tag--false',
-											key: k8sPodNameKey,
-											type: 'tag',
-										},
-										op: 'contains',
-										value: deployment.meta.k8s_deployment_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [],
-							having: [],
-							legend: 'requests',
-							limit: null,
-							orderBy: [],
-							queryName: 'B',
-							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'sum',
-							stepInterval: 60,
-							timeAggregation: 'avg',
-						},
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_container_memory_limit--float64--Gauge--true',
-								key: k8sContainerMemoryLimitKey,
-								type: 'Gauge',
-							},
-							aggregateOperator: 'avg',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'C',
-							filters: {
-								items: [
-									{
-										id: 'e69a2b7e',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_pod_name--string--tag--false',
-											key: k8sPodNameKey,
-											type: 'tag',
-										},
-										op: 'contains',
-										value: deployment.meta.k8s_deployment_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [],
-							having: [],
-							legend: 'limits',
-							limit: null,
-							orderBy: [],
-							queryName: 'C',
-							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'sum',
-							stepInterval: 60,
-							timeAggregation: 'avg',
-						},
-					],
-					queryFormulas: [],
-					queryTraceOperator: [],
-				},
-				clickhouse_sql: [
-					{
-						disabled: false,
-						legend: '',
-						name: 'A',
-						query: '',
-					},
-				],
-				id: v4(),
-				promql: [
-					{
-						disabled: false,
-						legend: '',
-						name: 'A',
-						query: '',
-					},
-				],
-				queryType: EQueryType.QUERY_BUILDER,
-			},
-			variables: {},
-			formatForWeb: false,
-			start,
-			end,
-		},
-		{
-			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TIME_SERIES,
-			query: {
-				builder: {
-					queryData: [
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_pod_network_io--float64--Sum--true',
-								key: k8sPodNetworkIoKey,
-								type: 'Sum',
-							},
-							aggregateOperator: 'rate',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'A',
-							filters: {
-								items: [
-									{
-										id: '8b550f6d',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_deployment_name--string--tag--false',
-											key: k8sDeploymentNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: deployment.meta.k8s_deployment_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [
-								{
-									dataType: DataTypes.String,
-									id: 'direction--string--tag--false',
-									key: 'direction',
-									type: 'tag',
-								},
-								{
-									dataType: DataTypes.String,
-									id: 'interface--string--tag--false',
-									key: 'interface',
-									type: 'tag',
-								},
-							],
-							having: [],
-							legend: '{{direction}} :: {{interface}}',
-							limit: null,
-							orderBy: [],
-							queryName: 'A',
-							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'sum',
-							stepInterval: 60,
-							timeAggregation: 'rate',
-						},
-					],
-					queryFormulas: [],
-					queryTraceOperator: [],
-				},
-				clickhouse_sql: [
-					{
-						disabled: false,
-						legend: '',
-						name: 'A',
-						query: '',
-					},
-				],
-				id: v4(),
-				promql: [
-					{
-						disabled: false,
-						legend: '',
-						name: 'A',
-						query: '',
-					},
-				],
-				queryType: EQueryType.QUERY_BUILDER,
-			},
-			variables: {},
-			formatForWeb: false,
-			start,
-			end,
-		},
-		{
-			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TIME_SERIES,
-			query: {
-				builder: {
-					queryData: [
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_pod_network_errors--float64--Sum--true',
-								key: k8sPodNetworkErrorsKey,
-								type: 'Sum',
-							},
-							aggregateOperator: 'increase',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'A',
-							filters: {
-								items: [
-									{
-										id: 'e16c1e4a',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_deployment_name--string--tag--false',
-											key: k8sDeploymentNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: deployment.meta.k8s_deployment_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [
-								{
-									dataType: DataTypes.String,
-									id: 'direction--string--tag--false',
-									key: 'direction',
-									type: 'tag',
-								},
-								{
-									dataType: DataTypes.String,
-									id: 'interface--string--tag--false',
-									key: 'interface',
-									type: 'tag',
-								},
-							],
-							having: [],
-							legend: '{{direction}} :: {{interface}}',
-							limit: null,
-							orderBy: [],
-							queryName: 'A',
-							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'sum',
-							stepInterval: 60,
-							timeAggregation: 'increase',
-						},
-					],
-					queryFormulas: [],
-					queryTraceOperator: [],
-				},
-				clickhouse_sql: [
-					{
-						disabled: false,
-						legend: '',
-						name: 'A',
-						query: '',
-					},
-				],
-				id: v4(),
-				promql: [
-					{
-						disabled: false,
-						legend: '',
-						name: 'A',
-						query: '',
-					},
-				],
-				queryType: EQueryType.QUERY_BUILDER,
-			},
-			variables: {},
-			formatForWeb: false,
-			start,
-			end,
-		},
-	];
-};

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

@@ -1,246 +0,0 @@
-import { Tooltip } from 'antd';
-import { TableColumnDef } from 'components/TanStackTableView';
-import TanStackTable from 'components/TanStackTableView';
-import { ExpandButtonWrapper } from 'container/InfraMonitoringK8s/components';
-
-import EntityGroupHeader from '../Base/EntityGroupHeader';
-import K8sGroupCell from '../Base/K8sGroupCell';
-import { formatBytes } from '../commonUtils';
-import { EntityProgressBar, ValidateColumnValueWrapper } from '../components';
-import { InfraMonitoringEntity } from '../constants';
-import { K8sDeploymentsData } from './api';
-import { Computer } from '@signozhq/icons';
-
-export function getK8sDeploymentRowKey(deployment: K8sDeploymentsData): string {
-	return deployment.meta.k8s_deployment_name || deployment.deploymentName;
-}
-
-export function getK8sDeploymentItemKey(
-	deployment: K8sDeploymentsData,
-): string {
-	return deployment.meta.k8s_deployment_name;
-}
-
-export const k8sDeploymentsColumnsConfig: TableColumnDef<K8sDeploymentsData>[] =
-	[
-		{
-			id: 'deploymentGroup',
-			header: (): React.ReactNode => (
-				<EntityGroupHeader title="DEPLOYMENT GROUP" />
-			),
-			accessorFn: (row): string => row.meta.k8s_deployment_name || '',
-			width: { min: 220 },
-			enableSort: false,
-			enableRemove: false,
-			enableMove: false,
-			pin: 'left',
-			visibilityBehavior: 'hidden-on-collapse',
-			cell: ({ isExpanded, toggleExpanded, row }): JSX.Element | null => {
-				return (
-					<ExpandButtonWrapper
-						isExpanded={isExpanded}
-						toggleExpanded={toggleExpanded}
-					>
-						<K8sGroupCell row={row} />
-					</ExpandButtonWrapper>
-				);
-			},
-		},
-		{
-			id: 'deploymentName',
-			header: (): React.ReactNode => (
-				<EntityGroupHeader
-					title="Deployment Name"
-					icon={<Computer data-hide-expanded="true" size={14} />}
-				/>
-			),
-			accessorFn: (row): string => row.meta.k8s_deployment_name || '',
-			width: { min: 210 },
-			enableSort: false,
-			enableRemove: false,
-			enableMove: false,
-			pin: 'left',
-			visibilityBehavior: 'hidden-on-expand',
-			cell: ({ value }): React.ReactNode => {
-				const deploymentName = value as string;
-				return (
-					<Tooltip title={deploymentName}>
-						<TanStackTable.Text>{deploymentName}</TanStackTable.Text>
-					</Tooltip>
-				);
-			},
-		},
-		{
-			id: 'namespaceName',
-			header: 'Namespace Name',
-			accessorFn: (row): string => row.meta.k8s_namespace_name || '',
-			width: { default: 220 },
-			enableSort: false,
-			enableResize: true,
-			cell: ({ value }): React.ReactNode => (
-				<TanStackTable.Text>{value as string}</TanStackTable.Text>
-			),
-		},
-		{
-			id: 'available_pods',
-			header: 'Available',
-			accessorFn: (row): number => row.availablePods,
-			width: { min: 100 },
-			enableSort: false,
-			enableResize: true,
-			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
-				const availablePods = value as number;
-				return (
-					<ValidateColumnValueWrapper
-						value={availablePods}
-						entity={InfraMonitoringEntity.DEPLOYMENTS}
-						attribute="available pod"
-					>
-						<TanStackTable.Text>{availablePods}</TanStackTable.Text>
-					</ValidateColumnValueWrapper>
-				);
-			},
-		},
-		{
-			id: 'desired_pods',
-			header: 'Desired',
-			accessorFn: (row): number => row.desiredPods,
-			width: { min: 80 },
-			enableSort: false,
-			enableResize: true,
-			defaultVisibility: false,
-			cell: ({ value }): React.ReactNode => {
-				const desiredPods = value as number;
-				return (
-					<ValidateColumnValueWrapper
-						value={desiredPods}
-						entity={InfraMonitoringEntity.DEPLOYMENTS}
-						attribute="desired pod"
-					>
-						<TanStackTable.Text>{desiredPods}</TanStackTable.Text>
-					</ValidateColumnValueWrapper>
-				);
-			},
-		},
-		{
-			id: 'cpu_request',
-			header: 'CPU Req Usage (%)',
-			accessorFn: (row): number => row.cpuRequest,
-			width: { min: 210 },
-			enableSort: true,
-			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
-				const cpuRequest = value as number;
-				return (
-					<ValidateColumnValueWrapper
-						value={cpuRequest}
-						entity={InfraMonitoringEntity.DEPLOYMENTS}
-						attribute="CPU Request"
-					>
-						<EntityProgressBar value={cpuRequest} type="request" />
-					</ValidateColumnValueWrapper>
-				);
-			},
-		},
-		{
-			id: 'cpu_limit',
-			header: 'CPU Limit Usage (%)',
-			accessorFn: (row): number => row.cpuLimit,
-			width: { min: 210 },
-			enableSort: true,
-			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
-				const cpuLimit = value as number;
-				return (
-					<ValidateColumnValueWrapper
-						value={cpuLimit}
-						entity={InfraMonitoringEntity.DEPLOYMENTS}
-						attribute="CPU Limit"
-					>
-						<EntityProgressBar value={cpuLimit} type="limit" />
-					</ValidateColumnValueWrapper>
-				);
-			},
-		},
-		{
-			id: 'cpu',
-			header: 'CPU Usage (cores)',
-			accessorFn: (row): number => row.cpuUsage,
-			width: { min: 210 },
-			enableSort: true,
-			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
-				const cpu = value as number;
-				return (
-					<ValidateColumnValueWrapper
-						value={cpu}
-						entity={InfraMonitoringEntity.DEPLOYMENTS}
-						attribute="CPU metric"
-					>
-						<TanStackTable.Text>{cpu}</TanStackTable.Text>
-					</ValidateColumnValueWrapper>
-				);
-			},
-		},
-		{
-			id: 'memory_request',
-			header: 'Mem Req Usage (%)',
-			accessorFn: (row): number => row.memoryRequest,
-			width: { min: 210 },
-			enableSort: true,
-			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
-				const memoryRequest = value as number;
-				return (
-					<ValidateColumnValueWrapper
-						value={memoryRequest}
-						entity={InfraMonitoringEntity.DEPLOYMENTS}
-						attribute="Memory Request"
-					>
-						<EntityProgressBar value={memoryRequest} type="request" />
-					</ValidateColumnValueWrapper>
-				);
-			},
-		},
-		{
-			id: 'memory_limit',
-			header: 'Mem Limit Usage (%)',
-			accessorFn: (row): number => row.memoryLimit,
-			width: { min: 210 },
-			enableSort: true,
-			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
-				const memoryLimit = value as number;
-				return (
-					<ValidateColumnValueWrapper
-						value={memoryLimit}
-						entity={InfraMonitoringEntity.DEPLOYMENTS}
-						attribute="Memory Limit"
-					>
-						<EntityProgressBar value={memoryLimit} type="limit" />
-					</ValidateColumnValueWrapper>
-				);
-			},
-		},
-		{
-			id: 'memory',
-			header: 'Mem Usage (WSS)',
-			accessorFn: (row): number => row.memoryUsage,
-			width: { min: 140 },
-			enableSort: true,
-			enableResize: true,
-			cell: ({ value }): React.ReactNode => {
-				const memory = value as number;
-				return (
-					<ValidateColumnValueWrapper
-						value={memory}
-						entity={InfraMonitoringEntity.DEPLOYMENTS}
-						attribute="memory metric"
-					>
-						<TanStackTable.Text>{formatBytes(memory)}</TanStackTable.Text>
-					</ValidateColumnValueWrapper>
-				);
-			},
-		},
-	];

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEmptyState/EntityEmptyState.module.scss

@@ -1,32 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	height: 240px;
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	color: var(--muted-foreground);
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 18px;
-	letter-spacing: -0.07px;
-}
-
-.icon {
-	height: 32px;
-	width: 32px;
-}
-
-.title {
-	font-weight: 600;
-}
-
-.subtitle {
-	font-weight: 400;
-	color: var(--muted-foreground);
-}

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

@@ -1,32 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
-import styles from './EntityEmptyState.module.scss';
-
-interface EntityEmptyStateProps {
-	hasFilters: boolean;
-}
-
-export default function EntityEmptyState({
-	hasFilters,
-}: EntityEmptyStateProps): JSX.Element {
-	return (
-		<div className={styles.container}>
-			<div className={styles.content}>
-				<img src={emptyStateUrl} alt="empty-state" className={styles.icon} />
-				{hasFilters ? (
-					<Typography.Text>
-						<span className={styles.title}>This query had no results. </span>
-						Edit your query and try again!
-					</Typography.Text>
-				) : (
-					<Typography.Text>
-						<span className={styles.title}>No data yet. </span>
-						When we receive data, it will show up here.
-					</Typography.Text>
-				)}
-			</div>
-		</div>
-	);
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityError/EntityError.module.scss

@@ -1,40 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	height: 240px;
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	color: var(--muted-foreground);
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 18px;
-	letter-spacing: -0.07px;
-}
-
-.icon {
-	height: 32px;
-	width: 32px;
-}
-
-.title {
-	font-weight: 600;
-}
-
-.contactSupport {
-	display: flex;
-	align-items: center;
-	margin-top: 8px;
-	gap: 4px;
-	cursor: pointer;
-}
-
-.contactSupportText {
-	color: var(--text-robin-400);
-	font-weight: 500;
-}

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

@@ -1,50 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import history from 'lib/history';
-import { ArrowRight } from '@signozhq/icons';
-import { openInNewTab } from 'utils/navigation';
-
-import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
-
-import styles from './EntityError.module.scss';
-
-export default function EntityError(): JSX.Element {
-	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-
-	const handleContactSupport = (): void => {
-		if (isCloudUserVal) {
-			history.push('/support');
-		} else {
-			openInNewTab('https://signoz.io/slack');
-		}
-	};
-
-	return (
-		<div className={styles.container}>
-			<div className={styles.content}>
-				<img src={awwSnapUrl} alt="error" className={styles.icon} />
-				<Typography.Text>
-					<span className={styles.title}>Aw snap :/ </span>
-					Something went wrong. Please try again or contact support.
-				</Typography.Text>
-
-				<div
-					className={styles.contactSupport}
-					onClick={handleContactSupport}
-					role="button"
-					tabIndex={0}
-					onKeyDown={(e): void => {
-						if (e.key === 'Enter') {
-							handleContactSupport();
-						}
-					}}
-				>
-					<Typography.Link className={styles.contactSupportText}>
-						Contact Support
-					</Typography.Link>
-					<ArrowRight size={14} />
-				</div>
-			</div>
-		</div>
-	);
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.module.scss

@@ -1,101 +0,0 @@
-.container {
-	margin-top: 1rem;
-}
-
-.filterContainer {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: var(--spacing-6);
-	border-radius: var(--radius);
-	border: 1px solid var(--l1-border);
-
-	:global(.ant-select-selector) {
-		border-radius: 2px;
-		border: 1px solid var(--l1-border) !important;
-		background-color: var(--l3-background) !important;
-
-		input {
-			font-size: 12px;
-		}
-
-		:global([data-slot='badge'] .ant-typography) {
-			font-size: 12px;
-		}
-	}
-}
-
-.filterContainerTime {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	gap: 8px;
-}
-
-.filterQuerySearch {
-	flex: 1;
-}
-
-.controls {
-	width: 100%;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.eventsTable {
-	margin-top: var(--spacing-8);
-
-	:global(.ant-table) {
-		:global(.ant-table-thead) > tr > th {
-			padding: 12px;
-			font-weight: 500;
-			font-size: 11px;
-			line-height: 18px;
-			background: var(--card);
-			border-bottom: none;
-			color: var(--l2-foreground);
-			font-family: Inter;
-			font-style: normal;
-			font-weight: 600;
-			letter-spacing: 0.44px;
-			text-transform: uppercase;
-
-			&::before {
-				background-color: transparent;
-			}
-		}
-
-		:global(.ant-table-cell) {
-			padding: 12px;
-			font-size: 13px;
-			line-height: 20px;
-			color: var(--l1-foreground);
-			background: var(--card);
-			border-bottom: none;
-		}
-
-		:global(.ant-table-tbody) > tr:hover > td {
-			background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
-		}
-
-		:global(.ant-table-tbody) > tr > td {
-			border-bottom: none;
-		}
-
-		:global(.ant-table-thead)
-			> tr
-			> th:not(:last-child):not(:global(.ant-table-selection-column)):not(
-				:global(.ant-table-row-expand-icon-cell)
-			):not([colspan])::before {
-			background-color: transparent;
-		}
-
-		:global(.ant-empty-normal) {
-			visibility: hidden;
-		}
-	}
-}
-
-.expandIcon {
-	cursor: pointer;
-}

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

@@ -1,334 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { Table, TableColumnsType } from 'antd';
-import logEvent from 'api/common/logEvent';
-import {
-	QuerySearchV2Provider,
-	useExpression,
-	useInitialExpression,
-	useInputExpression,
-	useQuerySearchInitialExpressionProp,
-	useQuerySearchOnChange,
-	useQuerySearchOnRun,
-	useUserExpression,
-} from 'components/QueryBuilderV2';
-import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import {
-	combineInitialAndUserExpression,
-	getUserExpressionFromCombined,
-} from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import { InfraMonitoringEvents } from 'constants/events';
-import Controls from 'container/Controls';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import LoadingContainer from 'container/InfraMonitoringK8s/LoadingContainer';
-import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import { useQueryState } from 'nuqs';
-import { DataSource } from 'types/common/queryBuilder';
-import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
-import { validateQuery } from 'utils/queryValidationUtils';
-
-import EntityEmptyState from '../EntityEmptyState/EntityEmptyState';
-import EntityError from '../EntityError/EntityError';
-import { EventContents } from './EventsContent';
-import EventsNotConfigured from './EventsNotConfigured';
-import { K8S_ENTITY_EVENTS_EXPRESSION_KEY, useEntityEvents } from './hooks';
-import { getEntityEventsQueryPayload, isEventsKeyNotFoundError } from './utils';
-
-import styles from './EntityEvents.module.scss';
-import { useTimezone } from 'providers/Timezone';
-
-interface EventDataType {
-	key: string;
-	timestamp: string;
-	body: string;
-	id: string;
-	severity: string;
-	attributes_string?: Record<string, string>;
-	resources_string?: Record<string, string>;
-}
-
-interface Props {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	isModalTimeSelection: boolean;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	selectedInterval: Time;
-	queryKey: string;
-	category: InfraMonitoringEntity;
-	initialExpression: string;
-}
-
-const PAGE_SIZE_OPTIONS = [10, 20, 50];
-
-const handleExpandRow = (record: EventDataType): JSX.Element => (
-	<EventContents
-		data={{ ...record.attributes_string, ...record.resources_string }}
-	/>
-);
-
-function EntityEventsContent({
-	timeRange,
-	isModalTimeSelection,
-	handleTimeChange,
-	selectedInterval,
-	queryKey,
-	category,
-}: Omit<Props, 'initialExpression'>): JSX.Element {
-	const expression = useExpression();
-	const inputExpression = useInputExpression();
-	const userExpression = useUserExpression();
-	const initialExpression = useInitialExpression();
-	const querySearchOnChange = useQuerySearchOnChange();
-	const querySearchOnRun = useQuerySearchOnRun();
-	const querySearchInitialExpressionProp = useQuerySearchInitialExpressionProp();
-
-	const [pagination, setPagination] = useQueryState(
-		'eventsPagination',
-		parseAsJsonNoValidate<{ offset: number; limit: number }>(),
-	);
-
-	const pageSize = pagination?.limit || PAGE_SIZE_OPTIONS[0];
-	const offset = pagination?.offset || 0;
-
-	const {
-		events,
-		isLoading,
-		isFetching,
-		isError,
-		error,
-		currentCount,
-		hasMore,
-		refetch,
-		cancel,
-	} = useEntityEvents({
-		queryKey,
-		timeRange,
-		expression,
-		offset,
-		pageSize,
-	});
-
-	const handleRunQuery = useCallback(
-		(updatedExpression?: string): void => {
-			const newUserExpression = updatedExpression
-				? getUserExpressionFromCombined(initialExpression, updatedExpression)
-				: inputExpression;
-			const validation = validateQuery(
-				initialExpression
-					? combineInitialAndUserExpression(initialExpression, newUserExpression)
-					: newUserExpression || '',
-			);
-			if (validation.isValid) {
-				querySearchOnRun(newUserExpression || '');
-
-				logEvent(InfraMonitoringEvents.FilterApplied, {
-					entity: InfraMonitoringEvents.K8sEntity,
-					page: InfraMonitoringEvents.DetailedPage,
-					category,
-					view: InfraMonitoringEvents.EventsView,
-				});
-
-				refetch();
-			}
-		},
-		[inputExpression, initialExpression, refetch, querySearchOnRun, category],
-	);
-
-	const queryData = useMemo(
-		() =>
-			getEntityEventsQueryPayload({
-				start: timeRange.startTime,
-				end: timeRange.endTime,
-				expression: userExpression || '',
-			}).queryData,
-		[timeRange.startTime, timeRange.endTime, userExpression],
-	);
-
-	const formattedEvents = useMemo<EventDataType[]>(
-		() =>
-			events.map((event) => ({
-				key: event.data.id,
-				id: event.data.id,
-				timestamp: event.timestamp,
-				body: event.data.body,
-				severity: event.data.severity_text,
-				attributes_string: event.data.attributes_string,
-				resources_string: event.data.resources_string,
-			})),
-		[events],
-	);
-
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const columns: TableColumnsType<EventDataType> = useMemo(
-		() => [
-			{ title: 'Severity', dataIndex: 'severity', key: 'severity', width: 100 },
-			{
-				title: 'Timestamp',
-				dataIndex: 'timestamp',
-				width: 240,
-				ellipsis: true,
-				key: 'timestamp',
-				render: (value: string | number): string =>
-					formatTimezoneAdjustedTimestamp(
-						typeof value === 'string' ? value : value / 1e6,
-					),
-			},
-			{ title: 'Body', dataIndex: 'body', key: 'body' },
-		],
-		[formatTimezoneAdjustedTimestamp],
-	);
-
-	const handleExpandRowIcon = ({
-		expanded,
-		onExpand,
-		record,
-	}: {
-		expanded: boolean;
-		onExpand: (
-			record: EventDataType,
-			e: React.MouseEvent<HTMLElement, MouseEvent>,
-		) => void;
-		record: EventDataType;
-	}): JSX.Element => {
-		const handleClick = (e: React.MouseEvent<SVGSVGElement>): void => {
-			onExpand(record, e as unknown as React.MouseEvent<HTMLElement, MouseEvent>);
-		};
-
-		return expanded ? (
-			<ChevronDown className={styles.expandIcon} size={14} onClick={handleClick} />
-		) : (
-			<ChevronRight
-				className={styles.expandIcon}
-				size={14}
-				onClick={handleClick}
-			/>
-		);
-	};
-
-	useEffect(() => {
-		return (): void => {
-			void setPagination(null);
-		};
-	}, [setPagination]);
-
-	const isDataEmpty =
-		!isLoading && !isFetching && !isError && formattedEvents.length === 0;
-	const hasAdditionalFilters = !!userExpression?.trim();
-
-	return (
-		<div className={styles.container}>
-			<div className={styles.filterContainer}>
-				<div className={styles.filterContainerTime}>
-					<DateTimeSelectionV2
-						showAutoRefresh
-						showRefreshText={false}
-						hideShareModal
-						isModalTimeSelection={isModalTimeSelection}
-						onTimeChange={handleTimeChange}
-						defaultRelativeTime="5m"
-						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
-					/>
-
-					<RunQueryBtn
-						isLoadingQueries={isFetching}
-						onStageRunQuery={(): void => handleRunQuery()}
-						handleCancelQuery={cancel}
-					/>
-				</div>
-
-				<div className={styles.filterQuerySearch}>
-					<QuerySearch
-						onChange={querySearchOnChange}
-						queryData={queryData}
-						dataSource={DataSource.LOGS}
-						onRun={handleRunQuery}
-						initialExpression={querySearchInitialExpressionProp}
-					/>
-				</div>
-			</div>
-
-			{isLoading && formattedEvents.length === 0 && <LoadingContainer />}
-
-			{isDataEmpty && <EntityEmptyState hasFilters={hasAdditionalFilters} />}
-
-			{isError && !isLoading && isEventsKeyNotFoundError(error) && (
-				<EventsNotConfigured />
-			)}
-
-			{isError && !isLoading && !isEventsKeyNotFoundError(error) && (
-				<EntityError />
-			)}
-
-			{!isLoading && !isError && formattedEvents.length > 0 && (
-				<div className={styles.eventsTable}>
-					<div className={styles.controls}>
-						<Controls
-							totalCount={hasMore ? currentCount + 1 : currentCount}
-							countPerPage={pageSize}
-							offset={offset}
-							perPageOptions={PAGE_SIZE_OPTIONS}
-							isLoading={isFetching}
-							handleNavigatePrevious={(): void => {
-								void setPagination({
-									offset: Math.max(0, offset - pageSize),
-									limit: pageSize,
-								});
-							}}
-							handleNavigateNext={(): void => {
-								void setPagination({
-									offset: offset + pageSize,
-									limit: pageSize,
-								});
-							}}
-							handleCountItemsPerPageChange={(value): void => {
-								void setPagination({
-									offset: 0,
-									limit: value,
-								});
-							}}
-						/>
-					</div>
-
-					<Table<EventDataType>
-						loading={isFetching && formattedEvents.length === 0}
-						columns={columns}
-						expandable={{
-							expandedRowRender: handleExpandRow,
-							rowExpandable: (record): boolean => record.body !== 'Not Expandable',
-							expandIcon: handleExpandRowIcon,
-						}}
-						dataSource={formattedEvents}
-						pagination={false}
-						rowKey={(record): string => record.id}
-					/>
-				</div>
-			)}
-		</div>
-	);
-}
-
-function EntityEvents({ initialExpression, ...rest }: Props): JSX.Element {
-	return (
-		<QuerySearchV2Provider
-			queryParamKey={K8S_ENTITY_EVENTS_EXPRESSION_KEY}
-			initialExpression={initialExpression}
-			persistOnUnmount
-		>
-			<EntityEventsContent {...rest} />
-		</QuerySearchV2Provider>
-	);
-}
-
-export default EntityEvents;

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EventsContent.module.scss

@@ -1,74 +0,0 @@
-.eventContentContainer {
-	padding: var(--spacing-6);
-
-	:global(.ant-table) {
-		background: var(--l1-background);
-
-		:global(.ant-table-row:hover) {
-			:global(.ant-table-cell .value-field .action-btn) {
-				display: flex;
-				position: absolute;
-				top: 50%;
-				right: 16px;
-				transform: translateY(-50%);
-				gap: 4px;
-			}
-		}
-
-		:global(.ant-table-cell) {
-			border: 1px solid var(--l2-border) !important;
-		}
-
-		:global(.attribute-name .ant-btn:hover) {
-			background-color: transparent !important;
-		}
-
-		:global(.attribute-pin .log-attribute-pin) {
-			padding: 8px;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-
-		:global(.attribute-pin .pin-attribute-icon) {
-			border: none;
-		}
-
-		:global(.attribute-pin .pin-attribute-icon.pinned svg) {
-			fill: var(--bg-robin-500);
-		}
-
-		:global(.value-field-container) {
-			background: var(--l3-background);
-		}
-
-		:global(.attribute-pin.value-field-container) {
-			background: var(--l1-background);
-		}
-
-		:global(.value-field-container .value-field) {
-			font-family: 'Geist Mono';
-			position: relative;
-		}
-
-		:global(.value-field-container .action-btn) {
-			display: none;
-			width: max-content;
-			position: absolute;
-			right: 0;
-		}
-
-		:global(.value-field-container .action-btn .filter-btn) {
-			display: flex;
-			align-items: center;
-			border: none;
-			box-shadow: none;
-			border-radius: 2px;
-			background: var(--l3-background);
-			padding: 2px 3px;
-			gap: 3px;
-			height: 18px;
-			width: 20px;
-		}
-	}
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EventsContent.tsx

@@ -1,52 +0,0 @@
-import { useMemo } from 'react';
-import type { ColumnsType } from 'antd/lib/table';
-import { ResizeTable } from 'components/ResizeTable';
-import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
-import { DataType } from 'container/LogDetailedView/TableView';
-
-import styles from './EventsContent.module.scss';
-
-export function EventContents({
-	data,
-}: {
-	data: Record<string, string> | undefined;
-}): JSX.Element {
-	const tableData = useMemo(
-		() =>
-			data ? Object.keys(data).map((key) => ({ key, value: data[key] })) : [],
-		[data],
-	);
-
-	const columns: ColumnsType<DataType> = [
-		{
-			title: 'Key',
-			dataIndex: 'key',
-			key: 'key',
-			width: 50,
-			align: 'left',
-			className: 'attribute-pin value-field-container',
-			render: (field: string): JSX.Element => <FieldRenderer field={field} />,
-		},
-		{
-			title: 'Value',
-			dataIndex: 'value',
-			key: 'value',
-			width: 50,
-			align: 'left',
-			ellipsis: true,
-			className: 'attribute-name',
-			render: (field: string): JSX.Element => <FieldRenderer field={field} />,
-		},
-	];
-
-	return (
-		<ResizeTable
-			columns={columns}
-			tableLayout="fixed"
-			dataSource={tableData}
-			pagination={false}
-			showHeader={false}
-			className={styles.eventContentContainer}
-		/>
-	);
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EventsNotConfigured.module.scss

@@ -1,40 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	height: 240px;
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	color: var(--muted-foreground);
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 18px;
-	letter-spacing: -0.07px;
-}
-
-.icon {
-	height: 32px;
-	width: 32px;
-}
-
-.title {
-	font-weight: 600;
-}
-
-.learnMore {
-	display: flex;
-	align-items: center;
-	margin-top: 8px;
-	gap: 4px;
-	cursor: pointer;
-}
-
-.learnMoreText {
-	color: var(--text-robin-400);
-	font-weight: 500;
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EventsNotConfigured.tsx

@@ -1,46 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { ArrowRight } from '@signozhq/icons';
-import { openInNewTab } from 'utils/navigation';
-
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
-import styles from './EventsNotConfigured.module.scss';
-
-const K8S_EVENTS_DOCS_URL =
-	'https://signoz.io/docs/infrastructure-monitoring/k8s-metrics/';
-
-export default function EventsNotConfigured(): JSX.Element {
-	const handleLearnMore = (): void => {
-		openInNewTab(K8S_EVENTS_DOCS_URL);
-	};
-
-	return (
-		<div className={styles.container}>
-			<div className={styles.content}>
-				<img src={emptyStateUrl} alt="not-configured" className={styles.icon} />
-				<Typography.Text>
-					<span className={styles.title}>No Kubernetes events received yet. </span>
-					To view events, enable the k8s events receiver in your OpenTelemetry
-					Collector.
-				</Typography.Text>
-
-				<div
-					className={styles.learnMore}
-					onClick={handleLearnMore}
-					role="button"
-					tabIndex={0}
-					onKeyDown={(e): void => {
-						if (e.key === 'Enter') {
-							handleLearnMore();
-						}
-					}}
-				>
-					<Typography.Link className={styles.learnMoreText}>
-						Learn how to configure
-					</Typography.Link>
-					<ArrowRight size={14} />
-				</div>
-			</div>
-		</div>
-	);
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/__tests__/EntityEvents.test.tsx

@@ -1,100 +0,0 @@
-import { mockQueryRangeV5WithEventsResponse } from '__tests__/query_range_v5.util';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { act, render, screen, waitFor } from 'tests/test-utils';
-import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
-
-import EntityEvents from '../EntityEvents';
-import { K8S_ENTITY_EVENTS_EXPRESSION_KEY } from '../hooks';
-
-function verifyEntityEventsV5Request({
-	payload,
-	expectedOffset,
-	initialTimeRange,
-}: {
-	payload: QueryRangePayloadV5;
-	expectedOffset: number;
-	initialTimeRange?: { start: number; end: number };
-}): void {
-	const spec = payload.compositeQuery.queries[0]?.spec as {
-		offset?: number;
-		order?: Array<{ key: { name: string }; direction: string }>;
-	};
-	expect(spec.offset).toBe(expectedOffset);
-	if (initialTimeRange) {
-		expect(payload.start).toBe(initialTimeRange.start);
-		expect(payload.end).toBe(initialTimeRange.end);
-	}
-	const orderKeys = spec.order?.map((o) => o.key.name) ?? [];
-	expect(orderKeys).toContain('timestamp');
-}
-
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
-	__esModule: true,
-	default: ({
-		onTimeChange,
-	}: {
-		onTimeChange?: (interval: string, dateTimeRange?: [number, number]) => void;
-	}): JSX.Element => (
-		<button
-			type="button"
-			data-testid="mock-datetime-selection"
-			onClick={(): void => {
-				onTimeChange?.('5m');
-			}}
-		>
-			Select Time
-		</button>
-	),
-}));
-
-describe('EntityEvents', () => {
-	let capturedQueryRangePayloads: QueryRangePayloadV5[] = [];
-
-	beforeEach(() => {
-		capturedQueryRangePayloads = [];
-		mockQueryRangeV5WithEventsResponse({
-			onReceiveRequest: async (req) => {
-				const body = (await req.json()) as QueryRangePayloadV5;
-				capturedQueryRangePayloads.push(body);
-				return {};
-			},
-		});
-	});
-
-	it('should use V5 API for fetching events', async () => {
-		act(() => {
-			render(
-				<NuqsTestingAdapter
-					searchParams={`${K8S_ENTITY_EVENTS_EXPRESSION_KEY}=k8s.pod.name+%3D+%22x%22`}
-				>
-					<EntityEvents
-						timeRange={{ startTime: 1, endTime: 2 }}
-						isModalTimeSelection={false}
-						handleTimeChange={jest.fn()}
-						selectedInterval="5m"
-						queryKey="test"
-						category={InfraMonitoringEntity.PODS}
-						initialExpression='k8s.pod.name = "x"'
-					/>
-				</NuqsTestingAdapter>,
-			);
-		});
-
-		await waitFor(() => {
-			expect(
-				screen.queryByText('pending_data_placeholder'),
-			).not.toBeInTheDocument();
-		});
-
-		await waitFor(() => {
-			expect(capturedQueryRangePayloads).toHaveLength(1);
-		});
-
-		const firstPayload = capturedQueryRangePayloads[0];
-		verifyEntityEventsV5Request({
-			payload: firstPayload,
-			expectedOffset: 0,
-		});
-	});
-});

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/hooks.ts

@@ -1,122 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { useQuery, useQueryClient } from 'react-query';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-
-import { getEntityEventsQueryPayload } from './utils';
-
-export const K8S_ENTITY_EVENTS_EXPRESSION_KEY = 'k8sEntityEventsExpression';
-
-export interface EventRowData {
-	id: string;
-	body: string;
-	severity_text: string;
-	attributes_string?: Record<string, string>;
-	resources_string?: Record<string, string>;
-}
-
-export interface EventRow {
-	timestamp: string;
-	data: EventRowData;
-}
-
-export function useEntityEvents({
-	queryKey,
-	timeRange,
-	expression,
-	offset = 0,
-	pageSize = 10,
-}: {
-	queryKey: string;
-	timeRange: { startTime: number; endTime: number };
-	expression: string;
-	offset?: number;
-	pageSize?: number;
-}): {
-	events: EventRow[];
-	isLoading: boolean;
-	isFetching: boolean;
-	isError: boolean;
-	error?: unknown;
-	currentCount: number;
-	hasMore: boolean;
-	refetch: () => void;
-	cancel: () => void;
-	reactQueryKey: unknown[];
-} {
-	const reactQueryKey = useMemo(
-		() => [
-			// TODO: remove AUTO_REFRESH_QUERY when migrating to date time selection v3
-			REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-			queryKey,
-			timeRange.startTime,
-			timeRange.endTime,
-			expression,
-			offset,
-			pageSize,
-		],
-		[
-			queryKey,
-			timeRange.startTime,
-			timeRange.endTime,
-			expression,
-			offset,
-			pageSize,
-		],
-	);
-
-	const { data, isLoading, isFetching, isError, error, refetch } = useQuery({
-		queryKey: reactQueryKey,
-		queryFn: async ({ signal }) => {
-			const { query } = getEntityEventsQueryPayload({
-				start: timeRange.startTime,
-				end: timeRange.endTime,
-				expression,
-				offset,
-				pageSize,
-			});
-			return GetMetricQueryRange(query, ENTITY_VERSION_V5, undefined, signal);
-		},
-		enabled: !!expression?.trim(),
-	});
-
-	const result = data?.payload?.data?.newResult?.data?.result?.[0];
-
-	const events = useMemo<EventRow[]>(() => {
-		const list = result?.list;
-		if (!list) {
-			return [];
-		}
-
-		return list.map((item) => ({
-			data: item.data as EventRowData,
-			timestamp: item.timestamp,
-		}));
-	}, [result?.list]);
-
-	const currentCount = result?.list?.length || 0;
-
-	const hasMore = !!result?.nextCursor || currentCount >= pageSize;
-
-	const queryClient = useQueryClient();
-
-	const cancel = useCallback(() => {
-		void queryClient.cancelQueries({
-			queryKey: reactQueryKey,
-		});
-	}, [queryClient, reactQueryKey]);
-
-	return {
-		events,
-		isLoading,
-		isFetching,
-		isError,
-		error,
-		currentCount,
-		hasMore,
-		refetch,
-		cancel,
-		reactQueryKey,
-	};
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/index.ts

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

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/utils.ts

@@ -1,130 +0,0 @@
-import {
-	initialQueryBuilderFormValuesMap,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-import {
-	DataSource,
-	LogsAggregatorOperator,
-	ReduceOperators,
-} from 'types/common/queryBuilder';
-import APIError from 'types/api/error';
-import { v4 as uuidv4 } from 'uuid';
-
-const K8S_EVENT_KEYS = ['k8s.object.kind', 'k8s.object.name'];
-
-export function isEventsKeyNotFoundError(error: unknown): boolean {
-	if (!(error instanceof APIError)) {
-		return false;
-	}
-
-	const errorDetails = error.getErrorDetails();
-	if (errorDetails.error.code !== 'invalid_input') {
-		return false;
-	}
-
-	const errors = errorDetails.error.errors || [];
-	return errors.some((err) =>
-		K8S_EVENT_KEYS.some((key) =>
-			err.message?.includes(`key \`${key}\` not found`),
-		),
-	);
-}
-
-export interface EntityEventsQueryParams {
-	start: number;
-	end: number;
-	expression: string;
-	offset?: number;
-	pageSize?: number;
-}
-
-function buildEntityEventsQueryData(
-	expression: string,
-	{
-		offset,
-		pageSize,
-	}: {
-		offset: number;
-		pageSize: number;
-	},
-): IBuilderQuery {
-	return {
-		...initialQueryBuilderFormValuesMap.logs,
-		queryName: 'A',
-		dataSource: DataSource.LOGS,
-		aggregateOperator: LogsAggregatorOperator.NOOP,
-		aggregateAttribute: {
-			id: '------false',
-			dataType: DataTypes.String,
-			key: '',
-			type: '',
-		},
-		timeAggregation: 'rate',
-		spaceAggregation: 'sum',
-		functions: [],
-		aggregations: [],
-		filter: { expression },
-		expression,
-		having: {
-			expression: '',
-		},
-		disabled: false,
-		stepInterval: 60,
-		limit: null,
-		orderBy: [
-			{
-				columnName: 'timestamp',
-				order: 'desc',
-			},
-			{
-				columnName: 'id',
-				order: 'desc',
-			},
-		],
-		groupBy: [],
-		legend: '',
-		reduceTo: ReduceOperators.AVG,
-		offset,
-		pageSize,
-	};
-}
-
-const DEFAULT_PAGE_SIZE = 10;
-
-export function getEntityEventsQueryPayload({
-	start,
-	end,
-	expression,
-	offset = 0,
-	pageSize = DEFAULT_PAGE_SIZE,
-}: EntityEventsQueryParams): {
-	query: GetQueryResultsProps;
-	queryData: IBuilderQuery;
-} {
-	const queryData = buildEntityEventsQueryData(expression, { offset, pageSize });
-
-	return {
-		query: {
-			graphType: PANEL_TYPES.LIST,
-			selectedTime: 'GLOBAL_TIME',
-			query: {
-				clickhouse_sql: [],
-				promql: [],
-				builder: {
-					queryData: [queryData],
-					queryFormulas: [],
-					queryTraceOperator: [],
-				},
-				id: uuidv4(),
-				queryType: EQueryType.QUERY_BUILDER,
-			},
-			start,
-			end,
-		},
-		queryData,
-	};
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogs.module.scss

@@ -1,109 +0,0 @@
-.container {
-	margin-top: 1rem;
-}
-
-.filterContainer {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: var(--spacing-6);
-	border-radius: var(--radius);
-	border: 1px solid var(--l1-border);
-
-	:global(.ant-select-selector) {
-		border-radius: 2px;
-		border: 1px solid var(--l1-border) !important;
-		background-color: var(--l3-background) !important;
-
-		input {
-			font-size: 12px;
-		}
-
-		:global([data-slot='badge'] .ant-typography) {
-			font-size: 12px;
-		}
-	}
-}
-
-.filterContainerTime {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	gap: 8px;
-}
-
-.filterQuerySearch {
-	flex: 1;
-}
-
-.logs {
-	border: 1px solid var(--border);
-	margin-top: 1rem;
-
-	:global(.virtuoso-list) {
-		overflow-y: hidden !important;
-
-		&::-webkit-scrollbar {
-			width: 0.3rem;
-			height: 0.3rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--primary);
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background: var(--primary);
-		}
-
-		:global(.ant-row) {
-			width: fit-content;
-		}
-	}
-
-	.skeletonContainer {
-		height: 100%;
-		padding: 16px;
-	}
-}
-
-.listContainer {
-	flex: 1;
-	height: calc(100vh - 312px) !important;
-	display: flex;
-	height: 100%;
-
-	:global(.raw-log-content) {
-		width: 100%;
-		text-wrap: inherit;
-		word-wrap: break-word;
-	}
-}
-
-.listCard {
-	width: 100%;
-	margin-top: 12px;
-
-	:global(.ant-card-body) {
-		padding: 0;
-		height: 100%;
-		width: 100%;
-	}
-}
-
-.logsLoadingSkeleton {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	padding: 8px 0;
-
-	:global(.ant-skeleton-input-sm) {
-		height: 18px;
-	}
-}

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

@@ -1,357 +0,0 @@
-import React, { useCallback, useMemo, useRef } from 'react';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
-import { Card } from 'antd';
-import logEvent from 'api/common/logEvent';
-import LogDetail from 'components/LogDetail';
-import RawLogView from 'components/Logs/RawLogView';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import {
-	QuerySearchV2Provider,
-	useExpression,
-	useInitialExpression,
-	useInputExpression,
-	useQuerySearchInitialExpressionProp,
-	useQuerySearchOnChange,
-	useQuerySearchOnRun,
-	useUserExpression,
-} from 'components/QueryBuilderV2';
-import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import {
-	combineInitialAndUserExpression,
-	getUserExpressionFromCombined,
-} from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
-import { InfraMonitoringEvents } from 'constants/events';
-import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import { LogsLoading } from 'container/LogsLoading/LogsLoading';
-import { FontSize } from 'container/OptionsMenu/types';
-import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
-import useScrollToLog from 'hooks/logs/useScrollToLog';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import createQueryParams from 'lib/createQueryParams';
-import { generateFilterQuery } from 'lib/logs/generateFilterQuery';
-import { ILog } from 'types/api/logs/log';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { isModifierKeyPressed } from 'utils/app';
-import { validateQuery } from 'utils/queryValidationUtils';
-
-import EntityEmptyState from '../EntityEmptyState/EntityEmptyState';
-import EntityError from '../EntityError/EntityError';
-import { isKeyNotFoundError } from '../utils';
-import { K8S_ENTITY_LOGS_EXPRESSION_KEY, useInfiniteEntityLogs } from './hooks';
-import { getEntityLogsQueryPayload } from './utils';
-
-import styles from './EntityLogs.module.scss';
-
-interface Props {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	isModalTimeSelection: boolean;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	selectedInterval: Time;
-	queryKey: string;
-	category: InfraMonitoringEntity;
-	initialExpression: string;
-}
-
-function EntityLogsContent({
-	timeRange,
-	isModalTimeSelection,
-	handleTimeChange,
-	selectedInterval,
-	queryKey,
-	category,
-}: Omit<Props, 'initialExpression'>): JSX.Element {
-	const virtuosoRef = useRef<VirtuosoHandle>(null);
-
-	const expression = useExpression();
-	const inputExpression = useInputExpression();
-	const userExpression = useUserExpression();
-	const initialExpression = useInitialExpression();
-	const querySearchOnChange = useQuerySearchOnChange();
-	const querySearchOnRun = useQuerySearchOnRun();
-	const querySearchInitialExpressionProp = useQuerySearchInitialExpressionProp();
-
-	const { activeLog, selectedTab, handleSetActiveLog, handleCloseLogDetail } =
-		useLogDetailHandlers();
-
-	const onAddToQuery = useCallback(
-		(fieldKey: string, fieldValue: string, operator: string): void => {
-			handleCloseLogDetail();
-
-			const partExpression = generateFilterQuery({
-				fieldKey,
-				fieldValue,
-				type: getOldLogsOperatorFromNew(operator),
-			});
-
-			const currentUser = userExpression;
-			const newUser = currentUser.trim()
-				? `${currentUser} AND ${partExpression}`
-				: partExpression;
-
-			querySearchOnRun(newUser);
-		},
-		[userExpression, querySearchOnRun, handleCloseLogDetail],
-	);
-
-	const {
-		logs,
-		loadMoreLogs,
-		hasNextPage,
-		isFetchingNextPage,
-		isLoading,
-		isFetching,
-		isError,
-		error,
-		refetch,
-		cancel,
-	} = useInfiniteEntityLogs({
-		queryKey,
-		timeRange,
-		expression,
-	});
-
-	const handleRunQuery = useCallback(
-		(updatedExpression?: string): void => {
-			const newUserExpression = updatedExpression
-				? getUserExpressionFromCombined(initialExpression, updatedExpression)
-				: inputExpression;
-			const validation = validateQuery(
-				initialExpression
-					? combineInitialAndUserExpression(initialExpression, newUserExpression)
-					: newUserExpression || '',
-			);
-
-			if (validation.isValid) {
-				querySearchOnRun(newUserExpression);
-
-				void logEvent(InfraMonitoringEvents.FilterApplied, {
-					entity: InfraMonitoringEvents.K8sEntity,
-					page: InfraMonitoringEvents.DetailedPage,
-					category,
-					view: InfraMonitoringEvents.LogsView,
-				});
-
-				refetch();
-			}
-		},
-		[inputExpression, initialExpression, refetch, querySearchOnRun, category],
-	);
-
-	const queryData = useMemo(
-		() =>
-			getEntityLogsQueryPayload({
-				start: timeRange.startTime,
-				end: timeRange.endTime,
-				expression: userExpression,
-			}).queryData,
-		[timeRange.startTime, timeRange.endTime, userExpression],
-	);
-
-	const handleScrollToLog = useScrollToLog({
-		logs,
-		virtuosoRef,
-	});
-
-	const { updateAllQueriesOperators } = useQueryBuilder();
-	const { safeNavigate } = useSafeNavigate();
-
-	const handleOpenInExplorer = useCallback(
-		(e: React.MouseEvent<Element, MouseEvent>, log: ILog) => {
-			const baseQuery = updateAllQueriesOperators(
-				initialQueriesMap[DataSource.LOGS],
-				PANEL_TYPES.LIST,
-				DataSource.LOGS,
-			);
-
-			const queryParams = {
-				[QueryParams.activeLogId]: `"${log?.id}"`,
-				[QueryParams.startTime]: timeRange.startTime.toString(),
-				[QueryParams.endTime]: timeRange.endTime.toString(),
-				[QueryParams.compositeQuery]: JSON.stringify({
-					...baseQuery,
-					builder: {
-						...baseQuery.builder,
-						queryData: baseQuery.builder.queryData.map((item) => ({
-							...item,
-							filter: { expression },
-						})),
-					},
-				} satisfies Query),
-			};
-			safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`, {
-				newTab: !!e && isModifierKeyPressed(e),
-			});
-		},
-		[
-			timeRange.startTime,
-			timeRange.endTime,
-			expression,
-			safeNavigate,
-			updateAllQueriesOperators,
-		],
-	);
-
-	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => {
-			return (
-				<div key={logToRender.id}>
-					<RawLogView
-						isTextOverflowEllipsisDisabled
-						data={logToRender}
-						linesPerRow={5}
-						fontSize={FontSize.MEDIUM}
-						selectedFields={[
-							{
-								dataType: 'string',
-								type: '',
-								name: 'body',
-							},
-							{
-								dataType: 'string',
-								type: '',
-								name: 'timestamp',
-							},
-						]}
-						onSetActiveLog={handleSetActiveLog}
-						onClearActiveLog={handleCloseLogDetail}
-						isActiveLog={activeLog?.id === logToRender.id}
-					/>
-				</div>
-			);
-		},
-		[activeLog, handleSetActiveLog, handleCloseLogDetail],
-	);
-
-	const renderFooter = useCallback(
-		(): JSX.Element | null => (
-			<>
-				{isFetchingNextPage ? (
-					<div className={styles.logsLoadingSkeleton}> Loading more logs ... </div>
-				) : !hasNextPage && logs.length > 0 ? (
-					<div className={styles.logsLoadingSkeleton}> *** End *** </div>
-				) : null}
-			</>
-		),
-		[isFetchingNextPage, hasNextPage, logs.length],
-	);
-
-	const renderContent = useMemo(
-		() => (
-			<Card bordered={false} className={styles.listCard}>
-				<OverlayScrollbar isVirtuoso>
-					<Virtuoso
-						key="entity-logs-virtuoso"
-						ref={virtuosoRef}
-						data={logs}
-						endReached={loadMoreLogs}
-						totalCount={logs.length}
-						itemContent={getItemContent}
-						overscan={200}
-						components={{
-							Footer: renderFooter,
-						}}
-					/>
-				</OverlayScrollbar>
-			</Card>
-		),
-		[logs, loadMoreLogs, getItemContent, renderFooter],
-	);
-
-	const showInitialLoading = isLoading || (isFetching && logs.length === 0);
-
-	const isKeyNotFound = isKeyNotFoundError(error);
-	const isDataEmpty =
-		!showInitialLoading && (!isError || isKeyNotFound) && logs.length === 0;
-	const hasAdditionalFilters = !!userExpression?.trim();
-
-	return (
-		<div className={styles.container}>
-			<div className={styles.filterContainer}>
-				<div className={styles.filterContainerTime}>
-					<DateTimeSelectionV2
-						showAutoRefresh
-						showRefreshText={false}
-						hideShareModal
-						isModalTimeSelection={isModalTimeSelection}
-						onTimeChange={handleTimeChange}
-						defaultRelativeTime="5m"
-						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
-					/>
-
-					<RunQueryBtn
-						isLoadingQueries={isFetching}
-						onStageRunQuery={(): void => handleRunQuery()}
-						handleCancelQuery={cancel}
-					/>
-				</div>
-
-				<div className={styles.filterQuerySearch}>
-					<QuerySearch
-						onChange={querySearchOnChange}
-						queryData={queryData}
-						dataSource={DataSource.LOGS}
-						onRun={handleRunQuery}
-						initialExpression={querySearchInitialExpressionProp}
-					/>
-				</div>
-			</div>
-			<div className={styles.logs}>
-				{showInitialLoading && <LogsLoading />}
-				{isDataEmpty && <EntityEmptyState hasFilters={hasAdditionalFilters} />}
-				{isError && !isKeyNotFound && !showInitialLoading && <EntityError />}
-				{!showInitialLoading && (!isError || isKeyNotFound) && logs.length > 0 && (
-					<div className={styles.listContainer} data-log-detail-ignore="true">
-						{renderContent}
-					</div>
-				)}
-				{selectedTab && activeLog && (
-					<LogDetail
-						log={activeLog}
-						onClose={handleCloseLogDetail}
-						logs={logs}
-						onNavigateLog={handleSetActiveLog}
-						selectedTab={selectedTab}
-						onAddToQuery={onAddToQuery}
-						onClickActionItem={onAddToQuery}
-						onScrollToLog={handleScrollToLog}
-						handleOpenInExplorer={(e): void => handleOpenInExplorer(e, activeLog)}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function EntityLogs({ initialExpression, ...rest }: Props): JSX.Element {
-	return (
-		<QuerySearchV2Provider
-			queryParamKey={K8S_ENTITY_LOGS_EXPRESSION_KEY}
-			initialExpression={initialExpression}
-			persistOnUnmount
-		>
-			<EntityLogsContent {...rest} />
-		</QuerySearchV2Provider>
-	);
-}
-
-export default EntityLogs;

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

@@ -1,185 +0,0 @@
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { mockQueryRangeV5WithLogsResponse } from '__tests__/query_range_v5.util';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	act,
-	fireEvent,
-	render,
-	RenderResult,
-	screen,
-	waitFor,
-} from 'tests/test-utils';
-import { QueryRangePayloadV5 } from 'types/api/v5/queryRange';
-
-import EntityLogs from '../EntityLogs';
-import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../hooks';
-
-function verifyEntityLogsV5Request({
-	payload,
-	expectedOffset,
-	initialTimeRange,
-}: {
-	payload: QueryRangePayloadV5;
-	expectedOffset: number;
-	initialTimeRange?: { start: number; end: number };
-}): void {
-	const spec = payload.compositeQuery.queries[0]?.spec as {
-		offset?: number;
-		order?: Array<{ key: { name: string }; direction: string }>;
-	};
-	expect(spec.offset).toBe(expectedOffset);
-	if (initialTimeRange) {
-		expect(payload.start).toBe(initialTimeRange.start);
-		expect(payload.end).toBe(initialTimeRange.end);
-	}
-	const orderKeys = spec.order?.map((o) => o.key.name) ?? [];
-	expect(orderKeys).toContain('timestamp');
-	expect(orderKeys).toContain('id');
-}
-
-jest.mock(
-	'components/OverlayScrollbar/OverlayScrollbar',
-	() =>
-		function MockOverlayScrollbar({
-			children,
-		}: {
-			children: React.ReactNode;
-		}): JSX.Element {
-			return <div>{children}</div>;
-		},
-);
-
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
-	__esModule: true,
-	default: ({
-		onTimeChange,
-	}: {
-		onTimeChange?: (interval: string, dateTimeRange?: [number, number]) => void;
-	}): JSX.Element => (
-		<button
-			type="button"
-			data-testid="mock-datetime-selection"
-			onClick={(): void => {
-				onTimeChange?.('5m');
-			}}
-		>
-			Select Time
-		</button>
-	),
-}));
-
-describe('EntityLogs', () => {
-	let capturedQueryRangePayloads: QueryRangePayloadV5[] = [];
-	const itemHeight = 100;
-
-	beforeEach(() => {
-		capturedQueryRangePayloads = [];
-		mockQueryRangeV5WithLogsResponse({
-			onReceiveRequest: async (req) => {
-				const body = (await req.json()) as QueryRangePayloadV5;
-				capturedQueryRangePayloads.push(body);
-				return {};
-			},
-		});
-	});
-	it('should check if k8s logs pagination flows work properly', async () => {
-		let renderResult: RenderResult;
-		let scrollableElement: HTMLElement;
-
-		act(() => {
-			renderResult = render(
-				<NuqsTestingAdapter
-					searchParams={`${K8S_ENTITY_LOGS_EXPRESSION_KEY}=k8s.pod.name+%3D+%22x%22`}
-				>
-					<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight }}>
-						<EntityLogs
-							timeRange={{ startTime: 1, endTime: 2 }}
-							isModalTimeSelection={false}
-							handleTimeChange={jest.fn()}
-							selectedInterval="5m"
-							queryKey="test"
-							category={InfraMonitoringEntity.PODS}
-							initialExpression='k8s.pod.name = "x"'
-						/>
-					</VirtuosoMockContext.Provider>
-				</NuqsTestingAdapter>,
-			);
-		});
-
-		await waitFor(() => {
-			expect(
-				screen.queryByText('pending_data_placeholder'),
-			).not.toBeInTheDocument();
-		});
-
-		await waitFor(() => {
-			expect(capturedQueryRangePayloads).toHaveLength(1);
-		});
-
-		await waitFor(async () => {
-			scrollableElement = renderResult.container.querySelector(
-				'[data-test-id="virtuoso-scroller"]',
-			) as HTMLElement;
-
-			expect(scrollableElement).not.toBeNull();
-
-			if (scrollableElement) {
-				scrollableElement.scrollTop = 99 * itemHeight;
-
-				act(() => {
-					fireEvent.scroll(scrollableElement);
-				});
-			}
-		});
-
-		await waitFor(() => {
-			expect(capturedQueryRangePayloads).toHaveLength(2);
-		});
-
-		const firstPayload = capturedQueryRangePayloads[0];
-		verifyEntityLogsV5Request({
-			payload: firstPayload,
-			expectedOffset: 0,
-		});
-
-		const initialTimeRange = {
-			start: firstPayload.start,
-			end: firstPayload.end,
-		};
-
-		const secondPayload = capturedQueryRangePayloads[1];
-		verifyEntityLogsV5Request({
-			payload: secondPayload,
-			expectedOffset: 100,
-			initialTimeRange,
-		});
-
-		await waitFor(async () => {
-			scrollableElement = renderResult.container.querySelector(
-				'[data-test-id="virtuoso-scroller"]',
-			) as HTMLElement;
-
-			expect(scrollableElement).not.toBeNull();
-
-			if (scrollableElement) {
-				scrollableElement.scrollTop = 199 * itemHeight;
-
-				act(() => {
-					fireEvent.scroll(scrollableElement);
-				});
-			}
-		});
-
-		await waitFor(() => {
-			expect(capturedQueryRangePayloads.length).toBeGreaterThanOrEqual(3);
-		});
-
-		const thirdPayload = capturedQueryRangePayloads[2];
-		verifyEntityLogsV5Request({
-			payload: thirdPayload,
-			expectedOffset: 200,
-			initialTimeRange,
-		});
-	});
-});

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/__tests__/hooks.test.tsx

@@ -1,186 +0,0 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { act, renderHook, waitFor } from '@testing-library/react';
-
-import {
-	mockQueryRangeV5WithError,
-	mockQueryRangeV5WithLogsResponse,
-} from '../../../../../__tests__/query_range_v5.util';
-import { useInfiniteEntityLogs } from '../hooks';
-
-const createWrapper = (): React.FC<{ children: React.ReactNode }> => {
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: {
-				retry: false,
-			},
-		},
-	});
-
-	return function Wrapper({
-		children,
-	}: {
-		children: React.ReactNode;
-	}): JSX.Element {
-		return (
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		);
-	};
-};
-
-describe('useInfiniteEntityLogs', () => {
-	const defaultParams = {
-		queryKey: 'entityLogsTest',
-		timeRange: { startTime: 1708000000, endTime: 1708003600 },
-		expression: 'k8s.pod.name = "test"',
-	};
-
-	describe('initial state', () => {
-		it('should return initial loading state', () => {
-			mockQueryRangeV5WithLogsResponse({
-				delay: 100,
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			expect(result.current.isLoading).toBe(true);
-			expect(result.current.logs).toStrictEqual([]);
-		});
-	});
-
-	describe('successful data fetching', () => {
-		it('should return logs after successful fetch', async () => {
-			mockQueryRangeV5WithLogsResponse({
-				pageSize: 5,
-				hasMore: true,
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isLoading).toBe(false);
-			});
-
-			expect(result.current.error).toBeFalsy();
-			expect(result.current.logs).toHaveLength(5);
-			expect(result.current.isError).toBe(false);
-		});
-
-		it('should set hasNextPage based on response size', async () => {
-			mockQueryRangeV5WithLogsResponse({
-				pageSize: 100,
-				hasMore: true,
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isLoading).toBe(false);
-			});
-
-			expect(result.current.hasNextPage).toBe(true);
-		});
-
-		it('should not have next page when response is smaller than page size', async () => {
-			mockQueryRangeV5WithLogsResponse({
-				pageSize: 100,
-				hasMore: false,
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isLoading).toBe(false);
-			});
-
-			expect(result.current.hasNextPage).toBe(false);
-		});
-	});
-
-	describe('empty state', () => {
-		it('should return empty logs array when no data', async () => {
-			mockQueryRangeV5WithLogsResponse({
-				pageSize: 0,
-				hasMore: false,
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isLoading).toBe(false);
-			});
-
-			expect(result.current.logs).toStrictEqual([]);
-			expect(result.current.hasNextPage).toBe(false);
-		});
-	});
-
-	describe('error handling', () => {
-		it('should set isError on API failure', async () => {
-			mockQueryRangeV5WithError('Internal Server Error');
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isError).toBe(true);
-			});
-
-			expect(result.current.logs).toStrictEqual([]);
-		});
-	});
-
-	describe('load more functionality', () => {
-		it('should fetch next page when loadMoreLogs is called', async () => {
-			const requestCount = { count: 0 };
-
-			mockQueryRangeV5WithLogsResponse({
-				pageSize: 100,
-				offset: 0,
-				hasMore: true,
-				onReceiveRequest: () => {
-					requestCount.count += 1;
-
-					if (requestCount.count > 1) {
-						return { offset: 100, pageSize: 100, hasMore: false };
-					}
-
-					return undefined;
-				},
-			});
-
-			const { result } = renderHook(() => useInfiniteEntityLogs(defaultParams), {
-				wrapper: createWrapper(),
-			});
-
-			await waitFor(() => {
-				expect(result.current.isLoading).toBe(false);
-			});
-
-			expect(result.current.logs).toHaveLength(100);
-			expect(result.current.hasNextPage).toBe(true);
-			expect(requestCount.count).toBe(1);
-
-			act(() => {
-				result.current.loadMoreLogs();
-			});
-
-			await waitFor(() => {
-				expect(result.current.logs).toHaveLength(150);
-			});
-
-			expect(result.current.hasNextPage).toBe(false);
-			expect(requestCount.count).toBe(2);
-		});
-	});
-});

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/hooks.ts

@@ -1,126 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { useInfiniteQuery, useQueryClient } from 'react-query';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { ILog } from 'types/api/logs/log';
-
-import { getEntityLogsQueryPayload } from './utils';
-
-export const K8S_ENTITY_LOGS_EXPRESSION_KEY = 'k8sEntityLogsExpression';
-
-export function useInfiniteEntityLogs({
-	queryKey,
-	timeRange,
-	expression,
-}: {
-	queryKey: string;
-	timeRange: { startTime: number; endTime: number };
-	expression: string;
-}): {
-	logs: ILog[];
-	isLoading: boolean;
-	isFetching: boolean;
-	isFetchingNextPage: boolean;
-	isError: boolean;
-	error?: unknown;
-	hasNextPage: boolean;
-	loadMoreLogs: () => void;
-	refetch: () => void;
-	cancel: () => void;
-	reactQueryKey: unknown[];
-} {
-	const reactQueryKey = useMemo(
-		() => [
-			// TODO: remove AUTO_REFRESH_QUERY when migrating to date time selection v3
-			REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-			queryKey,
-			timeRange.startTime,
-			timeRange.endTime,
-			expression,
-		],
-		[queryKey, timeRange.startTime, timeRange.endTime, expression],
-	);
-
-	const {
-		data,
-		isLoading,
-		isFetching,
-		isFetchingNextPage,
-		isError,
-		error,
-		hasNextPage,
-		fetchNextPage,
-		refetch,
-	} = useInfiniteQuery({
-		queryKey: reactQueryKey,
-		queryFn: async ({ pageParam = 0, signal }) => {
-			const { query } = getEntityLogsQueryPayload({
-				start: timeRange.startTime,
-				end: timeRange.endTime,
-				expression,
-				offset: pageParam as number,
-				pageSize: DEFAULT_PER_PAGE_VALUE,
-			});
-			return GetMetricQueryRange(query, ENTITY_VERSION_V5, undefined, signal);
-		},
-		getNextPageParam: (lastPage, allPages) => {
-			const list = lastPage?.payload?.data?.newResult?.data?.result?.[0]?.list;
-			if (!list || list.length < DEFAULT_PER_PAGE_VALUE) {
-				return;
-			}
-			return allPages.length * DEFAULT_PER_PAGE_VALUE;
-		},
-		enabled: !!expression?.trim(),
-	});
-
-	const logs = useMemo<ILog[]>(() => {
-		if (!data?.pages) {
-			return [];
-		}
-
-		return data.pages.flatMap((page) => {
-			const list = page.payload.data.newResult.data.result?.[0]?.list;
-			if (!list) {
-				return [];
-			}
-
-			return list.map(
-				(item) =>
-					({
-						...item.data,
-						timestamp: item.timestamp,
-					}) as ILog,
-			);
-		});
-	}, [data?.pages]);
-
-	const loadMoreLogs = useCallback(() => {
-		if (hasNextPage && !isFetchingNextPage) {
-			void fetchNextPage();
-		}
-	}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
-
-	const queryClient = useQueryClient();
-
-	const cancel = useCallback(() => {
-		void queryClient.cancelQueries({
-			queryKey: reactQueryKey,
-		});
-	}, [queryClient, reactQueryKey]);
-
-	return {
-		logs,
-		isLoading,
-		isFetching,
-		isFetchingNextPage,
-		isError,
-		error,
-		hasNextPage: !!hasNextPage,
-		loadMoreLogs,
-		refetch,
-		cancel,
-		reactQueryKey,
-	};
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/index.ts

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

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/utils.ts

@@ -1,108 +0,0 @@
-import {
-	initialQueryBuilderFormValuesMap,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
-import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-import {
-	DataSource,
-	LogsAggregatorOperator,
-	ReduceOperators,
-} from 'types/common/queryBuilder';
-import { v4 as uuidv4 } from 'uuid';
-
-export interface EntityLogsQueryParams {
-	start: number;
-	end: number;
-	expression: string;
-	offset?: number;
-	pageSize?: number;
-}
-
-function buildEntityLogsQueryData(
-	expression: string,
-	{
-		offset,
-		pageSize,
-	}: {
-		offset: number;
-		pageSize: number;
-	},
-): IBuilderQuery {
-	return {
-		...initialQueryBuilderFormValuesMap.logs,
-		queryName: 'A',
-		dataSource: DataSource.LOGS,
-		aggregateOperator: LogsAggregatorOperator.NOOP,
-		aggregateAttribute: {
-			id: '------false',
-			dataType: DataTypes.String,
-			key: '',
-			type: '',
-		},
-		timeAggregation: 'rate',
-		spaceAggregation: 'sum',
-		functions: [],
-		aggregations: [],
-		filter: { expression },
-		expression,
-		having: {
-			expression: '',
-		},
-		disabled: false,
-		stepInterval: 60,
-		limit: null,
-		orderBy: [
-			{
-				columnName: 'timestamp',
-				order: 'desc',
-			},
-			{
-				columnName: 'id',
-				order: 'desc',
-			},
-		],
-		groupBy: [],
-		legend: '',
-		reduceTo: ReduceOperators.AVG,
-		offset,
-		pageSize,
-	};
-}
-
-export function getEntityLogsQueryPayload({
-	start,
-	end,
-	expression,
-	offset = 0,
-	pageSize = DEFAULT_PER_PAGE_VALUE,
-}: EntityLogsQueryParams): {
-	query: GetQueryResultsProps;
-	queryData: IBuilderQuery;
-} {
-	const queryData = buildEntityLogsQueryData(expression, { offset, pageSize });
-
-	return {
-		query: {
-			graphType: PANEL_TYPES.LIST,
-			selectedTime: 'GLOBAL_TIME',
-			query: {
-				clickhouse_sql: [],
-				promql: [],
-				builder: {
-					queryData: [queryData],
-					queryFormulas: [],
-					queryTraceOperator: [],
-				},
-				id: uuidv4(),
-				queryType: EQueryType.QUERY_BUILDER,
-			},
-			start,
-			end,
-		},
-		queryData,
-	};
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/EntityMetrics.module.scss

@@ -1,52 +0,0 @@
-.entityMetricsContainer {
-	display: flex;
-	flex-wrap: wrap;
-	margin-top: 1rem;
-	margin-left: -12px;
-	margin-right: -12px;
-}
-
-.entityMetricsCol {
-	flex: 0 0 50%;
-	max-width: 50%;
-	padding-left: 12px;
-	padding-right: 12px;
-	box-sizing: border-box;
-}
-
-.entityMetricsTitle {
-	font-size: var(--periscope-font-size-base);
-	color: var(--l2-foreground);
-}
-
-.metricsHeader {
-	display: flex;
-	justify-content: flex-end;
-	margin-top: 1rem;
-
-	gap: 8px;
-	padding: 12px;
-	border-radius: 3px;
-	border: 1px solid var(--l1-border);
-}
-
-.entityMetricsCard {
-	position: relative;
-	margin: 8px 0 1rem 0;
-	height: 300px;
-	padding: 10px;
-	border: 1px solid var(--l1-border);
-	border-radius: 3px;
-
-	.chartContainer {
-		width: 100%;
-		height: 100%;
-	}
-
-	.noDataContainer {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
-}

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

@@ -1,220 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-import { UseQueryResult } from 'react-query';
-import { Skeleton } from 'antd';
-import cx from 'classnames';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { useMultiIntersectionObserver } from 'hooks/useMultiIntersectionObserver';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { useTimezone } from 'providers/Timezone';
-import { SuccessResponse } from 'types/api';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-import { buildEntityMetricsChartConfig } from './configBuilder';
-
-import { useEntityMetrics } from './hooks';
-import { isKeyNotFoundError } from '../utils';
-
-import styles from './EntityMetrics.module.scss';
-import { MetricsTable } from './MetricsTable';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-
-interface EntityMetricsProps<T> {
-	timeRange: {
-		startTime: number;
-		endTime: number;
-	};
-	isModalTimeSelection: boolean;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-	selectedInterval: Time;
-	entity: T;
-	entityWidgetInfo: {
-		title: string;
-		yAxisUnit: string;
-	}[];
-	getEntityQueryPayload: (
-		node: T,
-		start: number,
-		end: number,
-		dotMetricsEnabled: boolean,
-	) => GetQueryResultsProps[];
-	queryKey: string;
-	category: InfraMonitoringEntity;
-}
-
-function EntityMetrics<T>({
-	selectedInterval,
-	entity,
-	timeRange,
-	handleTimeChange,
-	isModalTimeSelection,
-	entityWidgetInfo,
-	getEntityQueryPayload,
-	queryKey,
-	category,
-}: EntityMetricsProps<T>): JSX.Element {
-	const { visibilities, setElement } = useMultiIntersectionObserver(
-		entityWidgetInfo.length,
-		{ threshold: 0.1 },
-	);
-
-	const { queries, chartData, tableData, queryPayloads } = useEntityMetrics({
-		queryKey,
-		timeRange,
-		entity,
-		getEntityQueryPayload,
-		visibilities,
-		category,
-	});
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const dimensions = useResizeObserver(graphRef);
-	const { currentQuery } = useQueryBuilder();
-
-	const onDragSelect = useCallback(
-		(start: number, end: number): void => {
-			const startTimestamp = Math.trunc(start);
-			const endTimestamp = Math.trunc(end);
-
-			handleTimeChange('custom', [startTimestamp, endTimestamp]);
-		},
-		[handleTimeChange],
-	);
-
-	const configs = useMemo(
-		() =>
-			queries.map(({ data }, idx) => {
-				const panelType = queryPayloads[idx]?.graphType;
-				if (panelType === PANEL_TYPES.TABLE) {
-					return null;
-				}
-				const widgetTitle = entityWidgetInfo[idx].title
-					.toLowerCase()
-					.replace(/\s+/g, '-');
-				return buildEntityMetricsChartConfig({
-					id: `${category}-${widgetTitle}`,
-					isDarkMode,
-					currentQuery,
-					onDragSelect,
-					apiResponse: data?.payload,
-					timezone,
-					yAxisUnit: entityWidgetInfo[idx].yAxisUnit,
-					minTimeScale: timeRange.startTime,
-					maxTimeScale: timeRange.endTime,
-				});
-			}),
-		[
-			queries,
-			queryPayloads,
-			category,
-			isDarkMode,
-			currentQuery,
-			onDragSelect,
-			timezone,
-			entityWidgetInfo,
-			timeRange.startTime,
-			timeRange.endTime,
-		],
-	);
-
-	const renderCardContent = (
-		query: UseQueryResult<SuccessResponse<MetricRangePayloadProps>, unknown>,
-		idx: number,
-	): JSX.Element => {
-		if (
-			(!query.data && query.isLoading) ||
-			query.isFetching ||
-			!visibilities[idx]
-		) {
-			return <Skeleton />;
-		}
-
-		if (query.error && !isKeyNotFoundError(query.error)) {
-			const errorMessage =
-				(query.error as Error)?.message || 'Something went wrong';
-			return <div>{errorMessage}</div>;
-		}
-
-		const panelType = queryPayloads[idx]?.graphType;
-
-		return (
-			<div
-				className={cx(styles.chartContainer, {
-					[styles.noDataContainer]:
-						!query.isLoading && !query?.data?.payload?.data?.result?.length,
-				})}
-			>
-				{panelType === PANEL_TYPES.TABLE ? (
-					<MetricsTable
-						rows={tableData[idx]?.[0]?.rows ?? []}
-						columns={tableData[idx]?.[0]?.columns ?? []}
-					/>
-				) : (
-					configs[idx] &&
-					chartData[idx] && (
-						<TimeSeries
-							config={configs[idx]}
-							data={chartData[idx]}
-							legendConfig={{ position: LegendPosition.BOTTOM }}
-							width={dimensions.width}
-							height={dimensions.height}
-							timezone={timezone}
-							yAxisUnit={entityWidgetInfo[idx].yAxisUnit}
-						/>
-					)
-				)}
-			</div>
-		);
-	};
-
-	return (
-		<>
-			<div className={styles.metricsHeader}>
-				<DateTimeSelectionV2
-					showAutoRefresh
-					showRefreshText={false}
-					hideShareModal
-					onTimeChange={handleTimeChange}
-					defaultRelativeTime={DEFAULT_TIME_RANGE}
-					isModalTimeSelection={isModalTimeSelection}
-					modalSelectedInterval={selectedInterval}
-					modalInitialStartTime={timeRange.startTime * 1000}
-					modalInitialEndTime={timeRange.endTime * 1000}
-				/>
-			</div>
-			<div className={styles.entityMetricsContainer}>
-				{queries.map((query, idx) => (
-					<div
-						ref={setElement(idx)}
-						key={entityWidgetInfo[idx].title}
-						className={styles.entityMetricsCol}
-					>
-						<span className={styles.entityMetricsTitle}>
-							{entityWidgetInfo[idx].title}
-						</span>
-						<div className={styles.entityMetricsCard} ref={graphRef}>
-							{renderCardContent(query, idx)}
-						</div>
-					</div>
-				))}
-			</div>
-		</>
-	);
-}
-
-export default EntityMetrics;

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/MetricsTable.module.scss

@@ -1,7 +0,0 @@
-.table {
-	height: 100%;
-}
-
-.paginationContainer {
-	margin: 0;
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/MetricsTable.tsx

@@ -1,99 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
-import { SortState } from 'components/TanStackTableView/types';
-
-import styles from './MetricsTable.module.scss';
-import { MetricsColumn } from './utils';
-
-interface MetricsTableProps {
-	rows: Record<string, string>[];
-	columns: MetricsColumn[];
-}
-
-const DEFAULT_PAGE = 1;
-const DEFAULT_LIMIT = 7; // the sweetspot for the amount of items without showing the scrollbar
-
-export function MetricsTable({
-	rows,
-	columns,
-}: MetricsTableProps): JSX.Element {
-	const [page, setPage] = useState(DEFAULT_PAGE);
-	const [limit, setLimit] = useState(DEFAULT_LIMIT);
-	const [orderBy, setOrderBy] = useState<SortState | null>(null);
-
-	const sortedRows = useMemo(() => {
-		if (!orderBy) {
-			return rows;
-		}
-		const { columnName, order } = orderBy;
-		return [...rows].sort((a, b) => {
-			const aVal = parseFloat(a[columnName]) || 0;
-			const bVal = parseFloat(b[columnName]) || 0;
-			return order === 'asc' ? aVal - bVal : bVal - aVal;
-		});
-	}, [rows, orderBy]);
-
-	const paginatedRows = useMemo(() => {
-		const startIndex = (page - 1) * limit;
-		return sortedRows.slice(startIndex, startIndex + limit);
-	}, [sortedRows, page, limit]);
-
-	const handlePageChange = useCallback((newPage: number) => {
-		setPage(newPage);
-	}, []);
-
-	const handleLimitChange = useCallback((newLimit: number) => {
-		setLimit(newLimit);
-		setPage(DEFAULT_PAGE);
-	}, []);
-
-	const columnDefs = useMemo(
-		() =>
-			columns.map(
-				(col, index) =>
-					({
-						id: col.key,
-						accessorKey: col.key as keyof Record<string, string>,
-						header: (): JSX.Element => (
-							<TanStackTable.Text title={col.label}>{col.label}</TanStackTable.Text>
-						),
-						cell: ({ value }): JSX.Element => {
-							const displayValue = String(value ?? '');
-							return (
-								<TanStackTable.Text title={displayValue}>
-									{displayValue}
-								</TanStackTable.Text>
-							);
-						},
-						enableMove: false,
-						enableResize: false,
-						enableRemove: false,
-						enableSort: col.isValueColumn,
-						width: {
-							min: index === 0 ? 220 : Math.max(col.label?.length * 12, 80) || 100,
-						},
-					}) satisfies TableColumnDef<Record<string, string>>,
-			),
-		[columns],
-	);
-
-	return (
-		<TanStackTable<Record<string, string>>
-			className={styles.table}
-			data={paginatedRows}
-			columns={columnDefs}
-			onSort={setOrderBy}
-			pagination={{
-				total: rows.length,
-				defaultPage: page,
-				defaultLimit: limit,
-				onPageChange: handlePageChange,
-				onLimitChange: handleLimitChange,
-				showPageSize: false,
-			}}
-			paginationClassname={styles.paginationContainer}
-			getRowKey={(row) => row.key}
-			getItemKey={(row) => row.key}
-		/>
-	);
-}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/__tests__/EntityMetrics.test.tsx

@@ -1,456 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
-import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
-import * as appContextHooks from 'providers/App/App';
-import { LicenseEvent } from 'types/api/licensesV3/getActive';
-import uPlot from 'uplot';
-
-import EntityMetrics from '../EntityMetrics';
-import { useEntityMetrics } from '../hooks';
-
-jest.mock('../hooks', () => ({
-	useEntityMetrics: jest.fn(),
-}));
-
-const mockUseEntityMetrics = useEntityMetrics as jest.MockedFunction<
-	typeof useEntityMetrics
->;
-
-jest.mock('../configBuilder', () => ({
-	buildEntityMetricsChartConfig: jest.fn().mockReturnValue({
-		getId: jest.fn().mockReturnValue('mock-id'),
-	}),
-}));
-
-jest.mock('lib/uPlotV2/utils/dataUtils', () => ({
-	prepareChartData: jest.fn().mockReturnValue([]),
-	hasSingleVisiblePoint: jest.fn().mockReturnValue(false),
-}));
-
-jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
-	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="date-time-selection">Date Time</div>
-	),
-}));
-
-jest.mock(
-	'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries',
-	() => ({
-		__esModule: true,
-		default: (): JSX.Element => (
-			<div data-testid="uplot-chart">TimeSeries Chart</div>
-		),
-	}),
-);
-
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): { timezone: { value: string } } => ({
-		timezone: { value: 'UTC' },
-	}),
-}));
-
-jest.mock('../MetricsTable', () => ({
-	__esModule: true,
-	MetricsTable: jest
-		.fn()
-		.mockImplementation(
-			(): JSX.Element => <div data-testid="metrics-table">Metrics Table</div>,
-		),
-}));
-
-const mockUseQuery = jest.fn();
-jest.mock('react-query', () => ({
-	...jest.requireActual('react-query'),
-	useQuery: (config: any): any => mockUseQuery(config),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('hooks/useDimensions', () => ({
-	useResizeObserver: (): { width: number; height: number } => ({
-		width: 800,
-		height: 600,
-	}),
-}));
-
-jest.mock('hooks/useMultiIntersectionObserver', () => ({
-	useMultiIntersectionObserver: (count: number): any => ({
-		visibilities: new Array(count).fill(true),
-		setElement: jest.fn(),
-	}),
-}));
-
-jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
-	user: {
-		role: 'admin',
-	},
-	activeLicenseV3: {
-		event_queue: {
-			created_at: '0',
-			event: LicenseEvent.NO_EVENT,
-			scheduled_at: '0',
-			status: '',
-			updated_at: '0',
-		},
-		license: {
-			license_key: 'test-license-key',
-			license_type: 'trial',
-			org_id: 'test-org-id',
-			plan_id: 'test-plan-id',
-			plan_name: 'test-plan-name',
-			plan_type: 'trial',
-			plan_version: 'test-plan-version',
-		},
-	},
-	featureFlags: [
-		{
-			name: 'DOT_METRICS_ENABLED',
-			active: false,
-		},
-	],
-} as any);
-
-const mockEntity = {
-	id: 'test-entity-1',
-	name: 'test-entity',
-	type: 'pod',
-};
-
-const mockEntityWidgetInfo = [
-	{
-		title: 'CPU Usage',
-		yAxisUnit: 'percentage',
-	},
-	{
-		title: 'Memory Usage',
-		yAxisUnit: 'bytes',
-	},
-];
-
-const mockGetEntityQueryPayload = jest.fn().mockReturnValue([
-	{
-		query: 'cpu_usage',
-		start: 1705315200,
-		end: 1705318800,
-	},
-	{
-		query: 'memory_usage',
-		start: 1705315200,
-		end: 1705318800,
-	},
-]);
-
-const mockTimeRange = {
-	startTime: 1705315200,
-	endTime: 1705318800,
-};
-
-const mockHandleTimeChange = jest.fn();
-
-const mockQueries = [
-	{
-		data: {
-			payload: {
-				data: {
-					result: [
-						{
-							table: {
-								rows: [
-									{ data: { timestamp: '2024-01-15T10:00:00Z', value: '42.5' } },
-									{ data: { timestamp: '2024-01-15T10:01:00Z', value: '43.2' } },
-								],
-								columns: [
-									{ key: 'timestamp', label: 'Timestamp', isValueColumn: false },
-									{ key: 'value', label: 'Value', isValueColumn: true },
-								],
-							},
-						},
-					],
-				},
-			},
-			params: {
-				compositeQuery: {
-					panelType: 'time_series',
-				},
-			},
-		},
-		isLoading: false,
-		isError: false,
-		error: null,
-	},
-	{
-		data: {
-			payload: {
-				data: {
-					result: [
-						{
-							table: {
-								rows: [
-									{ data: { timestamp: '2024-01-15T10:00:00Z', value: '1024' } },
-									{ data: { timestamp: '2024-01-15T10:01:00Z', value: '1028' } },
-								],
-								columns: [
-									{ key: 'timestamp', label: 'Timestamp', isValueColumn: false },
-									{ key: 'value', label: 'Value', isValueColumn: true },
-								],
-							},
-						},
-					],
-				},
-			},
-			params: {
-				compositeQuery: {
-					panelType: 'table',
-				},
-			},
-		},
-		isLoading: false,
-		isError: false,
-		error: null,
-	},
-];
-
-const mockLoadingQueries = [
-	{
-		data: undefined,
-		isLoading: true,
-		isError: false,
-		error: null,
-	},
-	{
-		data: undefined,
-		isLoading: true,
-		isError: false,
-		error: null,
-	},
-];
-
-const mockErrorQueries = [
-	{
-		data: undefined,
-		isLoading: false,
-		isError: true,
-		error: new Error('API Error'),
-	},
-	{
-		data: undefined,
-		isLoading: false,
-		isError: true,
-		error: new Error('Network Error'),
-	},
-];
-
-const mockEmptyQueries = [
-	{
-		data: {
-			payload: {
-				data: {
-					result: [],
-				},
-			},
-			params: {
-				compositeQuery: {
-					panelType: 'time_series',
-				},
-			},
-		},
-		isLoading: false,
-		isError: false,
-		error: null,
-	},
-	{
-		data: {
-			payload: {
-				data: {
-					result: [],
-				},
-			},
-			params: {
-				compositeQuery: {
-					panelType: 'table',
-				},
-			},
-		},
-		isLoading: false,
-		isError: false,
-		error: null,
-	},
-];
-
-const renderEntityMetrics = (overrides = {}): any => {
-	const defaultProps = {
-		timeRange: mockTimeRange,
-		isModalTimeSelection: false,
-		handleTimeChange: mockHandleTimeChange,
-		selectedInterval: '5m' as Time,
-		entity: mockEntity,
-		entityWidgetInfo: mockEntityWidgetInfo,
-		getEntityQueryPayload: mockGetEntityQueryPayload,
-		queryKey: 'test-query-key',
-		category: InfraMonitoringEntity.PODS,
-		...overrides,
-	};
-
-	return render(
-		<EntityMetrics
-			timeRange={defaultProps.timeRange}
-			isModalTimeSelection={defaultProps.isModalTimeSelection}
-			handleTimeChange={defaultProps.handleTimeChange}
-			selectedInterval={defaultProps.selectedInterval}
-			entity={defaultProps.entity}
-			entityWidgetInfo={defaultProps.entityWidgetInfo}
-			getEntityQueryPayload={defaultProps.getEntityQueryPayload}
-			queryKey={defaultProps.queryKey}
-			category={defaultProps.category}
-		/>,
-	);
-};
-
-const mockChartData: (uPlot.AlignedData | null)[] = [
-	[
-		[1705315200, 1705318800],
-		[42.5, 43.2],
-	], // time_series chart data (AlignedData)
-	null, // table uses tableData
-];
-
-const mockTableData: (import('../utils').MetricsTableData[] | null)[] = [
-	null, // time_series uses chartData
-	[
-		{
-			rows: [
-				{ timestamp: '2024-01-15T10:00:00Z', value: '1024' },
-				{ timestamp: '2024-01-15T10:01:00Z', value: '1028' },
-			],
-			columns: [
-				{ key: 'timestamp', label: 'Timestamp', isValueColumn: false },
-				{ key: 'value', label: 'Value', isValueColumn: true },
-			],
-		},
-	], // table data
-];
-
-const mockQueryPayloads = [
-	{ graphType: 'graph' }, // time_series
-	{ graphType: 'table' }, // table
-];
-
-describe('EntityMetrics', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUseEntityMetrics.mockReturnValue({
-			queries: mockQueries as any,
-			chartData: mockChartData,
-			tableData: mockTableData,
-			queryPayloads: mockQueryPayloads as any,
-		});
-		mockUseQuery.mockReturnValue({
-			data: {
-				data: {
-					data: {
-						variables: {},
-						title: 'Test Dashboard',
-					},
-					id: 'test-dashboard-id',
-				},
-			},
-			isLoading: false,
-			isError: false,
-			refetch: jest.fn(),
-		});
-	});
-
-	it('should render metrics with data', () => {
-		renderEntityMetrics();
-		expect(screen.getByText('CPU Usage')).toBeInTheDocument();
-		expect(screen.getByText('Memory Usage')).toBeInTheDocument();
-		expect(screen.getByTestId('date-time-selection')).toBeInTheDocument();
-		expect(screen.getByTestId('uplot-chart')).toBeInTheDocument();
-		expect(screen.getByTestId('metrics-table')).toBeInTheDocument();
-	});
-
-	it('renders loading state when fetching metrics', () => {
-		mockUseEntityMetrics.mockReturnValue({
-			queries: mockLoadingQueries as any,
-			chartData: [null, null],
-			tableData: [null, null],
-			queryPayloads: mockQueryPayloads as any,
-		});
-		renderEntityMetrics();
-		expect(screen.getAllByText('CPU Usage')).toHaveLength(1);
-		expect(screen.getAllByText('Memory Usage')).toHaveLength(1);
-	});
-
-	it('renders error state when query fails', () => {
-		mockUseEntityMetrics.mockReturnValue({
-			queries: mockErrorQueries as any,
-			chartData: [null, null],
-			tableData: [null, null],
-			queryPayloads: mockQueryPayloads as any,
-		});
-		renderEntityMetrics();
-		expect(screen.getByText('API Error')).toBeInTheDocument();
-		expect(screen.getByText('Network Error')).toBeInTheDocument();
-	});
-
-	it('renders empty state when no metrics data', () => {
-		mockUseEntityMetrics.mockReturnValue({
-			queries: mockEmptyQueries as any,
-			chartData: [[[]], null],
-			tableData: [
-				null,
-				[
-					{
-						rows: [],
-						columns: [],
-					},
-				],
-			],
-			queryPayloads: mockQueryPayloads as any,
-		});
-		renderEntityMetrics();
-		expect(screen.getByTestId('uplot-chart')).toBeInTheDocument();
-		expect(screen.getByTestId('metrics-table')).toBeInTheDocument();
-	});
-
-	it('calls handleTimeChange when datetime selection changes', () => {
-		renderEntityMetrics();
-		expect(screen.getByTestId('date-time-selection')).toBeInTheDocument();
-	});
-
-	it('renders multiple metric widgets', () => {
-		renderEntityMetrics();
-		expect(screen.getByText('CPU Usage')).toBeInTheDocument();
-		expect(screen.getByText('Memory Usage')).toBeInTheDocument();
-	});
-
-	it('handles different panel types correctly', () => {
-		renderEntityMetrics();
-		expect(screen.getByTestId('uplot-chart')).toBeInTheDocument();
-		expect(screen.getByTestId('metrics-table')).toBeInTheDocument();
-	});
-
-	it('applies intersection observer for visibility', () => {
-		renderEntityMetrics();
-		expect(mockUseEntityMetrics).toHaveBeenCalledWith(
-			expect.objectContaining({
-				visibilities: [true, true],
-			}),
-		);
-	});
-
-	it('passes correct parameters to useEntityMetrics hook', () => {
-		renderEntityMetrics();
-		expect(mockUseEntityMetrics).toHaveBeenCalledWith(
-			expect.objectContaining({
-				queryKey: 'test-query-key',
-				timeRange: mockTimeRange,
-				entity: mockEntity,
-				category: InfraMonitoringEntity.PODS,
-			}),
-		);
-	});
-});