feat: use semantic tokens

- Moved AWS-related components to a new directory structure for better organization.
- Updated import paths to reflect the new structure.
- Removed unused components and styles related to the previous integration setup.
- Adjusted constants and integration logic to ensure compatibility with the new structure.

.github/CODEOWNERS

@@ -43,12 +43,6 @@
 /pkg/analytics/ @vikrantgupta25
 /pkg/statsreporter/ @vikrantgupta25
 
-# Emailing Owners
-
-/pkg/emailing/ @vikrantgupta25
-/pkg/types/emailtypes/ @vikrantgupta25
-/templates/email/ @vikrantgupta25
-
 # Querier Owners
 
 /pkg/querier/ @srikanthccv

.gitignore

@@ -228,6 +228,3 @@ cython_debug/
 # LSP config files
 pyrightconfig.json
 
-
-# cursor files
-frontend/.cursor/

.vscode/settings.json

@@ -14,8 +14,5 @@
 	},
 	"[sql]": {
 		"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
-	},
-	"[html]": {
-		"editor.defaultFormatter": "vscode.html-language-features"
 	}
 }

README.de-de.md

@@ -176,6 +176,25 @@ Wir haben Benchmarks veröffentlicht, die Loki mit SigNoz vergleichen. Schauen S
 Wir ❤️ Beiträge zum Projekt, egal ob große oder kleine. Bitte lies dir zuerst die [CONTRIBUTING.md](CONTRIBUTING.md), durch, bevor du anfängst, Beiträge zu SigNoz zu machen.
 Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem #contributing Kanal in unserer [slack community](https://signoz.io/slack)
 
+### Unsere Projektbetreuer
+
+#### Backend
+
+- [Ankit Nayan](https://github.com/ankitnayan)
+- [Nityananda Gohain](https://github.com/nityanandagohain)
+- [Srikanth Chekuri](https://github.com/srikanthccv)
+- [Vishal Sharma](https://github.com/makeavish)
+
+#### Frontend
+
+- [Palash Gupta](https://github.com/palashgdev)
+- [Yunus M](https://github.com/YounixM)
+- [Rajat Dabade](https://github.com/Rajat-Dabade)
+
+#### DevOps
+
+- [Prashant Shahi](https://github.com/prashant-shahi)
+
 <br /><br />
 
 ## Dokumentation

README.md

@@ -221,6 +221,34 @@ We ❤️ contributions big or small. Please read [CONTRIBUTING.md](CONTRIBUTING
 
 Not sure how to get started? Just ping us on `#contributing` in our [slack community](https://signoz.io/slack)
 
+### Project maintainers
+
+#### Backend
+
+- [Ankit Nayan](https://github.com/ankitnayan)
+- [Nityananda Gohain](https://github.com/nityanandagohain)
+- [Srikanth Chekuri](https://github.com/srikanthccv)
+- [Vishal Sharma](https://github.com/makeavish)
+- [Shivanshu Raj Shrivastava](https://github.com/shivanshuraj1333)
+- [Ekansh Gupta](https://github.com/eKuG)
+- [Aniket Agarwal](https://github.com/aniketio-ctrl)
+
+#### Frontend
+
+- [Yunus M](https://github.com/YounixM)
+- [Vikrant Gupta](https://github.com/vikrantgupta25)
+- [Sagar Rajput](https://github.com/SagarRajput-7)
+- [Shaheer Kochai](https://github.com/ahmadshaheer)
+- [Amlan Kumar Nandy](https://github.com/amlannandy)
+- [Sahil Khan](https://github.com/sawhil)
+- [Aditya Singh](https://github.com/aks07)
+- [Abhi Kumar](https://github.com/ahrefabhi)
+
+#### DevOps
+
+- [Prashant Shahi](https://github.com/prashant-shahi)
+- [Vibhu Pandey](https://github.com/therealpandey)
+
 <br /><br />
 
 

README.zh-cn.md

@@ -187,6 +187,25 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric
 
 如果你不知道如何开始？ 只需要在 [slack 社区](https://signoz.io/slack) 通过 `#contributing` 频道联系我们。
 
+### 项目维护人员
+
+#### 后端
+
+- [Ankit Nayan](https://github.com/ankitnayan)
+- [Nityananda Gohain](https://github.com/nityanandagohain)
+- [Srikanth Chekuri](https://github.com/srikanthccv)
+- [Vishal Sharma](https://github.com/makeavish)
+
+#### 前端
+
+- [Palash Gupta](https://github.com/palashgdev)
+- [Yunus M](https://github.com/YounixM)
+- [Rajat Dabade](https://github.com/Rajat-Dabade)
+
+#### 运维开发
+
+- [Prashant Shahi](https://github.com/prashant-shahi)
+
 <br /><br />
 
 ## 文档

conf/example.yaml

@@ -193,15 +193,6 @@ emailing:
   templates:
     # The directory containing the email templates. This directory should contain a list of files defined at pkg/types/emailtypes/template.go.
     directory: /opt/signoz/conf/templates/email
-    format:
-      header:
-        enabled: false
-        logo_url: ""
-      help:
-        enabled: false
-        email: ""
-      footer:
-        enabled: false
   smtp:
     # The SMTP server address.
     address: localhost:25
@@ -294,6 +285,7 @@ flagger:
   config:
     boolean:
       use_span_metrics: true
+      interpolation_enabled: false
       kafka_span_eval: false
     string:
     float:
@@ -308,14 +300,3 @@ user:
       allow_self: true
       # The duration within which a user can reset their password.
       max_token_lifetime: 6h
-  root:
-    # Whether to enable the root user. When enabled, a root user is provisioned
-    # on startup using the email and password below. The root user cannot be
-    # deleted, updated, or have their password changed through the UI.
-    enabled: false
-    # The email address of the root user.
-    email: ""
-    # The password of the root user. Must meet password requirements.
-    password: ""
-    # The name of the organization to create or look up for the root user.
-    org_name: default

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

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

deploy/docker-swarm/docker-compose.yaml

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

deploy/docker/docker-compose.ha.yaml

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

deploy/docker/docker-compose.yaml

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

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

@@ -10,7 +10,6 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/global"
-	"github.com/SigNoz/signoz/pkg/http/handler"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	querierAPI "github.com/SigNoz/signoz/pkg/querier"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
@@ -46,7 +45,7 @@ type APIHandler struct {
 }
 
 // NewAPIHandler returns an APIHandler
-func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.Config) (*APIHandler, error) {
+func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler, error) {
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		RuleManager:                   opts.RulesManager,
@@ -59,7 +58,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
-	}, config)
+	})
 
 	if err != nil {
 		return nil, err
@@ -107,10 +106,7 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v4/query_range", am.ViewAccess(ah.queryRangeV4)).Methods(http.MethodPost)
 
 	// v5
-	router.Handle("/api/v5/query_range", handler.New(
-		am.ViewAccess(ah.queryRangeV5),
-		querierAPI.QueryRangeV5OpenAPIDef,
-	)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v5/query_range", am.ViewAccess(ah.queryRangeV5)).Methods(http.MethodPost)
 
 	router.HandleFunc("/api/v5/substitute_vars", am.ViewAccess(ah.QuerierAPI.ReplaceVariables)).Methods(http.MethodPost)
 

ee/query-service/app/server.go

@@ -175,7 +175,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		GlobalConfig:                  config.Global,
 	}
 
-	apiHandler, err := api.NewAPIHandler(apiOpts, signoz, config)
+	apiHandler, err := api.NewAPIHandler(apiOpts, signoz)
 	if err != nil {
 		return nil, err
 	}

frontend/.cursor/rules/jest-mocking-strategy.mdc

@@ -0,0 +1,77 @@
+---
+description: Global vs local mock strategy for Jest tests
+globs:
+  - "**/*.test.ts"
+  - "**/*.test.tsx"
+  - "**/__tests__/**/*.ts"
+  - "**/__tests__/**/*.tsx"
+alwaysApply: false
+---
+
+# Mock Decision Strategy
+
+## Global Mocks (20+ test files)
+
+- Core infrastructure: react-router-dom, react-query, antd
+- Browser APIs: ResizeObserver, matchMedia, localStorage
+- Utility libraries: date-fns, lodash
+- Available: `uplot` → `__mocks__/uplotMock.ts`
+
+## Local Mocks (5–15 test files)
+
+- Business logic dependencies
+- API endpoints with specific responses
+- Domain-specific components
+- Error scenarios and edge cases
+
+## Decision Tree
+
+```
+Is it used in 20+ test files?
+├─ YES → Use Global Mock
+│   ├─ react-router-dom
+│   ├─ react-query
+│   ├─ antd components
+│   └─ browser APIs
+│
+└─ NO → Is it business logic?
+    ├─ YES → Use Local Mock
+    │   ├─ API endpoints
+    │   ├─ Custom hooks
+    │   └─ Domain components
+    │
+    └─ NO → Is it test-specific?
+        ├─ YES → Use Local Mock
+        │   ├─ Error scenarios
+        │   ├─ Loading states
+        │   └─ Specific data
+        │
+        └─ NO → Consider Global Mock
+            └─ If it becomes frequently used
+```
+
+## Anti-patterns
+
+❌ Don't mock global dependencies locally:
+```ts
+jest.mock('react-router-dom', () => ({ ... }));  // Already globally mocked
+```
+
+❌ Don't create global mocks for test-specific data:
+```ts
+jest.mock('../api/tracesService', () => ({
+  getTraces: jest.fn(() => specificTestData)  // BAD - should be local
+}));
+```
+
+✅ Do use global mocks for infrastructure:
+```ts
+import { useLocation } from 'react-router-dom';
+```
+
+✅ Do create local mocks for business logic:
+```ts
+jest.mock('../api/tracesService', () => ({
+  getTraces: jest.fn(() => mockTracesData)
+}));
+```

frontend/.cursor/rules/jest-test-conventions.mdc

@@ -0,0 +1,124 @@
+---
+description: Core Jest/React Testing Library conventions - harness, MSW, interactions, timers
+globs:
+  - "**/*.test.ts"
+  - "**/*.test.tsx"
+  - "**/__tests__/**/*.ts"
+  - "**/__tests__/**/*.tsx"
+alwaysApply: false
+---
+
+# Jest Test Conventions
+
+Expert developer with Jest, React Testing Library, MSW, and TypeScript. Focus on critical functionality, mock dependencies before imports, test multiple scenarios, write maintainable tests.
+
+**Auto-detect TypeScript**: Check for TypeScript in the project through tsconfig.json or package.json dependencies. Adjust syntax based on this detection.
+
+## Imports
+
+Always import from our harness:
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+```
+For API mocks:
+```ts
+import { server, rest } from 'mocks-server/server';
+```
+❌ Do not import directly from `@testing-library/react`.
+
+## Router
+
+Use the router built into render:
+```ts
+render(<Page />, undefined, { initialRoute: '/traces-explorer' });
+```
+Only mock `useLocation` / `useParams` if the test depends on them.
+
+## Hook Mocks
+
+```ts
+import useFoo from 'hooks/useFoo';
+jest.mock('hooks/useFoo');
+const mockUseFoo = jest.mocked(useFoo);
+mockUseFoo.mockReturnValue(/* minimal shape */ as any);
+```
+Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
+
+## MSW
+
+Global MSW server runs automatically. Override per-test:
+```ts
+server.use(
+  rest.get('*/api/v1/foo', (_req, res, ctx) => res(ctx.status(200), ctx.json({ ok: true })))
+);
+```
+Keep large responses in `mocks-server/__mockdata__/`.
+
+## Interactions
+
+- Prefer `userEvent` for real user interactions (click, type, select, tab).
+- Use `fireEvent` only for low-level/programmatic events not covered by `userEvent` (e.g., scroll, resize, setting `element.scrollTop` for virtualization). Wrap in `act(...)` if needed.
+- Always await interactions:
+```ts
+const user = userEvent.setup({ pointerEventsCheck: 0 });
+await user.click(screen.getByRole('button', { name: /save/i }));
+```
+
+```ts
+// Example: virtualized list scroll (no userEvent helper)
+const scroller = container.querySelector('[data-test-id="virtuoso-scroller"]') as HTMLElement;
+scroller.scrollTop = targetScrollTop;
+act(() => { fireEvent.scroll(scroller); });
+```
+
+## Timers
+
+❌ No global fake timers. ✅ Per-test only:
+```ts
+jest.useFakeTimers();
+const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
+await user.type(screen.getByRole('textbox'), 'query');
+jest.advanceTimersByTime(400);
+jest.useRealTimers();
+```
+
+## Queries
+
+Prefer accessible queries (`getByRole`, `findByRole`, `getByLabelText`). Fallback: visible text. Last resort: `data-testid`.
+
+## Best Practices
+
+- **Critical Functionality**: Prioritize testing business logic and utilities
+- **Dependency Mocking**: Global mocks for infra, local mocks for business logic
+- **Data Scenarios**: Always test valid, invalid, and edge cases
+- **Descriptive Names**: Make test intent clear
+- **Organization**: Group related tests in describe
+- **Consistency**: Match repo conventions
+- **Edge Cases**: Test null, undefined, unexpected values
+- **Limit Scope**: 3–5 focused tests per file
+- **Use Helpers**: `rqSuccess`, `makeUser`, etc.
+- **No Any**: Enforce type safety
+
+## Anti-patterns
+
+❌ Importing RTL directly | ❌ Global fake timers | ❌ Wrapping render in `act(...)` | ❌ Mocking infra locally
+✅ Use harness | ✅ MSW for API | ✅ userEvent + await | ✅ Pin time only for relative-date tests
+
+## Example
+
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+import MyComponent from '../MyComponent';
+
+describe('MyComponent', () => {
+  it('renders and interacts', async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+    server.use(rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 }))));
+    render(<MyComponent />, undefined, { initialRoute: '/foo' });
+    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /refresh/i }));
+    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
+  });
+});
+```

frontend/.cursor/rules/jest-typescript-type-safety.mdc

@@ -0,0 +1,168 @@
+---
+description: TypeScript type safety for Jest tests - mocks, interfaces, no any
+globs:
+  - "**/*.test.ts"
+  - "**/*.test.tsx"
+  - "**/__tests__/**/*.ts"
+  - "**/__tests__/**/*.tsx"
+alwaysApply: false
+---
+
+# TypeScript Type Safety for Jest Tests
+
+**CRITICAL**: All Jest tests MUST be fully type-safe.
+
+## Requirements
+
+- Use proper TypeScript interfaces for all mock data
+- Type all Jest mock functions with `jest.MockedFunction<T>`
+- Use generic types for React components and hooks
+- Define proper return types for mock functions
+- Use `as const` for literal types when needed
+- Avoid `any` type – use proper typing instead
+
+## Mock Function Typing
+
+```ts
+// ✅ GOOD
+const mockFetchUser = jest.fn() as jest.MockedFunction<(id: number) => Promise<ApiResponse<User>>>;
+const mockEventHandler = jest.fn() as jest.MockedFunction<(event: Event) => void>;
+
+// ❌ BAD
+const mockFetchUser = jest.fn() as any;
+```
+
+## Mock Data with Interfaces
+
+```ts
+interface User { id: number; name: string; email: string; }
+interface ApiResponse<T> { data: T; status: number; message: string; }
+
+const mockUser: User = { id: 1, name: 'John Doe', email: 'john@example.com' };
+mockFetchUser.mockResolvedValue({ data: mockUser, status: 200, message: 'Success' });
+```
+
+## Component Props Typing
+
+```ts
+interface ComponentProps { title: string; data: User[]; onUserSelect: (user: User) => void; }
+
+const mockProps: ComponentProps = {
+  title: 'Test',
+  data: [{ id: 1, name: 'John', email: 'john@example.com' }],
+  onUserSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
+};
+render(<TestComponent {...mockProps} />);
+```
+
+## Hook Testing with Types
+
+```ts
+interface UseUserDataReturn {
+  user: User | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+describe('useUserData', () => {
+  it('should return user data with proper typing', () => {
+    const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
+    mockFetchUser.mockResolvedValue({ data: mockUser, status: 200, message: 'Success' });
+    const { result } = renderHook(() => useUserData(1));
+    expect(result.current.user).toEqual(mockUser);
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+});
+```
+
+## Generic Mock Typing
+
+```ts
+interface MockApiResponse<T> { data: T; status: number; }
+
+const mockFetchData = jest.fn() as jest.MockedFunction<
+  <T>(endpoint: string) => Promise<MockApiResponse<T>>
+>;
+mockFetchData<User>('/users').mockResolvedValue({ data: { id: 1, name: 'John' }, status: 200 });
+```
+
+## React Testing Library with Types
+
+```ts
+type TestComponentProps = ComponentProps<typeof TestComponent>;
+
+const renderTestComponent = (props: Partial<TestComponentProps> = {}): RenderResult => {
+  const defaultProps: TestComponentProps = { title: 'Test', data: [], onSelect: jest.fn(), ...props };
+  return render(<TestComponent {...defaultProps} />);
+};
+```
+
+## Error Handling with Types
+
+```ts
+interface ApiError { message: string; code: number; details?: Record<string, unknown>; }
+const mockApiError: ApiError = { message: 'API Error', code: 500, details: { endpoint: '/users' } };
+mockFetchUser.mockRejectedValue(new Error(JSON.stringify(mockApiError)));
+```
+
+## Global Mock Type Safety
+
+```ts
+// In __mocks__/routerMock.ts
+export const mockUseLocation = (overrides: Partial<Location> = {}): Location => ({
+  pathname: '/traces',
+  search: '',
+  hash: '',
+  state: null,
+  key: 'test-key',
+  ...overrides,
+});
+// In test files: const location = useLocation(); // Properly typed from global mock
+```
+
+## TypeScript Configuration for Jest
+
+```json
+// jest.config.ts
+{
+  "preset": "ts-jest/presets/js-with-ts-esm",
+  "globals": {
+    "ts-jest": {
+      "useESM": true,
+      "isolatedModules": true,
+      "tsconfig": "<rootDir>/tsconfig.jest.json"
+    }
+  },
+  "extensionsToTreatAsEsm": [".ts", ".tsx"],
+  "moduleFileExtensions": ["ts", "tsx", "js", "json"]
+}
+```
+
+```json
+// tsconfig.jest.json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["jest", "@testing-library/jest-dom"],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node"
+  },
+  "include": ["src/**/*", "**/*.test.ts", "**/*.test.tsx", "__mocks__/**/*"]
+}
+```
+
+## Type Safety Checklist
+
+- [ ] All mock functions use `jest.MockedFunction<T>`
+- [ ] All mock data has proper interfaces
+- [ ] No `any` types in test files
+- [ ] Generic types are used where appropriate
+- [ ] Error types are properly defined
+- [ ] Component props are typed
+- [ ] Hook return types are defined
+- [ ] API response types are defined
+- [ ] Global mocks are type-safe
+- [ ] Test utilities are properly typed

frontend/.cursorrules

@@ -1,484 +0,0 @@
-# Persona
-You are an expert developer with deep knowledge of Jest, React Testing Library, MSW, and TypeScript, tasked with creating unit tests for this repository.
-
-# Auto-detect TypeScript Usage
-Check for TypeScript in the project through tsconfig.json or package.json dependencies.
-Adjust syntax based on this detection.
-
-# TypeScript Type Safety for Jest Tests
-**CRITICAL**: All Jest tests MUST be fully type-safe with proper TypeScript types.
-
-**Type Safety Requirements:**
-- Use proper TypeScript interfaces for all mock data
-- Type all Jest mock functions with `jest.MockedFunction<T>`
-- Use generic types for React components and hooks
-- Define proper return types for mock functions
-- Use `as const` for literal types when needed
-- Avoid `any` type – use proper typing instead
-
-# Unit Testing Focus
-Focus on critical functionality (business logic, utility functions, component behavior)
-Mock dependencies (API calls, external modules) before imports
-Test multiple data scenarios (valid inputs, invalid inputs, edge cases)
-Write maintainable tests with descriptive names grouped in describe blocks
-
-# Global vs Local Mocks
-**Use Global Mocks for:**
-- High-frequency dependencies (20+ test files)
-- Core infrastructure (react-router-dom, react-query, antd)
-- Standard implementations across the app
-- Browser APIs (ResizeObserver, matchMedia, localStorage)
-- Utility libraries (date-fns, lodash)
-
-**Use Local Mocks for:**
-- Business logic dependencies (5-15 test files)
-- Test-specific behavior (different data per test)
-- API endpoints with specific responses
-- Domain-specific components
-- Error scenarios and edge cases
-
-**Global Mock Files Available (from jest.config.ts):**
-- `uplot` → `__mocks__/uplotMock.ts`
-
-# Repo-specific Testing Conventions
-
-## Imports
-Always import from our harness:
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-```
-For API mocks:
-```ts
-import { server, rest } from 'mocks-server/server';
-```
-Do not import directly from `@testing-library/react`.
-
-## Router
-Use the router built into render:
-```ts
-render(<Page />, undefined, { initialRoute: '/traces-explorer' });
-```
-Only mock `useLocation` / `useParams` if the test depends on them.
-
-## Hook Mocks
-Pattern:
-```ts
-import useFoo from 'hooks/useFoo';
-jest.mock('hooks/useFoo');
-const mockUseFoo = jest.mocked(useFoo);
-mockUseFoo.mockReturnValue(/* minimal shape */ as any);
-```
-Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
-
-## MSW
-Global MSW server runs automatically.
-Override per-test:
-```ts
-server.use(
-  rest.get('*/api/v1/foo', (_req, res, ctx) => res(ctx.status(200), ctx.json({ ok: true })))
-);
-```
-Keep large responses in `mocks-server/__mockdata_`.
-
-## Interactions
-- Prefer `userEvent` for real user interactions (click, type, select, tab).
-- Use `fireEvent` only for low-level/programmatic events not covered by `userEvent` (e.g., scroll, resize, setting `element.scrollTop` for virtualization). Wrap in `act(...)` if needed.
-- Always await interactions:
-```ts
-const user = userEvent.setup({ pointerEventsCheck: 0 });
-await user.click(screen.getByRole('button', { name: /save/i }));
-```
-
-```ts
-// Example: virtualized list scroll (no userEvent helper)
-const scroller = container.querySelector('[data-test-id="virtuoso-scroller"]') as HTMLElement;
-scroller.scrollTop = targetScrollTop;
-act(() => { fireEvent.scroll(scroller); });
-```
-
-## Timers
-❌ No global fake timers.
-✅ Per-test only, for debounce/throttle:
-```ts
-jest.useFakeTimers();
-const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
-await user.type(screen.getByRole('textbox'), 'query');
-jest.advanceTimersByTime(400);
-jest.useRealTimers();
-```
-
-## Queries
-Prefer accessible queries (`getByRole`, `findByRole`, `getByLabelText`).
-Fallback: visible text.
-Last resort: `data-testid`.
-
-# Example Test (using only configured global mocks)
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-import MyComponent from '../MyComponent';
-
-describe('MyComponent', () => {
-  it('renders and interacts', async () => {
-    const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-    server.use(
-      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
-    );
-
-    render(<MyComponent />, undefined, { initialRoute: '/foo' });
-
-    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /refresh/i }));
-    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
-  });
-});
-```
-
-# Anti-patterns
-❌ Importing RTL directly
-❌ Using global fake timers
-❌ Wrapping render in `act(...)`
-❌ Mocking infra dependencies locally (router, react-query)
-✅ Use our harness (`tests/test-utils`)
-✅ Use MSW for API overrides
-✅ Use userEvent + await
-✅ Pin time only in tests that assert relative dates
-
-# Best Practices
-- **Critical Functionality**: Prioritize testing business logic and utilities
-- **Dependency Mocking**: Global mocks for infra, local mocks for business logic
-- **Data Scenarios**: Always test valid, invalid, and edge cases
-- **Descriptive Names**: Make test intent clear
-- **Organization**: Group related tests in describe
-- **Consistency**: Match repo conventions
-- **Edge Cases**: Test null, undefined, unexpected values
-- **Limit Scope**: 3–5 focused tests per file
-- **Use Helpers**: `rqSuccess`, `makeUser`, etc.
-- **No Any**: Enforce type safety
-
-# Example Test
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-import MyComponent from '../MyComponent';
-
-describe('MyComponent', () => {
-  it('renders and interacts', async () => {
-    const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-    server.use(
-      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
-    );
-
-    render(<MyComponent />, undefined, { initialRoute: '/foo' });
-
-    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /refresh/i }));
-    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
-  });
-});
-```
-
-# Anti-patterns
-❌ Importing RTL directly
-❌ Using global fake timers
-❌ Wrapping render in `act(...)`
-❌ Mocking infra dependencies locally (router, react-query)
-✅ Use our harness (`tests/test-utils`)
-✅ Use MSW for API overrides
-✅ Use userEvent + await
-✅ Pin time only in tests that assert relative dates
-
-# TypeScript Type Safety Examples
-
-## Proper Mock Typing
-```ts
-// ✅ GOOD - Properly typed mocks
-interface User {
-  id: number;
-  name: string;
-  email: string;
-}
-
-interface ApiResponse<T> {
-  data: T;
-  status: number;
-  message: string;
-}
-
-// Type the mock functions
-const mockFetchUser = jest.fn() as jest.MockedFunction<(id: number) => Promise<ApiResponse<User>>>;
-const mockUpdateUser = jest.fn() as jest.MockedFunction<(user: User) => Promise<ApiResponse<User>>>;
-
-// Mock implementation with proper typing
-mockFetchUser.mockResolvedValue({
-  data: { id: 1, name: 'John Doe', email: 'john@example.com' },
-  status: 200,
-  message: 'Success'
-});
-
-// ❌ BAD - Using any type
-const mockFetchUser = jest.fn() as any; // Don't do this
-```
-
-## React Component Testing with Types
-```ts
-// ✅ GOOD - Properly typed component testing
-interface ComponentProps {
-  title: string;
-  data: User[];
-  onUserSelect: (user: User) => void;
-  isLoading?: boolean;
-}
-
-const TestComponent: React.FC<ComponentProps> = ({ title, data, onUserSelect, isLoading = false }) => {
-  // Component implementation
-};
-
-describe('TestComponent', () => {
-  it('should render with proper props', () => {
-    // Arrange - Type the props properly
-    const mockProps: ComponentProps = {
-      title: 'Test Title',
-      data: [{ id: 1, name: 'John', email: 'john@example.com' }],
-      onUserSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
-      isLoading: false
-    };
-    
-    // Act
-    render(<TestComponent {...mockProps} />);
-    
-    // Assert
-    expect(screen.getByText('Test Title')).toBeInTheDocument();
-  });
-});
-```
-
-## Hook Testing with Types
-```ts
-// ✅ GOOD - Properly typed hook testing
-interface UseUserDataReturn {
-  user: User | null;
-  loading: boolean;
-  error: string | null;
-  refetch: () => void;
-}
-
-const useUserData = (id: number): UseUserDataReturn => {
-  // Hook implementation
-};
-
-describe('useUserData', () => {
-  it('should return user data with proper typing', () => {
-    // Arrange
-    const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
-    mockFetchUser.mockResolvedValue({
-      data: mockUser,
-      status: 200,
-      message: 'Success'
-    });
-    
-    // Act
-    const { result } = renderHook(() => useUserData(1));
-    
-    // Assert
-    expect(result.current.user).toEqual(mockUser);
-    expect(result.current.loading).toBe(false);
-    expect(result.current.error).toBeNull();
-  });
-});
-```
-
-## Global Mock Type Safety
-```ts
-// ✅ GOOD - Type-safe global mocks
-// In __mocks__/routerMock.ts
-export const mockUseLocation = (overrides: Partial<Location> = {}): Location => ({
-  pathname: '/traces',
-  search: '',
-  hash: '',
-  state: null,
-  key: 'test-key',
-  ...overrides,
-});
-
-// In test files
-const location = useLocation(); // Properly typed from global mock
-expect(location.pathname).toBe('/traces');
-```
-
-# TypeScript Configuration for Jest
-
-## Required Jest Configuration
-```json
-// jest.config.ts
-{
-  "preset": "ts-jest/presets/js-with-ts-esm",
-  "globals": {
-    "ts-jest": {
-      "useESM": true,
-      "isolatedModules": true,
-      "tsconfig": "<rootDir>/tsconfig.jest.json"
-    }
-  },
-  "extensionsToTreatAsEsm": [".ts", ".tsx"],
-  "moduleFileExtensions": ["ts", "tsx", "js", "json"]
-}
-```
-
-## TypeScript Jest Configuration
-```json
-// tsconfig.jest.json
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "types": ["jest", "@testing-library/jest-dom"],
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node"
-  },
-  "include": [
-    "src/**/*",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "__mocks__/**/*"
-  ]
-}
-```
-
-## Common Type Safety Patterns
-
-### Mock Function Typing
-```ts
-// ✅ GOOD - Proper mock function typing
-const mockApiCall = jest.fn() as jest.MockedFunction<typeof apiCall>;
-const mockEventHandler = jest.fn() as jest.MockedFunction<(event: Event) => void>;
-
-// ❌ BAD - Using any
-const mockApiCall = jest.fn() as any;
-```
-
-### Generic Mock Typing
-```ts
-// ✅ GOOD - Generic mock typing
-interface MockApiResponse<T> {
-  data: T;
-  status: number;
-}
-
-const mockFetchData = jest.fn() as jest.MockedFunction<
-  <T>(endpoint: string) => Promise<MockApiResponse<T>>
->;
-
-// Usage
-mockFetchData<User>('/users').mockResolvedValue({
-  data: { id: 1, name: 'John' },
-  status: 200
-});
-```
-
-### React Testing Library with Types
-```ts
-// ✅ GOOD - Typed testing utilities
-import { render, screen, RenderResult } from '@testing-library/react';
-import { ComponentProps } from 'react';
-
-type TestComponentProps = ComponentProps<typeof TestComponent>;
-
-const renderTestComponent = (props: Partial<TestComponentProps> = {}): RenderResult => {
-  const defaultProps: TestComponentProps = {
-    title: 'Test',
-    data: [],
-    onSelect: jest.fn(),
-    ...props
-  };
-  
-  return render(<TestComponent {...defaultProps} />);
-};
-```
-
-### Error Handling with Types
-```ts
-// ✅ GOOD - Typed error handling
-interface ApiError {
-  message: string;
-  code: number;
-  details?: Record<string, unknown>;
-}
-
-const mockApiError: ApiError = {
-  message: 'API Error',
-  code: 500,
-  details: { endpoint: '/users' }
-};
-
-mockFetchUser.mockRejectedValue(new Error(JSON.stringify(mockApiError)));
-```
-
-## Type Safety Checklist
-- [ ] All mock functions use `jest.MockedFunction<T>`
-- [ ] All mock data has proper interfaces
-- [ ] No `any` types in test files
-- [ ] Generic types are used where appropriate
-- [ ] Error types are properly defined
-- [ ] Component props are typed
-- [ ] Hook return types are defined
-- [ ] API response types are defined
-- [ ] Global mocks are type-safe
-- [ ] Test utilities are properly typed
-
-# Mock Decision Tree
-```
-Is it used in 20+ test files?
-├─ YES → Use Global Mock
-│   ├─ react-router-dom
-│   ├─ react-query
-│   ├─ antd components
-│   └─ browser APIs
-│
-└─ NO → Is it business logic?
-    ├─ YES → Use Local Mock
-    │   ├─ API endpoints
-    │   ├─ Custom hooks
-    │   └─ Domain components
-    │
-    └─ NO → Is it test-specific?
-        ├─ YES → Use Local Mock
-        │   ├─ Error scenarios
-        │   ├─ Loading states
-        │   └─ Specific data
-        │
-        └─ NO → Consider Global Mock
-            └─ If it becomes frequently used
-```
-
-# Common Anti-Patterns to Avoid
-
-❌ **Don't mock global dependencies locally:**
-```js
-// BAD - This is already globally mocked
-jest.mock('react-router-dom', () => ({ ... }));
-```
-
-❌ **Don't create global mocks for test-specific data:**
-```js
-// BAD - This should be local
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => specificTestData)
-}));
-```
-
-✅ **Do use global mocks for infrastructure:**
-```js
-// GOOD - Use global mock
-import { useLocation } from 'react-router-dom';
-```
-
-✅ **Do create local mocks for business logic:**
-```js
-// GOOD - Local mock for specific test needs
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => mockTracesData)
-}));
-```

frontend/package.json

@@ -52,17 +52,20 @@
 		"@signozhq/combobox": "0.0.2",
 		"@signozhq/command": "0.0.0",
 		"@signozhq/design-tokens": "2.1.1",
+		"@signozhq/dialog": "0.0.2",
+		"@signozhq/drawer": "0.0.4",
 		"@signozhq/icons": "0.1.0",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
-		"@signozhq/radio-group": "0.0.2",
 		"@signozhq/resizable": "0.0.0",
 		"@signozhq/sonner": "0.1.0",
 		"@signozhq/table": "0.3.7",
+		"@signozhq/tabs": "0.0.11",
 		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",
 		"@uiw/codemirror-theme-copilot": "4.23.11",
+		"@uiw/codemirror-theme-dracula": "4.25.4",
 		"@uiw/codemirror-theme-github": "4.24.1",
 		"@uiw/react-codemirror": "4.23.10",
 		"@uiw/react-md-editor": "3.23.5",

frontend/public/svgs/dotted-double-line.svg

@@ -0,0 +1,312 @@
+<svg width="929" height="8" viewBox="0 0 929 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="2" height="2" rx="1" fill="#242834"/>
+<rect x="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="12" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="18" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="24" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="30" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="36" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="42" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="48" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="54" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="60" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="66" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="72" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="78" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="84" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="90" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="96" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="102" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="108" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="114" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="120" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="126" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="132" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="138" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="144" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="150" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="156" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="162" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="168" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="174" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="180" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="186" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="192" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="198" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="204" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="210" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="216" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="222" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="228" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="234" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="240" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="246" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="252" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="258" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="264" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="270" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="276" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="282" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="288" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="294" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="300" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="306" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="312" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="318" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="324" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="330" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="336" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="342" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="348" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="354" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="360" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="366" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="372" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="378" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="384" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="390" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="396" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="402" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="408" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="414" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="420" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="426" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="432" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="438" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="444" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="450" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="456" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="462" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="468" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="474" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="480" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="486" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="492" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="498" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="504" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="510" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="516" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="522" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="528" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="534" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="540" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="546" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="552" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="558" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="564" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="570" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="576" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="582" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="588" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="594" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="600" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="606" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="612" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="618" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="624" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="630" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="636" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="642" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="648" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="654" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="660" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="666" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="672" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="678" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="684" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="690" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="696" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="702" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="708" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="714" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="720" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="726" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="732" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="738" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="744" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="750" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="756" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="762" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="768" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="774" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="780" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="786" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="792" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="798" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="804" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="810" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="816" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="822" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="828" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="834" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="840" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="846" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="852" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="858" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="864" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="870" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="876" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="882" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="888" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="894" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="900" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="906" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="912" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="918" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="924" width="2" height="2" rx="1" fill="#242834"/>
+<rect y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="6" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="12" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="18" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="24" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="30" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="36" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="42" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="48" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="54" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="60" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="66" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="72" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="78" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="84" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="90" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="96" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="102" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="108" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="114" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="120" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="126" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="132" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="138" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="144" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="150" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="156" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="162" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="168" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="174" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="180" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="186" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="192" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="198" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="204" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="210" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="216" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="222" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="228" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="234" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="240" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="246" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="252" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="258" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="264" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="270" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="276" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="282" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="288" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="294" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="300" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="306" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="312" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="318" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="324" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="330" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="336" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="342" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="348" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="354" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="360" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="366" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="372" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="378" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="384" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="390" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="396" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="402" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="408" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="414" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="420" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="426" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="432" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="438" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="444" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="450" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="456" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="462" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="468" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="474" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="480" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="486" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="492" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="498" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="504" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="510" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="516" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="522" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="528" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="534" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="540" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="546" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="552" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="558" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="564" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="570" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="576" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="582" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="588" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="594" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="600" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="606" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="612" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="618" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="624" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="630" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="636" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="642" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="648" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="654" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="660" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="666" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="672" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="678" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="684" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="690" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="696" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="702" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="708" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="714" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="720" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="726" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="732" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="738" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="744" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="750" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="756" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="762" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="768" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="774" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="780" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="786" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="792" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="798" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="804" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="810" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="816" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="822" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="828" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="834" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="840" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="846" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="852" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="858" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="864" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="870" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="876" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="882" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="888" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="894" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="900" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="906" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="912" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="918" y="6" width="2" height="2" rx="1" fill="#242834"/>
+<rect x="924" y="6" width="2" height="2" rx="1" fill="#242834"/>
+</svg>

frontend/src/AppRoutes/pageComponents.ts

@@ -253,12 +253,18 @@ export const ShortcutsPage = Loadable(
 	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Settings'),
 );
 
-export const InstalledIntegrations = Loadable(
+export const Integrations = Loadable(
 	() =>
 		import(
 			/* webpackChunkName: "InstalledIntegrations" */ 'pages/IntegrationsModulePage'
 		),
 );
+export const IntegrationsDetailsPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "IntegrationsDetailsPage" */ 'pages/IntegrationsDetailsPage'
+		),
+);
 
 export const MessagingQueuesMainPage = Loadable(
 	() =>

frontend/src/AppRoutes/routes.ts

@@ -20,7 +20,8 @@ import {
 	ForgotPassword,
 	Home,
 	InfrastructureMonitoring,
-	InstalledIntegrations,
+	Integrations,
+	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
 	LiveLogs,
@@ -389,10 +390,17 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
+	{
+		path: ROUTES.INTEGRATIONS_DETAIL,
+		exact: true,
+		component: IntegrationsDetailsPage,
+		isPrivate: true,
+		key: 'INTEGRATIONS_DETAIL',
+	},
 	{
 		path: ROUTES.INTEGRATIONS,
 		exact: true,
-		component: InstalledIntegrations,
+		component: Integrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},

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

@@ -1,107 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	MutationFunction,
-	UseMutationOptions,
-	UseMutationResult,
-} from 'react-query';
-import { useMutation } from 'react-query';
-
-import { GeneratedAPIInstance } from '../../../index';
-import type {
-	Querybuildertypesv5QueryRangeRequestDTO,
-	QueryRangeV5200,
-	RenderErrorResponseDTO,
-} from '../sigNoz.schemas';
-
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
-/**
- * Execute a composite query over a time range. Supports builder queries (traces, logs, metrics), formulas, trace operators, PromQL, and ClickHouse SQL.
- * @summary Query range
- */
-export const queryRangeV5 = (
-	querybuildertypesv5QueryRangeRequestDTO: Querybuildertypesv5QueryRangeRequestDTO,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<QueryRangeV5200>({
-		url: `/api/v5/query_range`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: querybuildertypesv5QueryRangeRequestDTO,
-		signal,
-	});
-};
-
-export const getQueryRangeV5MutationOptions = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof queryRangeV5>>,
-		TError,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof queryRangeV5>>,
-	TError,
-	{ data: Querybuildertypesv5QueryRangeRequestDTO },
-	TContext
-> => {
-	const mutationKey = ['queryRangeV5'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof queryRangeV5>>,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return queryRangeV5(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type QueryRangeV5MutationResult = NonNullable<
-	Awaited<ReturnType<typeof queryRangeV5>>
->;
-export type QueryRangeV5MutationBody = Querybuildertypesv5QueryRangeRequestDTO;
-export type QueryRangeV5MutationError = RenderErrorResponseDTO;
-
-/**
- * @summary Query range
- */
-export const useQueryRangeV5 = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof queryRangeV5>>,
-		TError,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof queryRangeV5>>,
-	TError,
-	{ data: Querybuildertypesv5QueryRangeRequestDTO },
-	TContext
-> => {
-	const mutationOptions = getQueryRangeV5MutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

frontend/src/api/integration/aws/index.ts

@@ -5,13 +5,13 @@ import {
 	ServiceData,
 	UpdateServiceConfigPayload,
 	UpdateServiceConfigResponse,
-} from 'container/CloudIntegrationPage/ServicesSection/types';
+} from 'container/Integrations/CloudIntegration/AmazonWebServices/types';
 import {
-	AccountConfigPayload,
 	AccountConfigResponse,
-	ConnectionParams,
+	AWSAccountConfigPayload,
 	ConnectionUrlResponse,
 } from 'types/api/integrations/aws';
+import { ConnectionParams } from 'types/api/integrations/types';
 
 export const getAwsAccounts = async (): Promise<CloudAccount[]> => {
 	const response = await axios.get('/cloud-integrations/aws/accounts');
@@ -60,7 +60,7 @@ export const generateConnectionUrl = async (params: {
 
 export const updateAccountConfig = async (
 	accountId: string,
-	payload: AccountConfigPayload,
+	payload: AWSAccountConfigPayload,
 ): Promise<AccountConfigResponse> => {
 	const response = await axios.post<AccountConfigResponse>(
 		`/cloud-integrations/aws/accounts/${accountId}/config`,

frontend/src/api/integration/index.ts

@@ -0,0 +1,122 @@
+import axios from 'api';
+import {
+	CloudAccount,
+	ServiceData,
+} from 'container/Integrations/CloudIntegration/AmazonWebServices/types';
+import {
+	AzureCloudAccountConfig,
+	AzureService,
+	AzureServiceConfigPayload,
+} from 'container/Integrations/types';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	AccountConfigResponse,
+	AWSAccountConfigPayload,
+} from 'types/api/integrations/aws';
+import {
+	AzureAccountConfig,
+	ConnectionParams,
+	IAzureDeploymentCommands,
+} from 'types/api/integrations/types';
+
+export const getCloudIntegrationAccounts = async (
+	cloudServiceId: string,
+): Promise<CloudAccount[]> => {
+	const response = await axios.get(
+		`/cloud-integrations/${cloudServiceId}/accounts`,
+	);
+
+	return response.data.data.accounts;
+};
+
+export const getCloudIntegrationServices = async (
+	cloudServiceId: string,
+	cloudAccountId?: string,
+): Promise<AzureService[]> => {
+	const params = cloudAccountId
+		? { cloud_account_id: cloudAccountId }
+		: undefined;
+
+	const response = await axios.get(
+		`/cloud-integrations/${cloudServiceId}/services`,
+		{
+			params,
+		},
+	);
+
+	return response.data.data.services;
+};
+
+export const getCloudIntegrationServiceDetails = async (
+	cloudServiceId: string,
+	serviceId: string,
+	cloudAccountId?: string,
+): Promise<ServiceData> => {
+	const params = cloudAccountId
+		? { cloud_account_id: cloudAccountId }
+		: undefined;
+	const response = await axios.get(
+		`/cloud-integrations/${cloudServiceId}/services/${serviceId}`,
+		{ params },
+	);
+	return response.data.data;
+};
+
+export const updateAccountConfig = async (
+	cloudServiceId: string,
+	accountId: string,
+	payload: AWSAccountConfigPayload | AzureAccountConfig,
+): Promise<AccountConfigResponse> => {
+	const response = await axios.post<AccountConfigResponse>(
+		`/cloud-integrations/${cloudServiceId}/accounts/${accountId}/config`,
+		payload,
+	);
+	return response.data;
+};
+
+export const updateServiceConfig = async (
+	cloudServiceId: string,
+	serviceId: string,
+	payload: AzureServiceConfigPayload,
+): Promise<AzureServiceConfigPayload> => {
+	const response = await axios.post<AzureServiceConfigPayload>(
+		`/cloud-integrations/${cloudServiceId}/services/${serviceId}/config`,
+		payload,
+	);
+	return response.data;
+};
+
+export const getConnectionParams = async (
+	cloudServiceId: string,
+): Promise<ConnectionParams> => {
+	const response = await axios.get(
+		`/cloud-integrations/${cloudServiceId}/accounts/generate-connection-params`,
+	);
+	return response.data.data;
+};
+
+export const getAzureDeploymentCommands = async (params: {
+	agent_config: ConnectionParams;
+	account_config: AzureCloudAccountConfig;
+}): Promise<IAzureDeploymentCommands> => {
+	const response = await axios.post(
+		`/cloud-integrations/azure/accounts/generate-connection-url`,
+		params,
+	);
+
+	return response.data.data;
+};
+
+export const removeIntegrationAccount = async ({
+	cloudServiceId,
+	accountId,
+}: {
+	cloudServiceId: string;
+	accountId: string;
+}): Promise<SuccessResponse<Record<string, never>> | ErrorResponse> => {
+	const response = await axios.post(
+		`/cloud-integrations/${cloudServiceId}/accounts/${accountId}/disconnect`,
+	);
+
+	return response.data;
+};

frontend/src/api/v5/queryRange/convertV5Response.test.ts

@@ -73,7 +73,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'time_series',
 			data: { results: [timeSeries] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		const params = makeBaseParams('time_series', [
@@ -156,7 +156,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'scalar',
 			data: { results: [scalar] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		const params = makeBaseParams('scalar', [
@@ -239,7 +239,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'scalar',
 			data: { results: [scalar] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		const params = makeBaseParams('scalar', [

frontend/src/api/v5/queryRange/convertV5Response.ts

@@ -388,7 +388,6 @@ export function convertV5ResponseToLegacy(
 					warnings: v5Data?.data?.warning || [],
 				},
 				warning: v5Data?.warning || undefined,
-				meta: v5Data?.meta,
 			},
 			warning: v5Data?.warning || undefined,
 		};
@@ -407,7 +406,6 @@ export function convertV5ResponseToLegacy(
 		payload: {
 			data: convertedData,
 			warning: v5Response.payload?.data?.warning || undefined,
-			meta: v5Data?.meta,
 		},
 	};
 

frontend/src/auto-import-registry.d.ts

@@ -18,11 +18,13 @@ import '@signozhq/checkbox';
 import '@signozhq/combobox';
 import '@signozhq/command';
 import '@signozhq/design-tokens';
+import '@signozhq/dialog';
+import '@signozhq/drawer';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
-import '@signozhq/radio-group';
 import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/table';
+import '@signozhq/tabs';
 import '@signozhq/tooltip';

frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/CloudIntegrationAccounts.styles.scss

@@ -0,0 +1,109 @@
+.cloud-integration-accounts {
+	padding: 0px 16px;
+
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.selected-cloud-integration-account-section {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		.selected-cloud-integration-account-section-header {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+
+			border-radius: 4px;
+			border: 1px solid var(--l3-background);
+			background: var(--l1-background);
+
+			.selected-cloud-integration-account-section-header-title {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				gap: 8px;
+
+				.selected-cloud-integration-account-status {
+					display: flex;
+					border-right: 1px solid var(--l3-background);
+					border-radius: none;
+					width: 32px;
+					height: 32px;
+
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border-radius: 4px;
+					line-height: 32px;
+				}
+
+				.selected-cloud-integration-account-section-header-title-text {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					gap: 16px;
+
+					.azure-cloud-account-selector {
+						.ant-select {
+							background-color: transparent !important;
+							border: none !important;
+							box-shadow: none !important;
+
+							.ant-select-selector {
+								background: transparent !important;
+								border: none !important;
+								box-shadow: none !important;
+							}
+						}
+					}
+				}
+			}
+
+			.selected-cloud-integration-account-settings {
+				display: flex;
+				flex-direction: row;
+				gap: 16px;
+				line-height: 32px;
+				margin-right: 8px;
+				cursor: pointer;
+			}
+		}
+
+		.account-settings-container {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		}
+
+		.add-new-cloud-integration-account-button {
+			display: flex;
+			flex-direction: row;
+			gap: 16px;
+			line-height: 32px;
+			margin-right: 8px;
+			cursor: pointer;
+		}
+	}
+}
+
+.cloud-integration-accounts-drawer-content {
+	height: 100%;
+	max-height: calc(100vh - 120px); // Account for drawer header and padding
+	overflow-y: auto;
+	overflow-x: hidden;
+	display: flex;
+	flex-direction: column;
+
+	&::-webkit-scrollbar {
+		width: 0.2rem;
+	}
+
+	.edit-account-content,
+	.add-new-account-content {
+		flex: 1;
+		min-height: 0; // Allows flex children to shrink below content size
+	}
+}

frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/CloudIntegrationAccounts.tsx

@@ -0,0 +1,165 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Color } from '@signozhq/design-tokens';
+import { DrawerWrapper } from '@signozhq/drawer';
+import { Select } from 'antd';
+import ConnectNewAzureAccount from 'container/Integrations/CloudIntegration/AzureServices/AzureAccount/ConnectNewAzureAccount';
+import EditAzureAccount from 'container/Integrations/CloudIntegration/AzureServices/AzureAccount/EditAzureAccount';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { CloudAccount } from 'container/Integrations/types';
+import { useGetConnectionParams } from 'hooks/integration/useGetConnectionParams';
+import useAxiosError from 'hooks/useAxiosError';
+import { Dot, PencilLine, Plus } from 'lucide-react';
+
+import './CloudIntegrationAccounts.styles.scss';
+
+export type DrawerMode = 'edit' | 'add';
+
+export default function CloudIntegrationAccounts({
+	selectedAccount,
+	accounts,
+	isLoadingAccounts,
+	onSelectAccount,
+	refetchAccounts,
+}: {
+	selectedAccount: CloudAccount | null;
+	accounts: CloudAccount[];
+	isLoadingAccounts: boolean;
+	onSelectAccount: (account: CloudAccount) => void;
+	refetchAccounts: () => void;
+}): JSX.Element {
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const [mode, setMode] = useState<DrawerMode>('add');
+
+	const handleDrawerOpenChange = (open: boolean): void => {
+		setIsDrawerOpen(open);
+	};
+
+	const handleEditAccount = (): void => {
+		setMode('edit');
+		setIsDrawerOpen(true);
+	};
+
+	const handleAddNewAccount = (): void => {
+		setMode('add');
+		setIsDrawerOpen(true);
+	};
+
+	const handleError = useAxiosError();
+
+	const {
+		data: connectionParams,
+		isLoading: isConnectionParamsLoading,
+	} = useGetConnectionParams({
+		cloudServiceId: INTEGRATION_TYPES.AZURE,
+		options: { onError: handleError },
+	});
+
+	const handleSelectAccount = (value: string): void => {
+		const account = accounts.find(
+			(account) => account.cloud_account_id === value,
+		);
+
+		if (account) {
+			onSelectAccount(account);
+		}
+	};
+
+	const handleAccountConnected = (): void => {
+		refetchAccounts();
+	};
+
+	const handleAccountUpdated = (): void => {
+		refetchAccounts();
+	};
+
+	const renderDrawerContent = (): JSX.Element => {
+		return (
+			<div className="cloud-integration-accounts-drawer-content">
+				{mode === 'edit' ? (
+					<div className="edit-account-content">
+						<EditAzureAccount
+							selectedAccount={selectedAccount as CloudAccount}
+							connectionParams={connectionParams || {}}
+							isConnectionParamsLoading={isConnectionParamsLoading}
+							onAccountUpdated={handleAccountUpdated}
+						/>
+					</div>
+				) : (
+					<div className="add-new-account-content">
+						<ConnectNewAzureAccount
+							connectionParams={connectionParams || {}}
+							isConnectionParamsLoading={isConnectionParamsLoading}
+							onAccountConnected={handleAccountConnected}
+						/>
+					</div>
+				)}
+			</div>
+		);
+	};
+
+	return (
+		<div className="cloud-integration-accounts">
+			{selectedAccount && (
+				<div className="selected-cloud-integration-account-section">
+					<div className="selected-cloud-integration-account-section-header">
+						<div className="selected-cloud-integration-account-section-header-title">
+							<div className="selected-cloud-integration-account-status">
+								<Dot size={24} color={Color.BG_FOREST_500} />
+							</div>
+							<div className="selected-cloud-integration-account-section-header-title-text">
+								Subscription ID :
+								<span className="azure-cloud-account-selector">
+									<Select
+										value={selectedAccount?.cloud_account_id}
+										options={accounts.map((account) => ({
+											label: account.cloud_account_id,
+											value: account.cloud_account_id,
+										}))}
+										onChange={handleSelectAccount}
+										loading={isLoadingAccounts}
+										placeholder="Select Account"
+									/>
+								</span>
+							</div>
+						</div>
+						<div className="selected-cloud-integration-account-settings">
+							<Button
+								variant="link"
+								color="secondary"
+								prefixIcon={<PencilLine size={14} />}
+								onClick={handleEditAccount}
+							>
+								Edit Account
+							</Button>
+
+							<Button
+								variant="link"
+								color="secondary"
+								prefixIcon={<Plus size={14} />}
+								onClick={handleAddNewAccount}
+							>
+								Add New Account
+							</Button>
+						</div>
+					</div>
+				</div>
+			)}
+
+			<div className="account-settings-container">
+				<DrawerWrapper
+					open={isDrawerOpen}
+					onOpenChange={handleDrawerOpenChange}
+					type="panel"
+					header={{
+						title: mode === 'add' ? 'Connect with Azure' : 'Edit Azure Account',
+					}}
+					content={renderDrawerContent()}
+					showCloseButton
+					allowOutsideClick={mode === 'edit'}
+					direction="right"
+				/>
+			</div>
+		</div>
+	);
+}

frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/index.tsx

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

frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/CloudIntegrationsHeader.styles.scss

@@ -0,0 +1,50 @@
+.cloud-integrations-header-section {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	border-bottom: 1px solid var(--l3-background);
+
+	.cloud-integrations-header {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding: 16px;
+		padding-bottom: 0px;
+		gap: 16px;
+
+		.cloud-integrations-title-section {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+
+			.cloud-integrations-title {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+
+				.cloud-integrations-icon {
+					width: 40px;
+					height: 40px;
+				}
+
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 16px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 32px; /* 200% */
+				letter-spacing: -0.08px;
+			}
+
+			.cloud-integrations-description {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+	}
+}

frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/CloudIntegrationsHeader.tsx

@@ -0,0 +1,61 @@
+import {
+	AWS_INTEGRATION,
+	AZURE_INTEGRATION,
+} from 'container/Integrations/constants';
+import { CloudAccount, IntegrationType } from 'container/Integrations/types';
+
+import CloudIntegrationAccounts from '../CloudIntegrationAccounts';
+
+import './CloudIntegrationsHeader.styles.scss';
+
+export default function CloudIntegrationsHeader({
+	cloudServiceId,
+	selectedAccount,
+	accounts,
+	isLoadingAccounts,
+	onSelectAccount,
+	refetchAccounts,
+}: {
+	selectedAccount: CloudAccount | null;
+	accounts: CloudAccount[] | [];
+	isLoadingAccounts: boolean;
+	onSelectAccount: (account: CloudAccount) => void;
+	cloudServiceId: IntegrationType;
+	refetchAccounts: () => void;
+}): JSX.Element {
+	const INTEGRATION_DATA =
+		cloudServiceId === IntegrationType.AWS_SERVICES
+			? AWS_INTEGRATION
+			: AZURE_INTEGRATION;
+
+	return (
+		<div className="cloud-integrations-header-section">
+			<div className="cloud-integrations-header">
+				<div className="cloud-integrations-title-section">
+					<div className="cloud-integrations-title">
+						<img
+							className="cloud-integrations-icon"
+							src={INTEGRATION_DATA.icon}
+							alt={INTEGRATION_DATA.icon_alt}
+						/>
+
+						{INTEGRATION_DATA.title}
+					</div>
+					<div className="cloud-integrations-description">
+						{INTEGRATION_DATA.description}
+					</div>
+				</div>
+			</div>
+
+			<div className="cloud-integrations-accounts-list">
+				<CloudIntegrationAccounts
+					selectedAccount={selectedAccount}
+					accounts={accounts}
+					isLoadingAccounts={isLoadingAccounts}
+					onSelectAccount={onSelectAccount}
+					refetchAccounts={refetchAccounts}
+				/>
+			</div>
+		</div>
+	);
+}

frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/index.tsx

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

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss

@@ -0,0 +1,34 @@
+.cloud-service-data-collected {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.cloud-service-data-collected-table {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		.cloud-service-data-collected-table-heading {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 8px;
+
+			color: var(--l2-foreground);
+
+			/* Bifrost (Ancient)/Content/sm */
+			font-family: Inter;
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+		}
+
+		.cloud-service-data-collected-table-logs {
+			border-radius: 6px;
+			border: 1px solid var(--l3-background);
+			background: var(--l1-background);
+		}
+	}
+}

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -1,6 +1,8 @@
 import { Table } from 'antd';
+import { ServiceData } from 'container/Integrations/CloudIntegration/AmazonWebServices/types';
+import { BarChart2, ScrollText } from 'lucide-react';
 
-import { ServiceData } from './types';
+import './CloudServiceDataCollected.styles.scss';
 
 function CloudServiceDataCollected({
 	logsData,
@@ -61,26 +63,32 @@ function CloudServiceDataCollected({
 	return (
 		<div className="cloud-service-data-collected">
 			{logsData && logsData.length > 0 && (
-				<div className="cloud-service-data-collected__table">
-					<div className="cloud-service-data-collected__table-heading">Logs</div>
+				<div className="cloud-service-data-collected-table">
+					<div className="cloud-service-data-collected-table-heading">
+						<ScrollText size={14} />
+						Logs
+					</div>
 					<Table
 						columns={logsColumns}
 						dataSource={logsData}
 						// eslint-disable-next-line react/jsx-props-no-spreading
 						{...tableProps}
-						className="cloud-service-data-collected__table-logs"
+						className="cloud-service-data-collected-table-logs"
 					/>
 				</div>
 			)}
 			{metricsData && metricsData.length > 0 && (
-				<div className="cloud-service-data-collected__table">
-					<div className="cloud-service-data-collected__table-heading">Metrics</div>
+				<div className="cloud-service-data-collected-table">
+					<div className="cloud-service-data-collected-table-heading">
+						<BarChart2 size={14} />
+						Metrics
+					</div>
 					<Table
 						columns={metricsColumns}
 						dataSource={metricsData}
 						// eslint-disable-next-line react/jsx-props-no-spreading
 						{...tableProps}
-						className="cloud-service-data-collected__table-metrics"
+						className="cloud-service-data-collected-table-metrics"
 					/>
 				</div>
 			)}

frontend/src/components/CodeBlock/CodeBlock.styles.scss

@@ -0,0 +1,39 @@
+.code-block-container {
+	position: relative;
+	border-radius: 4px;
+	overflow: hidden;
+
+	.code-block-copy-btn {
+		position: absolute;
+		top: 50%;
+		right: 8px;
+		transform: translateY(-50%);
+		z-index: 10;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 6px 8px;
+		color: var(--bg-vanilla-100);
+		transition: color 0.15s ease;
+
+		&.copied {
+			background-color: var(--bg-robin-500);
+		}
+	}
+
+	// CodeMirror wrapper
+	.code-block-editor {
+		border-radius: 4px;
+
+		.cm-editor {
+			border-radius: 4px;
+			font-size: 13px;
+			line-height: 1.5;
+			font-family: 'Space Mono', monospace;
+		}
+
+		.cm-scroller {
+			font-family: 'Space Mono', monospace;
+		}
+	}
+}

frontend/src/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,145 @@
+import { useCallback, useMemo, useState } from 'react';
+import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
+import { javascript } from '@codemirror/lang-javascript';
+import { Button } from '@signozhq/button';
+import { dracula } from '@uiw/codemirror-theme-dracula';
+import { githubLight } from '@uiw/codemirror-theme-github';
+import CodeMirror, {
+	EditorState,
+	EditorView,
+	Extension,
+} from '@uiw/react-codemirror';
+import cx from 'classnames';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import './CodeBlock.styles.scss';
+
+export type CodeBlockLanguage =
+	| 'javascript'
+	| 'typescript'
+	| 'js'
+	| 'ts'
+	| 'json'
+	| 'bash'
+	| 'shell'
+	| 'text';
+
+export type CodeBlockTheme = 'light' | 'dark' | 'auto';
+
+interface CodeBlockProps {
+	/** The code content to display */
+	value: string;
+	/** Language for syntax highlighting */
+	language?: CodeBlockLanguage;
+	/** Theme: 'light' | 'dark' | 'auto' (follows app dark mode when 'auto') */
+	theme?: CodeBlockTheme;
+	/** Show line numbers */
+	lineNumbers?: boolean;
+	/** Show copy button */
+	showCopyButton?: boolean;
+	/** Custom class name for the container */
+	className?: string;
+	/** Max height in pixels - enables scrolling when content exceeds */
+	maxHeight?: number | string;
+	/** Callback when copy is clicked */
+	onCopy?: (copiedText: string) => void;
+}
+
+const LANGUAGE_EXTENSION_MAP: Record<
+	CodeBlockLanguage,
+	ReturnType<typeof javascript> | undefined
+> = {
+	javascript: javascript({ jsx: true }),
+	typescript: javascript({ jsx: true }),
+	js: javascript({ jsx: true }),
+	ts: javascript({ jsx: true }),
+	json: javascript(), // JSON is valid JS; proper json() would require @codemirror/lang-json
+	bash: undefined,
+	shell: undefined,
+	text: undefined,
+};
+
+function CodeBlock({
+	value,
+	language = 'text',
+	theme: themeProp = 'auto',
+	lineNumbers = true,
+	showCopyButton = true,
+	className,
+	maxHeight,
+	onCopy,
+}: CodeBlockProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	const [isCopied, setIsCopied] = useState(false);
+
+	const resolvedDark = themeProp === 'auto' ? isDarkMode : themeProp === 'dark';
+	const theme = resolvedDark ? dracula : githubLight;
+
+	const extensions = useMemo((): Extension[] => {
+		const langExtension = LANGUAGE_EXTENSION_MAP[language];
+		return [
+			EditorState.readOnly.of(true),
+			EditorView.editable.of(false),
+			EditorView.lineWrapping,
+			...(langExtension ? [langExtension] : []),
+		];
+	}, [language]);
+
+	const handleCopy = useCallback((): void => {
+		navigator.clipboard.writeText(value).then(() => {
+			setIsCopied(true);
+			onCopy?.(value);
+			setTimeout(() => setIsCopied(false), 2000);
+		});
+	}, [value, onCopy]);
+
+	return (
+		<div className={cx('code-block-container', className)}>
+			{showCopyButton && (
+				<Button
+					variant="solid"
+					size="xs"
+					color="secondary"
+					className={cx('code-block-copy-btn', { copied: isCopied })}
+					onClick={handleCopy}
+					aria-label={isCopied ? 'Copied' : 'Copy code'}
+					title={isCopied ? 'Copied' : 'Copy code'}
+				>
+					{isCopied ? <CheckOutlined /> : <CopyOutlined />}
+				</Button>
+			)}
+			<CodeMirror
+				className="code-block-editor"
+				value={value}
+				theme={theme}
+				readOnly
+				editable={false}
+				extensions={extensions}
+				basicSetup={{
+					lineNumbers,
+					highlightActiveLineGutter: false,
+					highlightActiveLine: false,
+					highlightSelectionMatches: true,
+					drawSelection: true,
+					syntaxHighlighting: true,
+					bracketMatching: true,
+					history: false,
+					foldGutter: false,
+					autocompletion: false,
+					defaultKeymap: false,
+					searchKeymap: true,
+					historyKeymap: false,
+					foldKeymap: false,
+					completionKeymap: false,
+					closeBrackets: false,
+					indentOnInput: false,
+				}}
+				style={{
+					maxHeight: maxHeight ?? 'auto',
+				}}
+			/>
+		</div>
+	);
+}
+
+export default CodeBlock;

frontend/src/components/CodeBlock/index.ts

@@ -0,0 +1,2 @@
+export type { CodeBlockLanguage, CodeBlockTheme } from './CodeBlock';
+export { default as CodeBlock } from './CodeBlock';

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

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

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

@@ -5,8 +5,8 @@ import { toast } from '@signozhq/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
+import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { handleContactSupport } from 'pages/Integrations/utils';
 
 import FeedbackModal from '../FeedbackModal';
 
@@ -31,7 +31,7 @@ jest.mock('hooks/useGetTenantLicense', () => ({
 	useGetTenantLicense: jest.fn(),
 }));
 
-jest.mock('pages/Integrations/utils', () => ({
+jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 

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

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

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

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

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

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

frontend/src/components/LogDetail/index.tsx

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

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

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

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

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

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

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

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

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

frontend/src/components/NewSelect/__test__/VariableItem.integration.test.tsx

@@ -78,10 +78,12 @@ function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
 describe('VariableItem Integration Tests', () => {
 	let user: ReturnType<typeof userEvent.setup>;
 	let mockOnValueUpdate: jest.Mock;
+	let mockSetVariablesToGetUpdated: jest.Mock;
 
 	beforeEach(() => {
 		user = userEvent.setup();
 		mockOnValueUpdate = jest.fn();
+		mockSetVariablesToGetUpdated = jest.fn();
 		jest.clearAllMocks();
 	});
 
@@ -100,6 +102,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -145,6 +150,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -187,6 +195,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -236,6 +247,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -258,6 +272,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -291,6 +308,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -324,6 +344,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -346,6 +369,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -379,6 +405,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -432,6 +461,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -476,6 +508,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -513,6 +548,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -544,6 +582,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);

frontend/src/constants/reactQueryKeys.ts

@@ -1,4 +1,19 @@
 export const REACT_QUERY_KEY = {
+	// Cloud Integration Query Keys
+	CLOUD_INTEGRATION_ACCOUNTS: 'CLOUD_INTEGRATION_ACCOUNTS',
+	CLOUD_INTEGRATION_SERVICES: 'CLOUD_INTEGRATION_SERVICES',
+	CLOUD_INTEGRATION_SERVICE_DETAILS: 'CLOUD_INTEGRATION_SERVICE_DETAILS',
+	CLOUD_INTEGRATION_ACCOUNT_STATUS: 'CLOUD_INTEGRATION_ACCOUNT_STATUS',
+	CLOUD_INTEGRATION_UPDATE_ACCOUNT_CONFIG:
+		'CLOUD_INTEGRATION_UPDATE_ACCOUNT_CONFIG',
+	CLOUD_INTEGRATION_UPDATE_SERVICE_CONFIG:
+		'CLOUD_INTEGRATION_UPDATE_SERVICE_CONFIG',
+	CLOUD_INTEGRATION_GENERATE_CONNECTION_URL:
+		'CLOUD_INTEGRATION_GENERATE_CONNECTION_URL',
+	CLOUD_INTEGRATION_GET_CONNECTION_PARAMS:
+		'CLOUD_INTEGRATION_GET_CONNECTION_PARAMS',
+	CLOUD_INTEGRATION_GET_DEPLOYMENT_COMMANDS:
+		'CLOUD_INTEGRATION_GET_DEPLOYMENT_COMMANDS',
 	GET_PUBLIC_DASHBOARD: 'GET_PUBLIC_DASHBOARD',
 	GET_PUBLIC_DASHBOARD_META: 'GET_PUBLIC_DASHBOARD_META',
 	GET_PUBLIC_DASHBOARD_WIDGET_DATA: 'GET_PUBLIC_DASHBOARD_WIDGET_DATA',

frontend/src/constants/routes.ts

@@ -64,6 +64,7 @@ const ROUTES = {
 	WORKSPACE_SUSPENDED: '/workspace-suspended',
 	SHORTCUTS: '/settings/shortcuts',
 	INTEGRATIONS: '/integrations',
+	INTEGRATIONS_DETAIL: '/integrations/:integrationId',
 	MESSAGING_QUEUES_BASE: '/messaging-queues',
 	MESSAGING_QUEUES_KAFKA: '/messaging-queues/kafka',
 	MESSAGING_QUEUES_KAFKA_DETAIL: '/messaging-queues/kafka/detail',

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

@@ -1,24 +0,0 @@
-import {
-	IntegrationType,
-	RequestIntegrationBtn,
-} from 'pages/Integrations/RequestIntegrationBtn';
-
-import Header from './Header/Header';
-import HeroSection from './HeroSection/HeroSection';
-import ServicesTabs from './ServicesSection/ServicesTabs';
-
-function CloudIntegrationPage(): JSX.Element {
-	return (
-		<div>
-			<Header />
-			<HeroSection />
-			<RequestIntegrationBtn
-				type={IntegrationType.AWS_SERVICES}
-				message="Can't find the AWS service you're looking for? Request more integrations"
-			/>
-			<ServicesTabs />
-		</div>
-	);
-}
-
-export default CloudIntegrationPage;

frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx

@@ -1,34 +0,0 @@
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import AccountActions from './components/AccountActions';
-
-import './HeroSection.style.scss';
-
-function HeroSection(): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	return (
-		<div
-			className="hero-section"
-			style={
-				isDarkMode
-					? {
-							backgroundImage: `url('/Images/integrations-hero-bg.png')`,
-					  }
-					: {}
-			}
-		>
-			<div className="hero-section__icon">
-				<img src="/Logos/aws-dark.svg" alt="aws-logo" />
-			</div>
-			<div className="hero-section__details">
-				<div className="title">Amazon Web Services</div>
-				<div className="description">
-					One-click setup for AWS monitoring with SigNoz
-				</div>
-				<AccountActions />
-			</div>
-		</div>
-	);
-}
-
-export default HeroSection;

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -9,6 +9,74 @@
 		padding: 0px;
 	}
 
+	.dashboard-header {
+		border-bottom: 1px solid var(--bg-slate-400);
+		display: flex;
+		justify-content: space-between;
+		gap: 16px;
+		align-items: center;
+		padding: 0 8px;
+		box-sizing: border-box;
+
+		.dashboard-breadcrumbs {
+			width: 100%;
+			height: 48px;
+			display: flex;
+			gap: 6px;
+			align-items: center;
+			max-width: 80%;
+
+			.dashboard-btn {
+				display: flex;
+				align-items: center;
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+				padding: 0px;
+				height: 20px;
+			}
+
+			.dashboard-btn:hover {
+				background-color: unset;
+			}
+
+			.id-btn {
+				display: flex;
+				align-items: center;
+				padding: 0px 2px;
+				border-radius: 2px;
+				background: rgba(113, 144, 249, 0.1);
+				color: var(--bg-robin-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				height: 20px;
+
+				max-width: calc(100% - 120px);
+
+				span {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+
+				.ant-btn-icon {
+					margin-inline-end: 4px;
+				}
+			}
+			.id-btn:hover {
+				background: rgba(113, 144, 249, 0.1);
+				color: var(--bg-robin-300);
+			}
+		}
+	}
+
 	.dashboard-details {
 		display: flex;
 		justify-content: space-between;
@@ -467,6 +535,15 @@
 	.dashboard-description-container {
 		color: var(--bg-ink-400);
 
+		.dashboard-header {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+			.dashboard-breadcrumbs {
+				.dashboard-btn {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+
 		.dashboard-details {
 			.left-section {
 				.dashboard-title {

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

@@ -16,7 +16,9 @@ import {
 } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
 import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
@@ -25,6 +27,7 @@ import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import {
 	Check,
@@ -34,6 +37,7 @@ import {
 	FolderKanban,
 	Fullscreen,
 	Globe,
+	LayoutGrid,
 	LockKeyhole,
 	PenLine,
 	X,
@@ -47,7 +51,6 @@ import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 import { v4 as uuid } from 'uuid';
 
-import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardGraphSlider from '../ComponentsSlider';
 import DashboardSettings from '../DashboardSettings';
 import { Base64Icons } from '../DashboardSettings/General/utils';
@@ -68,6 +71,7 @@ interface DashboardDescriptionProps {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
 	const { handle } = props;
 	const {
 		selectedDashboard,
@@ -76,6 +80,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		layouts,
 		setLayouts,
 		isDashboardLocked,
+		listSortOrder,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
 		setSelectedRowWidgetId,
@@ -287,6 +292,17 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		});
 	}
 
+	function goToListPage(): void {
+		const urlParams = new URLSearchParams();
+		urlParams.set('columnKey', listSortOrder.columnKey as string);
+		urlParams.set('order', listSortOrder.order as string);
+		urlParams.set('page', listSortOrder.pagination as string);
+		urlParams.set('search', listSortOrder.search as string);
+
+		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
+		safeNavigate(generatedUrl);
+	}
+
 	const {
 		data: publicDashboardResponse,
 		isLoading: isLoadingPublicDashboardData,
@@ -335,7 +351,32 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	return (
 		<Card className="dashboard-description-container">
-			<DashboardHeader />
+			<div className="dashboard-header">
+				<section className="dashboard-breadcrumbs">
+					<Button
+						type="text"
+						icon={<LayoutGrid size={14} />}
+						className="dashboard-btn"
+						onClick={(): void => goToListPage()}
+					>
+						Dashboard /
+					</Button>
+					<Button type="text" className="id-btn dashboard-name-btn">
+						<img
+							src={image}
+							alt="dashboard-icon"
+							style={{ height: '14px', width: '14px' }}
+						/>
+						{title}
+					</Button>
+				</section>
+
+				<HeaderRightSection
+					enableAnnouncements={false}
+					enableShare
+					enableFeedback
+				/>
+			</div>
 			<section className="dashboard-details">
 				<div className="left-section">
 					<img src={image} alt="dashboard-img" className="dashboard-img" />

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -9,15 +9,11 @@ import {
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
-import {
-	enqueueDescendantsOfVariable,
-	enqueueFetchOfAllVariables,
-	initializeVariableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { onUpdateVariableNode } from './util';
 import VariableItem from './VariableItem';
 
 import './DashboardVariableSelection.styles.scss';
@@ -26,6 +22,8 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const {
 		setSelectedDashboard,
 		updateLocalStorageDashboardVariables,
+		variablesToGetUpdated,
+		setVariablesToGetUpdated,
 	} = useDashboard();
 
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
@@ -57,14 +55,11 @@ function DashboardVariableSelection(): JSX.Element | null {
 		[dependencyData?.order],
 	);
 
-	// Initialize fetch store then start a new fetch cycle.
-	// Runs on dependency order changes, and time range changes.
+	// Trigger refetch when dependency order changes or global time changes
 	useEffect(() => {
-		const allVariableNames = sortedVariablesArray
-			.map((v) => v.name)
-			.filter((name): name is string => !!name);
-		initializeVariableFetchStore(allVariableNames);
-		enqueueFetchOfAllVariables();
+		if (dependencyData?.order && dependencyData.order.length > 0) {
+			setVariablesToGetUpdated(dependencyData?.order || []);
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dependencyOrderKey, minTime, maxTime]);
 
@@ -126,14 +121,29 @@ function DashboardVariableSelection(): JSX.Element | null {
 				return prev;
 			});
 
-			// Cascade: enqueue query-type descendants for refetching
-			enqueueDescendantsOfVariable(name);
+			if (dependencyData) {
+				const updatedVariables: string[] = [];
+				onUpdateVariableNode(
+					name,
+					dependencyData.graph,
+					dependencyData.order,
+					(node) => updatedVariables.push(node),
+				);
+				setVariablesToGetUpdated((prev) => [
+					...new Set([...prev, ...updatedVariables.filter((v) => v !== name)]),
+				]);
+			} else {
+				setVariablesToGetUpdated((prev) => prev.filter((v) => v !== name));
+			}
 		},
 		[
+			// This can be removed
 			dashboardVariables,
 			updateLocalStorageDashboardVariables,
+			dependencyData,
 			updateUrlVariable,
 			setSelectedDashboard,
+			setVariablesToGetUpdated,
 		],
 	);
 
@@ -148,6 +158,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 						existingVariables={dashboardVariables}
 						variableData={variable}
 						onValueUpdate={onValueUpdate}
+						variablesToGetUpdated={variablesToGetUpdated}
+						setVariablesToGetUpdated={setVariablesToGetUpdated}
+						dependencyData={dependencyData}
 					/>
 				);
 			})}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableInput.tsx

@@ -2,25 +2,18 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import useDebounce from 'hooks/useDebounce';
+import { isEmpty } from 'lodash-es';
 import { AppState } from 'store/reducers';
-import { SuccessResponseV2 } from 'types/api';
-import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
 
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import {
-	buildExistingDynamicVariableQuery,
-	extractErrorMessage,
-	getOptionsForDynamicVariable,
-	mergeUniqueStrings,
-	settleVariableFetch,
-} from './util';
+import { getOptionsForDynamicVariable } from './util';
 import { VariableItemProps } from './VariableItem';
 import { dynamicVariableSelectStrategy } from './variableSelectStrategy/dynamicVariableSelectStrategy';
 
@@ -31,6 +24,7 @@ type DynamicVariableInputProps = Pick<
 	'variableData' | 'onValueUpdate' | 'existingVariables'
 >;
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function DynamicVariableInput({
 	variableData,
 	onValueUpdate,
@@ -61,8 +55,14 @@ function DynamicVariableInput({
 
 	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
 
+	// Build a memoized list of all currently available option strings (normalized + related)
 	const allAvailableOptionStrings = useMemo(
-		() => mergeUniqueStrings(optionsData, relatedValues),
+		() => [
+			...new Set([
+				...optionsData.map((v) => v.toString()),
+				...relatedValues.map((v) => v.toString()),
+			]),
+		],
 		[optionsData, relatedValues],
 	);
 
@@ -104,24 +104,67 @@ function DynamicVariableInput({
 		(state) => state.globalTime,
 	);
 
-	const {
-		variableFetchCycleId,
-		isVariableSettled,
-		isVariableFetching,
-		hasVariableFetchedOnce,
-		isVariableWaitingForDependencies,
-		variableDependencyWaitMessage,
-	} = useVariableFetchState(variableData.name || '');
+	// existing query is the query made from the other dynamic variables around this one with there current values
+	// for e.g. k8s.namespace.name IN ["zeus", "gene"] AND doc_op_type IN ["test"]
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const existingQuery = useMemo(() => {
+		if (!existingVariables || !variableData.dynamicVariablesAttribute) {
+			return '';
+		}
 
-	const existingQuery = useMemo(
-		() =>
-			buildExistingDynamicVariableQuery(
-				existingVariables,
-				variableData.id,
-				!!variableData.dynamicVariablesAttribute,
-			),
-		[existingVariables, variableData.id, variableData.dynamicVariablesAttribute],
-	);
+		const queryParts: string[] = [];
+
+		Object.entries(existingVariables).forEach(([, variable]) => {
+			// Skip the current variable being processed
+			if (variable.id === variableData.id) {
+				return;
+			}
+
+			// Only include dynamic variables that have selected values and are not selected as ALL
+			if (
+				variable.type === 'DYNAMIC' &&
+				variable.dynamicVariablesAttribute &&
+				variable.selectedValue &&
+				!isEmpty(variable.selectedValue) &&
+				(variable.showALLOption ? !variable.allSelected : true)
+			) {
+				const attribute = variable.dynamicVariablesAttribute;
+				const values = Array.isArray(variable.selectedValue)
+					? variable.selectedValue
+					: [variable.selectedValue];
+
+				// Filter out empty values and convert to strings
+				const validValues = values
+					.filter((val) => val !== null && val !== undefined && val !== '')
+					.map((val) => val.toString());
+
+				if (validValues.length > 0) {
+					// Format values for query - wrap strings in quotes, keep numbers as is
+					const formattedValues = validValues.map((val) => {
+						// Check if value is a number
+						const numValue = Number(val);
+						if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
+							return val; // Keep as number
+						}
+						// Escape single quotes and wrap in quotes
+						return `'${val.replace(/'/g, "\\'")}'`;
+					});
+
+					if (formattedValues.length === 1) {
+						queryParts.push(`${attribute} = ${formattedValues[0]}`);
+					} else {
+						queryParts.push(`${attribute} IN [${formattedValues.join(', ')}]`);
+					}
+				}
+			}
+		});
+
+		return queryParts.join(' AND ');
+	}, [
+		existingVariables,
+		variableData.id,
+		variableData.dynamicVariablesAttribute,
+	]);
 
 	// Wrap the hook's onDropdownVisibleChange to also track isDropdownOpen and handle cleanup
 	const handleSelectDropdownVisibilityChange = useCallback(
@@ -139,73 +182,6 @@ function DynamicVariableInput({
 		[onDropdownVisibleChange, optionsData, originalRelatedValues],
 	);
 
-	const handleQuerySuccess = useCallback(
-		(data: SuccessResponseV2<FieldValueResponse>): void => {
-			const newNormalizedValues = data.data?.normalizedValues || [];
-			const newRelatedValues = data.data?.relatedValues || [];
-
-			if (!debouncedApiSearchText) {
-				setOptionsData(newNormalizedValues);
-				setIsComplete(data.data?.complete || false);
-			}
-			setFilteredOptionsData(newNormalizedValues);
-			setRelatedValues(newRelatedValues);
-			setOriginalRelatedValues(newRelatedValues);
-
-			// Sync temp selection with latest API values when ALL is active and dropdown is open
-			if (variableData.allSelected && isDropdownOpen) {
-				const latestValues = mergeUniqueStrings(
-					newNormalizedValues,
-					newRelatedValues,
-				);
-
-				const currentStrings = Array.isArray(tempSelection)
-					? tempSelection.map((v) => v.toString())
-					: tempSelection
-					? [tempSelection.toString()]
-					: [];
-
-				const areSame =
-					currentStrings.length === latestValues.length &&
-					latestValues.every((v) => currentStrings.includes(v));
-
-				if (!areSame) {
-					setTempSelection(latestValues);
-				}
-			}
-
-			// Apply default if no value is selected (e.g., new variable, first load)
-			if (!debouncedApiSearchText) {
-				applyDefaultIfNeeded(
-					mergeUniqueStrings(newNormalizedValues, newRelatedValues),
-				);
-			}
-
-			settleVariableFetch(variableData.name, 'complete');
-		},
-		[
-			debouncedApiSearchText,
-			variableData.allSelected,
-			variableData.name,
-			isDropdownOpen,
-			tempSelection,
-			setTempSelection,
-			applyDefaultIfNeeded,
-		],
-	);
-
-	const handleQueryError = useCallback(
-		(error: { message?: string } | null): void => {
-			if (error) {
-				setErrorMessage(extractErrorMessage(error));
-				setIsRetryableError(checkIfRetryableError(error));
-			}
-
-			settleVariableFetch(variableData.name, 'failure');
-		},
-		[variableData.name],
-	);
-
 	const { isLoading, refetch } = useQuery(
 		[
 			REACT_QUERY_KEY.DASHBOARD_BY_ID,
@@ -216,22 +192,13 @@ function DynamicVariableInput({
 			debouncedApiSearchText,
 			variableData.dynamicVariablesSource,
 			variableData.dynamicVariablesAttribute,
-			variableFetchCycleId,
 		],
 		{
-			/*
-			 * enabled if
-			 * - we have dynamic variable source and attribute defined (ALWAYS)
-			 * - AND
-			 *   - we're either still fetching variable options
-			 *   - OR
-			 *   - if variable is in idle state and we have already fetched options for it
-			 **/
 			enabled:
+				variableData.type === 'DYNAMIC' &&
 				!!variableData.dynamicVariablesSource &&
-				!!variableData.dynamicVariablesAttribute &&
-				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
-			queryFn: ({ signal }) =>
+				!!variableData.dynamicVariablesAttribute,
+			queryFn: () =>
 				getFieldValues(
 					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
 						? undefined
@@ -244,10 +211,70 @@ function DynamicVariableInput({
 					minTime,
 					maxTime,
 					existingQuery,
-					signal,
 				),
-			onSuccess: handleQuerySuccess,
-			onError: handleQueryError,
+			onSuccess: (data) => {
+				const newNormalizedValues = data.data?.normalizedValues || [];
+				const newRelatedValues = data.data?.relatedValues || [];
+
+				if (!debouncedApiSearchText) {
+					setOptionsData(newNormalizedValues);
+					setIsComplete(data.data?.complete || false);
+				}
+				setFilteredOptionsData(newNormalizedValues);
+				setRelatedValues(newRelatedValues);
+				setOriginalRelatedValues(newRelatedValues);
+
+				// Only run auto-check logic when necessary to avoid performance issues
+				if (variableData.allSelected && isDropdownOpen) {
+					// Build the latest full list from API (normalized + related)
+					const latestValues = [
+						...new Set([
+							...newNormalizedValues.map((v) => v.toString()),
+							...newRelatedValues.map((v) => v.toString()),
+						]),
+					];
+
+					// Update temp selection to exactly reflect latest API values when ALL is active
+					const currentStrings = Array.isArray(tempSelection)
+						? tempSelection.map((v) => v.toString())
+						: tempSelection
+						? [tempSelection.toString()]
+						: [];
+					const areSame =
+						currentStrings.length === latestValues.length &&
+						latestValues.every((v) => currentStrings.includes(v));
+					if (!areSame) {
+						setTempSelection(latestValues);
+					}
+				}
+
+				// Apply default if no value is selected (e.g., new variable, first load)
+				if (!debouncedApiSearchText) {
+					const allNewOptions = [
+						...new Set([
+							...newNormalizedValues.map((v) => v.toString()),
+							...newRelatedValues.map((v) => v.toString()),
+						]),
+					];
+					applyDefaultIfNeeded(allNewOptions);
+				}
+			},
+			onError: (error: any) => {
+				if (error) {
+					let message = SOMETHING_WENT_WRONG;
+					if (error?.message) {
+						message = error?.message;
+					} else {
+						message =
+							'Please make sure configuration is valid and you have required setup and permissions';
+					}
+					setErrorMessage(message);
+
+					// Check if error is retryable (5xx) or not (4xx)
+					const isRetryable = checkIfRetryableError(error);
+					setIsRetryableError(isRetryable);
+				}
+			},
 		},
 	);
 
@@ -309,8 +336,6 @@ function DynamicVariableInput({
 			showRetryButton={isRetryableError}
 			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
 			onSearch={handleSearch}
-			waiting={isVariableWaitingForDependencies}
-			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx

@@ -3,9 +3,8 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import { isArray, isEmpty, isString } from 'lodash-es';
+import { isArray, isString } from 'lodash-es';
 import { AppState } from 'store/reducers';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -13,18 +12,26 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { variablePropsToPayloadVariables } from '../utils';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { areArraysEqual, settleVariableFetch } from './util';
+import { areArraysEqual, checkAPIInvocation } from './util';
 import { VariableItemProps } from './VariableItem';
 import { queryVariableSelectStrategy } from './variableSelectStrategy/queryVariableSelectStrategy';
 
 type QueryVariableInputProps = Pick<
 	VariableItemProps,
-	'variableData' | 'existingVariables' | 'onValueUpdate'
+	| 'variableData'
+	| 'existingVariables'
+	| 'onValueUpdate'
+	| 'variablesToGetUpdated'
+	| 'setVariablesToGetUpdated'
+	| 'dependencyData'
 >;
 
 function QueryVariableInput({
 	variableData,
 	existingVariables,
+	variablesToGetUpdated,
+	setVariablesToGetUpdated,
+	dependencyData,
 	onValueUpdate,
 }: QueryVariableInputProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
@@ -36,15 +43,6 @@ function QueryVariableInput({
 		(state) => state.globalTime,
 	);
 
-	const {
-		variableFetchCycleId,
-		isVariableSettled,
-		isVariableFetching,
-		hasVariableFetchedOnce,
-		isVariableWaitingForDependencies,
-		variableDependencyWaitMessage,
-	} = useVariableFetchState(variableData.name || '');
-
 	const {
 		tempSelection,
 		setTempSelection,
@@ -62,6 +60,16 @@ function QueryVariableInput({
 		strategy: queryVariableSelectStrategy,
 	});
 
+	const validVariableUpdate = useCallback((): boolean => {
+		if (!variableData.name) {
+			return false;
+		}
+		return Boolean(
+			variablesToGetUpdated.length &&
+				variablesToGetUpdated[0] === variableData.name,
+		);
+	}, [variableData.name, variablesToGetUpdated]);
+
 	const getOptions = useCallback(
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(variablesRes: VariableResponseProps | null): void => {
@@ -95,24 +103,18 @@ function QueryVariableInput({
 							valueNotInList = true;
 						}
 
-						if (variableData.name && (valueNotInList || variableData.allSelected)) {
+						// variablesData.allSelected is added for the case where on change of options we need to update the
+						// local storage
+						if (
+							variableData.name &&
+							(validVariableUpdate() || valueNotInList || variableData.allSelected)
+						) {
 							if (
 								variableData.allSelected &&
 								variableData.multiSelect &&
 								variableData.showALLOption
 							) {
-								if (
-									variableData.name &&
-									variableData.id &&
-									!isEmpty(variableData.selectedValue)
-								) {
-									onValueUpdate(
-										variableData.name,
-										variableData.id,
-										newOptionsData,
-										true,
-									);
-								}
+								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
 
 								// Update tempSelection to maintain ALL state when dropdown is open
 								if (tempSelection !== undefined) {
@@ -130,11 +132,7 @@ function QueryVariableInput({
 										newOptionsData.every((option) => selectedValue.includes(option));
 								}
 
-								if (
-									variableData.name &&
-									variableData.id &&
-									!isEmpty(variableData.selectedValue)
-								) {
+								if (variableData.name && variableData.id) {
 									onValueUpdate(variableData.name, variableData.id, value, allSelected);
 								}
 							}
@@ -143,6 +141,10 @@ function QueryVariableInput({
 						setOptionsData(newOptionsData);
 						// Apply default if no value is selected (e.g., new variable, first load)
 						applyDefaultIfNeeded(newOptionsData);
+					} else {
+						setVariablesToGetUpdated((prev) =>
+							prev.filter((name) => name !== variableData.name),
+						);
 					}
 				}
 			} catch (e) {
@@ -155,6 +157,8 @@ function QueryVariableInput({
 			onValueUpdate,
 			tempSelection,
 			setTempSelection,
+			validVariableUpdate,
+			setVariablesToGetUpdated,
 			applyDefaultIfNeeded,
 		],
 	);
@@ -165,28 +169,27 @@ function QueryVariableInput({
 			variableData.name || '',
 			`${minTime}`,
 			`${maxTime}`,
-			variableFetchCycleId,
+			JSON.stringify(dependencyData?.order),
 		],
 		{
-			/*
-			 * enabled if
-			 *   - we're either still fetching variable options
-			 *   - OR
-			 *   - if variable is in idle state and we have already fetched options for it
-			 **/
-			enabled: isVariableFetching || (isVariableSettled && hasVariableFetchedOnce),
-			queryFn: ({ signal }) =>
-				dashboardVariablesQuery(
-					{
-						query: variableData.queryValue || '',
-						variables: variablePropsToPayloadVariables(existingVariables),
-					},
-					signal,
+			enabled:
+				variableData &&
+				checkAPIInvocation(
+					variablesToGetUpdated,
+					variableData,
+					dependencyData?.parentDependencyGraph,
 				),
+			queryFn: () =>
+				dashboardVariablesQuery({
+					query: variableData.queryValue || '',
+					variables: variablePropsToPayloadVariables(existingVariables),
+				}),
 			refetchOnWindowFocus: false,
 			onSuccess: (response) => {
 				getOptions(response.payload);
-				settleVariableFetch(variableData.name, 'complete');
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
 			},
 			onError: (error: {
 				details: {
@@ -203,7 +206,9 @@ function QueryVariableInput({
 					}
 					setErrorMessage(message);
 				}
-				settleVariableFetch(variableData.name, 'failure');
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
 			},
 		},
 	);
@@ -237,8 +242,6 @@ function QueryVariableInput({
 			loading={isLoading}
 			errorMessage={errorMessage}
 			onRetry={handleRetry}
-			waiting={isVariableWaitingForDependencies}
-			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx

@@ -28,8 +28,6 @@ interface SelectVariableInputProps {
 	showRetryButton?: boolean;
 	showIncompleteDataMessage?: boolean;
 	onSearch?: (searchTerm: string) => void;
-	waiting?: boolean;
-	waitingMessage?: string;
 }
 
 const MAX_TAG_DISPLAY_VALUES = 10;
@@ -67,7 +65,6 @@ function SelectVariableInput({
 	showRetryButton,
 	showIncompleteDataMessage,
 	onSearch,
-	waitingMessage,
 }: SelectVariableInputProps): JSX.Element {
 	const commonProps = useMemo(
 		() => ({
@@ -81,6 +78,7 @@ function SelectVariableInput({
 			className: 'variable-select',
 			popupClassName: 'dropdown-styles',
 			getPopupContainer: popupContainer,
+			style: SelectItemStyle,
 			showSearch: true,
 			bordered: false,
 
@@ -88,8 +86,6 @@ function SelectVariableInput({
 			'data-testid': 'variable-select',
 			onChange,
 			loading,
-			waitingMessage,
-			style: SelectItemStyle,
 			options,
 			errorMessage,
 			onRetry,
@@ -105,7 +101,6 @@ function SelectVariableInput({
 			defaultValue,
 			onChange,
 			loading,
-			waitingMessage,
 			options,
 			value,
 			errorMessage,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.test.tsx

@@ -47,6 +47,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -61,6 +69,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -76,6 +92,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -109,6 +133,14 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -131,6 +163,14 @@ describe('VariableItem', () => {
 					variableData={customVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -145,6 +185,14 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
+import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import CustomVariableInput from './CustomVariableInput';
@@ -20,12 +21,18 @@ export interface VariableItemProps {
 		allSelected: boolean,
 		haveCustomValuesSelected?: boolean,
 	) => void;
+	variablesToGetUpdated: string[];
+	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
+	dependencyData: IDependencyData | null;
 }
 
 function VariableItem({
 	variableData,
 	onValueUpdate,
 	existingVariables,
+	variablesToGetUpdated,
+	setVariablesToGetUpdated,
+	dependencyData,
 }: VariableItemProps): JSX.Element {
 	const { name, description, type: variableType } = variableData;
 
@@ -58,6 +65,9 @@ function VariableItem({
 						variableData={variableData}
 						onValueUpdate={onValueUpdate}
 						existingVariables={existingVariables}
+						variablesToGetUpdated={variablesToGetUpdated}
+						setVariablesToGetUpdated={setVariablesToGetUpdated}
+						dependencyData={dependencyData}
 					/>
 				)}
 				{variableType === 'DYNAMIC' && (

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/DynamicVariableInput.test.tsx

@@ -7,19 +7,6 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import DynamicVariableInput from '../DynamicVariableInput';
 
-// Mock useVariableFetchState to return "fetching" state so useQuery is enabled
-jest.mock('hooks/dashboard/useVariableFetchState', () => ({
-	useVariableFetchState: (): Record<string, unknown> => ({
-		variableFetchCycleId: 0,
-		variableFetchState: 'loading',
-		isVariableSettled: false,
-		isVariableFetching: true,
-		hasVariableFetchedOnce: false,
-		isVariableWaitingForDependencies: false,
-		variableDependencyWaitMessage: '',
-	}),
-}));
-
 // Don't mock the components - use real ones
 
 // Mock for useQuery
@@ -230,10 +217,9 @@ describe('DynamicVariableInput Component', () => {
 				'',
 				'Traces',
 				'service.name',
-				0, // variableFetchCycleId
 			],
 			expect.objectContaining({
-				enabled: true, // isVariableFetching is true from mock
+				enabled: true, // Type is 'DYNAMIC'
 				queryFn: expect.any(Function),
 				onSuccess: expect.any(Function),
 				onError: expect.any(Function),

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/VariableItem.defaulting.behavior.test.tsx

@@ -8,6 +8,14 @@ import '@testing-library/jest-dom/extend-expect';
 import VariableItem from '../VariableItem';
 
 const mockOnValueUpdate = jest.fn();
+const mockSetVariablesToGetUpdated = jest.fn();
+
+const baseDependencyData = {
+	order: [],
+	graph: {},
+	parentDependencyGraph: {},
+	hasCycle: false,
+};
 
 const TEST_VARIABLE_ID = 'test_variable';
 const VARIABLE_SELECT_TESTID = 'variable-select';
@@ -23,6 +31,9 @@ const renderVariableItem = (
 				variableData={variableData}
 				existingVariables={{}}
 				onValueUpdate={mockOnValueUpdate}
+				variablesToGetUpdated={[]}
+				setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+				dependencyData={baseDependencyData}
 			/>
 		</MockQueryClientProvider>,
 	);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/dashboardVariables.test.tsx

@@ -2,12 +2,14 @@ import {
 	buildDependencies,
 	buildDependencyGraph,
 	buildParentDependencyGraph,
+	checkAPIInvocation,
 	onUpdateVariableNode,
 	VariableGraph,
 } from '../util';
 import {
 	buildDependenciesMock,
 	buildGraphMock,
+	checkAPIInvocationMock,
 	onUpdateVariableNodeMock,
 } from './mock';
 
@@ -70,6 +72,97 @@ describe('dashboardVariables - utilities and processors', () => {
 		});
 	});
 
+	describe('checkAPIInvocation', () => {
+		const {
+			variablesToGetUpdated,
+			variableData,
+			parentDependencyGraph,
+		} = checkAPIInvocationMock;
+
+		const mockRootElement = {
+			name: 'deployment_environment',
+			key: '036a47cd-9ffc-47de-9f27-0329198964a8',
+			id: '036a47cd-9ffc-47de-9f27-0329198964a8',
+			modificationUUID: '5f71b591-f583-497c-839d-6a1590c3f60f',
+			selectedValue: 'production',
+			type: 'QUERY',
+			// ... other properties omitted for brevity
+		} as any;
+
+		describe('edge cases', () => {
+			it('should return false when variableData is empty', () => {
+				expect(
+					checkAPIInvocation(
+						variablesToGetUpdated,
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeFalsy();
+			});
+
+			it('should return true when parentDependencyGraph is empty', () => {
+				expect(
+					checkAPIInvocation(variablesToGetUpdated, variableData, {}),
+				).toBeFalsy();
+			});
+		});
+
+		describe('variable sequences', () => {
+			it('should return true for valid sequence', () => {
+				expect(
+					checkAPIInvocation(
+						['k8s_node_name', 'k8s_namespace_name'],
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeTruthy();
+			});
+
+			it('should return false for invalid sequence', () => {
+				expect(
+					checkAPIInvocation(
+						['k8s_cluster_name', 'k8s_node_name', 'k8s_namespace_name'],
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeFalsy();
+			});
+
+			it('should return false when variableData is not in sequence', () => {
+				expect(
+					checkAPIInvocation(
+						['deployment_environment', 'service_name', 'endpoint'],
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeFalsy();
+			});
+		});
+
+		describe('root element behavior', () => {
+			it('should return true for valid root element sequence', () => {
+				expect(
+					checkAPIInvocation(
+						[
+							'deployment_environment',
+							'service_name',
+							'endpoint',
+							'http_status_code',
+						],
+						mockRootElement,
+						parentDependencyGraph,
+					),
+				).toBeTruthy();
+			});
+
+			it('should return true for empty variablesToGetUpdated array', () => {
+				expect(
+					checkAPIInvocation([], mockRootElement, parentDependencyGraph),
+				).toBeTruthy();
+			});
+		});
+	});
+
 	describe('Graph Building Utilities', () => {
 		const { graph } = buildGraphMock;
 		const { variables } = buildDependenciesMock;
@@ -130,86 +223,10 @@ describe('dashboardVariables - utilities and processors', () => {
 					},
 					hasCycle: false,
 					cycleNodes: undefined,
-					transitiveDescendants: {
-						deployment_environment: ['service_name', 'endpoint', 'http_status_code'],
-						endpoint: ['http_status_code'],
-						environment: [],
-						http_status_code: [],
-						k8s_cluster_name: ['k8s_node_name', 'k8s_namespace_name'],
-						k8s_namespace_name: [],
-						k8s_node_name: ['k8s_namespace_name'],
-						service_name: ['endpoint', 'http_status_code'],
-					},
 				};
 
 				expect(buildDependencyGraph(graph)).toEqual(expected);
 			});
-
-			it('should return empty transitiveDescendants for an empty graph', () => {
-				const result = buildDependencyGraph({});
-				expect(result.transitiveDescendants).toEqual({});
-				expect(result.order).toEqual([]);
-				expect(result.hasCycle).toBe(false);
-			});
-
-			it('should compute transitiveDescendants for a linear chain (a -> b -> c)', () => {
-				const linearGraph: VariableGraph = {
-					a: ['b'],
-					b: ['c'],
-					c: [],
-				};
-				const result = buildDependencyGraph(linearGraph);
-				expect(result.transitiveDescendants).toEqual({
-					a: ['b', 'c'],
-					b: ['c'],
-					c: [],
-				});
-			});
-
-			it('should compute transitiveDescendants for a diamond dependency (a -> b, a -> c, b -> d, c -> d)', () => {
-				const diamondGraph: VariableGraph = {
-					a: ['b', 'c'],
-					b: ['d'],
-					c: ['d'],
-					d: [],
-				};
-				const result = buildDependencyGraph(diamondGraph);
-				expect(result.transitiveDescendants.a).toEqual(
-					expect.arrayContaining(['b', 'c', 'd']),
-				);
-				expect(result.transitiveDescendants.a).toHaveLength(3);
-				expect(result.transitiveDescendants.b).toEqual(['d']);
-				expect(result.transitiveDescendants.c).toEqual(['d']);
-				expect(result.transitiveDescendants.d).toEqual([]);
-			});
-
-			it('should handle disconnected components in transitiveDescendants', () => {
-				const disconnectedGraph: VariableGraph = {
-					a: ['b'],
-					b: [],
-					x: ['y'],
-					y: [],
-				};
-				const result = buildDependencyGraph(disconnectedGraph);
-				expect(result.transitiveDescendants.a).toEqual(['b']);
-				expect(result.transitiveDescendants.b).toEqual([]);
-				expect(result.transitiveDescendants.x).toEqual(['y']);
-				expect(result.transitiveDescendants.y).toEqual([]);
-			});
-
-			it('should return empty transitiveDescendants for all leaf nodes', () => {
-				const leafOnlyGraph: VariableGraph = {
-					a: [],
-					b: [],
-					c: [],
-				};
-				const result = buildDependencyGraph(leafOnlyGraph);
-				expect(result.transitiveDescendants).toEqual({
-					a: [],
-					b: [],
-					c: [],
-				});
-			});
 		});
 
 		describe('buildDependencies', () => {

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/mock.ts

@@ -1,3 +1,36 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+export const checkAPIInvocationMock = {
+	variablesToGetUpdated: [],
+	variableData: {
+		name: 'k8s_node_name',
+		key: '4d71d385-beaf-4434-8dbf-c62be68049fc',
+		allSelected: false,
+		customValue: '',
+		description: '',
+		id: '4d71d385-beaf-4434-8dbf-c62be68049fc',
+		modificationUUID: '77233d3c-96d7-4ccb-aa9d-11b04d563068',
+		multiSelect: false,
+		order: 6,
+		queryValue:
+			"SELECT JSONExtractString(labels, 'k8s_node_name') AS k8s_node_name\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE metric_name = 'k8s_node_cpu_time' AND JSONExtractString(labels, 'k8s_cluster_name') = {{.k8s_cluster_name}}\nGROUP BY k8s_node_name",
+		selectedValue: 'gke-signoz-saas-si-consumer-bsc-e2sd4-a6d430fa-gvm2',
+		showALLOption: false,
+		sort: 'DISABLED',
+		textboxValue: '',
+		type: 'QUERY',
+	},
+	parentDependencyGraph: {
+		deployment_environment: [],
+		service_name: ['deployment_environment'],
+		endpoint: ['deployment_environment', 'service_name'],
+		http_status_code: ['endpoint'],
+		k8s_cluster_name: [],
+		environment: [],
+		k8s_node_name: ['k8s_cluster_name'],
+		k8s_namespace_name: ['k8s_cluster_name', 'k8s_node_name'],
+	},
+} as any;
+
 export const onUpdateVariableNodeMock = {
 	nodeToUpdate: 'deployment_environment',
 	graph: {

frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts

@@ -1,16 +1,9 @@
 import { OptionData } from 'components/NewSelect/types';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
-import { isEmpty } from 'lodash-es';
+import { isEmpty, isNull } from 'lodash-es';
 import {
 	IDashboardVariables,
 	IDependencyData,
 } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import {
-	onVariableFetchComplete,
-	onVariableFetchFailure,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 export function areArraysEqual(
@@ -52,16 +45,30 @@ const getDependentVariablesBasedOnVariableName = (
 	}
 
 	return variables
-		.map((variable) => {
+		?.map((variable: any) => {
 			if (variable.type === 'QUERY') {
+				// Combined pattern for all formats
+				// {{.variable_name}} - original format
+				// $variable_name - dollar prefix format
+				// [[variable_name]] - square bracket format
+				// {{variable_name}} - without dot format
+				const patterns = [
+					`\\{\\{\\s*?\\.${variableName}\\s*?\\}\\}`, // {{.var}}
+					`\\{\\{\\s*${variableName}\\s*\\}\\}`, // {{var}}
+					`\\$${variableName}\\b`, // $var
+					`\\[\\[\\s*${variableName}\\s*\\]\\]`, // [[var]]
+				];
+				const combinedRegex = new RegExp(patterns.join('|'));
+
 				const queryValue = variable.queryValue || '';
-				if (textContainsVariableReference(queryValue, variableName)) {
+				const dependVarReMatch = queryValue.match(combinedRegex);
+				if (dependVarReMatch !== null && dependVarReMatch.length > 0) {
 					return variable.name;
 				}
 			}
 			return null;
 		})
-		.filter((val): val is string => val !== null);
+		.filter((val: string | null) => !isNull(val));
 };
 export type VariableGraph = Record<string, string[]>;
 
@@ -239,26 +246,10 @@ export const buildDependencyGraph = (
 
 	const hasCycle = topologicalOrder.length !== Object.keys(dependencies)?.length;
 
-	// Pre-compute transitive descendants by walking topological order in reverse.
-	// Each node's transitive descendants = direct children + their transitive descendants.
-	const transitiveDescendants: VariableGraph = {};
-	for (let i = topologicalOrder.length - 1; i >= 0; i--) {
-		const node = topologicalOrder[i];
-		const desc = new Set<string>();
-		for (const child of adjList[node] || []) {
-			desc.add(child);
-			for (const d of transitiveDescendants[child] || []) {
-				desc.add(d);
-			}
-		}
-		transitiveDescendants[node] = Array.from(desc);
-	}
-
 	return {
 		order: topologicalOrder,
 		graph: adjList,
 		parentDependencyGraph: buildParentDependencyGraph(adjList),
-		transitiveDescendants,
 		hasCycle,
 		cycleNodes,
 	};
@@ -293,6 +284,33 @@ export const onUpdateVariableNode = (
 	});
 };
 
+export const checkAPIInvocation = (
+	variablesToGetUpdated: string[],
+	variableData: IDashboardVariable,
+	parentDependencyGraph?: VariableGraph,
+): boolean => {
+	if (isEmpty(variableData.name)) {
+		return false;
+	}
+
+	if (isEmpty(parentDependencyGraph)) {
+		return false;
+	}
+
+	// if no dependency then true
+	const haveDependency =
+		parentDependencyGraph?.[variableData.name || '']?.length > 0;
+	if (!haveDependency) {
+		return true;
+	}
+
+	// if variable is in the list and has dependency then check if its the top element in the queue then true else false
+	return (
+		variablesToGetUpdated.length > 0 &&
+		variablesToGetUpdated[0] === variableData.name
+	);
+};
+
 export const getOptionsForDynamicVariable = (
 	normalizedValues: (string | number | boolean)[],
 	relatedValues: string[],
@@ -357,130 +375,3 @@ export const getSelectValue = (
 	}
 	return selectedValue?.toString();
 };
-
-/**
- * Merges multiple arrays of values into a single deduplicated string array.
- */
-export function mergeUniqueStrings(
-	...arrays: (string | number | boolean)[][]
-): string[] {
-	return [...new Set(arrays.flatMap((arr) => arr.map((v) => v.toString())))];
-}
-
-function isEligibleFilterVariable(
-	variable: IDashboardVariable,
-	currentVariableId: string,
-): boolean {
-	if (variable.id === currentVariableId) {
-		return false;
-	}
-	if (variable.type !== 'DYNAMIC') {
-		return false;
-	}
-	if (!variable.dynamicVariablesAttribute) {
-		return false;
-	}
-	if (!variable.selectedValue || isEmpty(variable.selectedValue)) {
-		return false;
-	}
-	return !(variable.showALLOption && variable.allSelected);
-}
-
-function formatQueryValue(val: string): string {
-	const numValue = Number(val);
-	if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
-		return val;
-	}
-	return `'${val.replace(/'/g, "\\'")}'`;
-}
-
-function buildQueryPart(attribute: string, values: string[]): string {
-	const formatted = values.map(formatQueryValue);
-	if (formatted.length === 1) {
-		return `${attribute} = ${formatted[0]}`;
-	}
-	return `${attribute} IN [${formatted.join(', ')}]`;
-}
-
-/**
- * Builds a filter query string from sibling dynamic variables' selected values.
- * e.g. `k8s.namespace.name IN ['zeus', 'gene'] AND doc_op_type = 'test'`
- */
-export function buildExistingDynamicVariableQuery(
-	existingVariables: IDashboardVariables | null,
-	currentVariableId: string,
-	hasDynamicAttribute: boolean,
-): string {
-	if (!existingVariables || !hasDynamicAttribute) {
-		return '';
-	}
-
-	const queryParts: string[] = [];
-
-	for (const variable of Object.values(existingVariables)) {
-		// Skip the current variable being processed
-		if (!isEligibleFilterVariable(variable, currentVariableId)) {
-			continue;
-		}
-
-		const rawValues = Array.isArray(variable.selectedValue)
-			? variable.selectedValue
-			: [variable.selectedValue];
-
-		// Filter out empty values and convert to strings
-		const validValues = rawValues
-			.filter(
-				(val): val is string | number | boolean =>
-					val !== null && val !== undefined && val !== '',
-			)
-			.map((val) => val.toString());
-
-		if (validValues.length > 0 && variable.dynamicVariablesAttribute) {
-			queryParts.push(
-				buildQueryPart(variable.dynamicVariablesAttribute, validValues),
-			);
-		}
-	}
-
-	return queryParts.join(' AND ');
-}
-
-function isVariableInActiveFetchState(state: string | undefined): boolean {
-	return state === 'loading' || state === 'revalidating';
-}
-
-/**
- * Completes or fails a variable's fetch state machine transition.
- * No-ops if the variable is not currently in an active fetch state.
- */
-export function settleVariableFetch(
-	name: string | undefined,
-	outcome: 'complete' | 'failure',
-): void {
-	if (!name) {
-		return;
-	}
-
-	const currentState = variableFetchStore.getSnapshot().states[name];
-	if (!isVariableInActiveFetchState(currentState)) {
-		return;
-	}
-
-	if (outcome === 'complete') {
-		onVariableFetchComplete(name);
-	} else {
-		onVariableFetchFailure(name);
-	}
-}
-
-export function extractErrorMessage(
-	error: { message?: string } | null,
-): string {
-	if (!error) {
-		return SOMETHING_WENT_WRONG;
-	}
-	return (
-		error.message ||
-		'Please make sure configuration is valid and you have required setup and permissions'
-	);
-}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/utils.test.ts

@@ -1,31 +1,4 @@
-jest.mock('providers/Dashboard/store/variableFetchStore', () => ({
-	variableFetchStore: {
-		getSnapshot: jest.fn(),
-	},
-	onVariableFetchComplete: jest.fn(),
-	onVariableFetchFailure: jest.fn(),
-}));
-
-import {
-	onVariableFetchComplete,
-	onVariableFetchFailure,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import {
-	areArraysEqual,
-	buildExistingDynamicVariableQuery,
-	extractErrorMessage,
-	mergeUniqueStrings,
-	onUpdateVariableNode,
-	settleVariableFetch,
-	VariableGraph,
-} from './util';
-
-// ────────────────────────────────────────────────────────────────
-// Existing tests
-// ────────────────────────────────────────────────────────────────
+import { areArraysEqual, onUpdateVariableNode, VariableGraph } from './util';
 
 describe('areArraysEqual', () => {
 	it('should return true for equal arrays with same order', () => {
@@ -176,348 +149,3 @@ describe('onUpdateVariableNode', () => {
 		expect(visited).toEqual(['namespace', 'service', 'pod']);
 	});
 });
-
-// ────────────────────────────────────────────────────────────────
-// New tests for functions added in recent commits
-// ────────────────────────────────────────────────────────────────
-
-function makeDynamicVar(
-	overrides: Partial<IDashboardVariable> & { id: string },
-): IDashboardVariable {
-	return {
-		name: overrides.id,
-		description: '',
-		type: 'DYNAMIC',
-		sort: 'DISABLED',
-		multiSelect: false,
-		showALLOption: false,
-		allSelected: false,
-		dynamicVariablesAttribute: 'attr',
-		selectedValue: 'some-value',
-		...overrides,
-	} as IDashboardVariable;
-}
-
-describe('mergeUniqueStrings', () => {
-	it('should merge two arrays and deduplicate', () => {
-		expect(mergeUniqueStrings(['a', 'b'], ['b', 'c'])).toEqual(['a', 'b', 'c']);
-	});
-
-	it('should convert numbers and booleans to strings', () => {
-		expect(mergeUniqueStrings([1, true, 'hello'], [2, false])).toEqual([
-			'1',
-			'true',
-			'hello',
-			'2',
-			'false',
-		]);
-	});
-
-	it('should deduplicate when number and its string form both appear', () => {
-		expect(mergeUniqueStrings([42], ['42'])).toEqual(['42']);
-	});
-
-	it('should handle a single array', () => {
-		expect(mergeUniqueStrings(['x', 'y', 'x'])).toEqual(['x', 'y']);
-	});
-
-	it('should handle three or more arrays', () => {
-		expect(mergeUniqueStrings(['a'], ['b'], ['c'], ['a', 'c'])).toEqual([
-			'a',
-			'b',
-			'c',
-		]);
-	});
-
-	it('should return empty array when no arrays are provided', () => {
-		expect(mergeUniqueStrings()).toEqual([]);
-	});
-
-	it('should return empty array when all input arrays are empty', () => {
-		expect(mergeUniqueStrings([], [], [])).toEqual([]);
-	});
-
-	it('should preserve order of first occurrence', () => {
-		expect(mergeUniqueStrings(['c', 'a'], ['b', 'a'])).toEqual(['c', 'a', 'b']);
-	});
-});
-
-describe('buildExistingDynamicVariableQuery', () => {
-	// --- Guard clauses ---
-	it('should return empty string when existingVariables is null', () => {
-		expect(buildExistingDynamicVariableQuery(null, 'v1', true)).toBe('');
-	});
-
-	it('should return empty string when hasDynamicAttribute is false', () => {
-		const variables = { v2: makeDynamicVar({ id: 'v2' }) };
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', false)).toBe('');
-	});
-
-	// --- Eligibility filtering ---
-	it('should skip the current variable (same id)', () => {
-		const variables = {
-			v1: makeDynamicVar({
-				id: 'v1',
-				dynamicVariablesAttribute: 'ns',
-				selectedValue: 'prod',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip non-DYNAMIC variables', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', type: 'QUERY' as any }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables without dynamicVariablesAttribute', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: undefined,
-				selectedValue: 'val',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables with null selectedValue', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', selectedValue: null }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables with empty string selectedValue', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', selectedValue: '' }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables with empty array selectedValue', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', selectedValue: [] }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables where showALLOption and allSelected are both true', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				showALLOption: true,
-				allSelected: true,
-				dynamicVariablesAttribute: 'ns',
-				selectedValue: 'prod',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should include variable with showALLOption true but allSelected false', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				showALLOption: true,
-				allSelected: false,
-				dynamicVariablesAttribute: 'ns',
-				selectedValue: 'prod',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"ns = 'prod'",
-		);
-	});
-
-	// --- Value formatting ---
-	it('should quote string values in the query', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'k8s.namespace.name',
-				selectedValue: 'zeus',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"k8s.namespace.name = 'zeus'",
-		);
-	});
-
-	it('should leave numeric values unquoted', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'http.status_code',
-				selectedValue: '200',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			'http.status_code = 200',
-		);
-	});
-
-	it('should escape single quotes in string values', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'user.name',
-				selectedValue: "O'Brien",
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"user.name = 'O\\'Brien'",
-		);
-	});
-
-	it('should build an IN clause for array selectedValue with multiple items', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'k8s.namespace.name',
-				selectedValue: ['zeus', 'gene'],
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"k8s.namespace.name IN ['zeus', 'gene']",
-		);
-	});
-
-	it('should handle mix of numeric and string values in IN clause', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'http.status_code',
-				selectedValue: ['200', 'unknown'],
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"http.status_code IN [200, 'unknown']",
-		);
-	});
-
-	it('should filter out empty string values from array', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'region',
-				selectedValue: ['us-east', '', 'eu-west'],
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"region IN ['us-east', 'eu-west']",
-		);
-	});
-
-	// --- Multiple siblings ---
-	it('should join multiple sibling variables with AND', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'k8s.namespace.name',
-				selectedValue: ['zeus', 'gene'],
-			}),
-			v3: makeDynamicVar({
-				id: 'v3',
-				dynamicVariablesAttribute: 'doc_op_type',
-				selectedValue: 'test',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"k8s.namespace.name IN ['zeus', 'gene'] AND doc_op_type = 'test'",
-		);
-	});
-
-	it('should return empty string when no variables are eligible', () => {
-		const variables = {
-			v1: makeDynamicVar({ id: 'v1' }), // same as current — skipped
-			v2: makeDynamicVar({ id: 'v2', type: 'QUERY' as any }), // not DYNAMIC
-			v3: makeDynamicVar({ id: 'v3', selectedValue: null }), // no value
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-});
-
-describe('settleVariableFetch', () => {
-	const mockGetSnapshot = variableFetchStore.getSnapshot as jest.Mock;
-	const mockComplete = onVariableFetchComplete as jest.Mock;
-	const mockFailure = onVariableFetchFailure as jest.Mock;
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('should no-op when name is undefined', () => {
-		settleVariableFetch(undefined, 'complete');
-		expect(mockGetSnapshot).not.toHaveBeenCalled();
-		expect(mockComplete).not.toHaveBeenCalled();
-		expect(mockFailure).not.toHaveBeenCalled();
-	});
-
-	it.each(['idle', 'waiting', 'error', undefined] as const)(
-		'should no-op when variable state is %s',
-		(state) => {
-			mockGetSnapshot.mockReturnValue({ states: { myVar: state } });
-			settleVariableFetch('myVar', 'complete');
-			expect(mockComplete).not.toHaveBeenCalled();
-			expect(mockFailure).not.toHaveBeenCalled();
-		},
-	);
-
-	it('should call onVariableFetchComplete when state is loading and outcome is complete', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'loading' } });
-		settleVariableFetch('myVar', 'complete');
-		expect(mockComplete).toHaveBeenCalledWith('myVar');
-		expect(mockFailure).not.toHaveBeenCalled();
-	});
-
-	it('should call onVariableFetchComplete when state is revalidating and outcome is complete', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'revalidating' } });
-		settleVariableFetch('myVar', 'complete');
-		expect(mockComplete).toHaveBeenCalledWith('myVar');
-		expect(mockFailure).not.toHaveBeenCalled();
-	});
-
-	it('should call onVariableFetchFailure when state is loading and outcome is failure', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'loading' } });
-		settleVariableFetch('myVar', 'failure');
-		expect(mockFailure).toHaveBeenCalledWith('myVar');
-		expect(mockComplete).not.toHaveBeenCalled();
-	});
-
-	it('should call onVariableFetchFailure when state is revalidating and outcome is failure', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'revalidating' } });
-		settleVariableFetch('myVar', 'failure');
-		expect(mockFailure).toHaveBeenCalledWith('myVar');
-		expect(mockComplete).not.toHaveBeenCalled();
-	});
-});
-
-describe('extractErrorMessage', () => {
-	const FALLBACK_MESSAGE =
-		'Please make sure configuration is valid and you have required setup and permissions';
-
-	it('should return SOMETHING_WENT_WRONG when error is null', () => {
-		expect(extractErrorMessage(null)).toBe('Something went wrong');
-	});
-
-	it('should return the error message when it exists', () => {
-		expect(extractErrorMessage({ message: 'Query timeout' })).toBe(
-			'Query timeout',
-		);
-	});
-
-	it('should return fallback when error object has no message property', () => {
-		expect(extractErrorMessage({})).toBe(FALLBACK_MESSAGE);
-	});
-
-	it('should return fallback when error.message is empty string', () => {
-		expect(extractErrorMessage({ message: '' })).toBe(FALLBACK_MESSAGE);
-	});
-
-	it('should return fallback when error.message is undefined', () => {
-		expect(extractErrorMessage({ message: undefined })).toBe(FALLBACK_MESSAGE);
-	});
-});

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyTypes.ts

@@ -1,11 +1,17 @@
-import { VariableItemProps } from '../VariableItem';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 export interface VariableSelectStrategy {
 	handleChange(params: {
 		value: string | string[];
-		variableData: VariableItemProps['variableData'];
-		onValueUpdate: VariableItemProps['onValueUpdate'];
+		variableData: IDashboardVariable;
 		optionsData: (string | number | boolean)[];
 		allAvailableOptionStrings: string[];
+		onValueUpdate: (
+			name: string,
+			id: string,
+			value: IDashboardVariable['selectedValue'],
+			allSelected: boolean,
+			haveCustomValuesSelected?: boolean,
+		) => void;
 	}): void;
 }

frontend/src/container/DashboardContainer/__test__/DynamicVariableDefaultBehavior.test.tsx

@@ -17,19 +17,6 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import DynamicVariableInput from '../DashboardVariablesSelection/DynamicVariableInput';
 
-// Mock useVariableFetchState to return "fetching" state so useQuery is enabled
-jest.mock('hooks/dashboard/useVariableFetchState', () => ({
-	useVariableFetchState: (): Record<string, unknown> => ({
-		variableFetchCycleId: 0,
-		variableFetchState: 'loading',
-		isVariableSettled: false,
-		isVariableFetching: true,
-		hasVariableFetchedOnce: false,
-		isVariableWaitingForDependencies: false,
-		variableDependencyWaitMessage: '',
-	}),
-}));
-
 // Mock the getFieldValues API
 jest.mock('api/dynamicVariables/getFieldValues', () => ({
 	getFieldValues: jest.fn(),
@@ -108,7 +95,7 @@ describe('Dynamic Variable Default Behavior', () => {
 						}
 					}
 					if (queryFn) {
-						queryFn({ signal: undefined });
+						queryFn();
 					}
 				}
 			}, [enabled, variableName, dynamicVarsKey]); // Only depend on enabled/keys
@@ -247,7 +234,6 @@ describe('Dynamic Variable Default Behavior', () => {
 					'2023-01-01T00:00:00Z',
 					'2023-01-02T00:00:00Z',
 					'',
-					undefined, // signal
 				);
 			});
 
@@ -501,7 +487,6 @@ describe('Dynamic Variable Default Behavior', () => {
 					'2023-01-01T00:00:00Z',
 					'2023-01-02T00:00:00Z',
 					'',
-					undefined, // signal
 				);
 			});
 

frontend/src/container/DashboardContainer/__test__/IntegrationTests.test.tsx

@@ -49,11 +49,15 @@ const mockDashboard = {
 // Mock the dashboard provider with stable functions to prevent infinite loops
 const mockSetSelectedDashboard = jest.fn();
 const mockUpdateLocalStorageDashboardVariables = jest.fn();
+const mockSetVariablesToGetUpdated = jest.fn();
+
 jest.mock('providers/Dashboard/Dashboard', () => ({
 	useDashboard: (): any => ({
 		selectedDashboard: mockDashboard,
 		setSelectedDashboard: mockSetSelectedDashboard,
 		updateLocalStorageDashboardVariables: mockUpdateLocalStorageDashboardVariables,
+		variablesToGetUpdated: ['env'], // Stable initial value
+		setVariablesToGetUpdated: mockSetVariablesToGetUpdated,
 	}),
 }));
 

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.styles.scss

@@ -1,71 +0,0 @@
-.dashboard-breadcrumbs {
-	width: 100%;
-	height: 48px;
-	display: flex;
-	gap: 6px;
-	align-items: center;
-	max-width: 80%;
-
-	.dashboard-btn {
-		display: flex;
-		align-items: center;
-		color: var(--bg-vanilla-400);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-		padding: 0px;
-		height: 20px;
-	}
-
-	.dashboard-btn:hover {
-		background-color: unset;
-	}
-
-	.id-btn {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		padding: 0px 2px;
-		border-radius: 2px;
-		background: rgba(113, 144, 249, 0.1);
-		color: var(--bg-robin-400);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		height: 20px;
-
-		max-width: calc(100% - 120px);
-
-		span {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		.ant-btn-icon {
-			margin-inline-end: 4px;
-		}
-	}
-	.id-btn:hover {
-		background: rgba(113, 144, 249, 0.1);
-		color: var(--bg-robin-300);
-	}
-
-	.dashboard-icon-image {
-		height: 14px;
-		width: 14px;
-	}
-}
-
-.lightMode {
-	.dashboard-breadcrumbs {
-		.dashboard-btn {
-			color: var(--bg-ink-400);
-		}
-	}
-}

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,55 +0,0 @@
-import { useCallback } from 'react';
-import { Button } from 'antd';
-import ROUTES from 'constants/routes';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { LayoutGrid } from 'lucide-react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { DashboardData } from 'types/api/dashboard/getAll';
-
-import { Base64Icons } from '../../DashboardSettings/General/utils';
-
-import './DashboardBreadcrumbs.styles.scss';
-
-function DashboardBreadcrumbs(): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-	const { selectedDashboard, listSortOrder } = useDashboard();
-
-	const selectedData = selectedDashboard
-		? {
-				...selectedDashboard.data,
-				uuid: selectedDashboard.id,
-		  }
-		: ({} as DashboardData);
-
-	const { title = '', image = Base64Icons[0] } = selectedData || {};
-
-	const goToListPage = useCallback(() => {
-		const urlParams = new URLSearchParams();
-		urlParams.set('columnKey', listSortOrder.columnKey as string);
-		urlParams.set('order', listSortOrder.order as string);
-		urlParams.set('page', listSortOrder.pagination as string);
-		urlParams.set('search', listSortOrder.search as string);
-
-		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
-		safeNavigate(generatedUrl);
-	}, [listSortOrder, safeNavigate]);
-
-	return (
-		<div className="dashboard-breadcrumbs">
-			<Button
-				type="text"
-				icon={<LayoutGrid size={14} />}
-				className="dashboard-btn"
-				onClick={goToListPage}
-			>
-				Dashboard /
-			</Button>
-			<Button type="text" className="id-btn dashboard-name-btn">
-				<img src={image} alt="dashboard-icon" className="dashboard-icon-image" />
-				{title}
-			</Button>
-		</div>
-	);
-}
-
-export default DashboardBreadcrumbs;

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardHeader.styles.scss

@@ -1,15 +0,0 @@
-.dashboard-header {
-	border-bottom: 1px solid var(--bg-slate-400);
-	display: flex;
-	justify-content: space-between;
-	gap: 16px;
-	align-items: center;
-	padding: 0 8px;
-	box-sizing: border-box;
-}
-
-.lightMode {
-	.dashboard-header {
-		border-bottom: 1px solid var(--bg-vanilla-300);
-	}
-}

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardHeader.tsx

@@ -1,17 +0,0 @@
-import { memo } from 'react';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-
-import DashboardBreadcrumbs from './DashboardBreadcrumbs';
-
-import './DashboardHeader.styles.scss';
-
-function DashboardHeader(): JSX.Element {
-	return (
-		<div className="dashboard-header">
-			<DashboardBreadcrumbs />
-			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
-		</div>
-	);
-}
-
-export default memo(DashboardHeader);

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

@@ -23,7 +23,6 @@ export default function ChartWrapper({
 	width: containerWidth,
 	height: containerHeight,
 	showTooltip = true,
-	showLegend = true,
 	canPinTooltip = false,
 	syncMode,
 	syncKey,
@@ -37,9 +36,6 @@ export default function ChartWrapper({
 
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
-			if (!showLegend) {
-				return null;
-			}
 			return (
 				<Legend
 					config={config}
@@ -48,7 +44,7 @@ export default function ChartWrapper({
 				/>
 			);
 		},
-		[config, legendConfig.position, showLegend],
+		[config, legendConfig.position],
 	);
 
 	const renderTooltipCallback = useCallback(
@@ -64,7 +60,6 @@ export default function ChartWrapper({
 	return (
 		<PlotContextProvider>
 			<ChartLayout
-				showLegend={showLegend}
 				config={config}
 				containerWidth={containerWidth}
 				containerHeight={containerHeight}

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

@@ -1,55 +0,0 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import HistogramTooltip from 'lib/uPlotV2/components/Tooltip/HistogramTooltip';
-import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
-import {
-	HistogramTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-
-import { HistogramChartProps } from '../types';
-
-export default function Histogram(props: HistogramChartProps): JSX.Element {
-	const {
-		children,
-		renderTooltip: customRenderTooltip,
-		isQueriesMerged,
-		...rest
-	} = props;
-
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			if (customRenderTooltip) {
-				return customRenderTooltip(props);
-			}
-			const content = buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: rest.yAxisUnit ?? '',
-				decimalPrecision: rest.decimalPrecision,
-			});
-			const tooltipProps: HistogramTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-				content,
-			};
-			return <HistogramTooltip {...tooltipProps} />;
-		},
-		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
-	);
-
-	return (
-		<ChartWrapper
-			showLegend={!isQueriesMerged}
-			{...rest}
-			renderTooltip={renderTooltip}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}

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

@@ -7,7 +7,6 @@ interface BaseChartProps {
 	width: number;
 	height: number;
 	showTooltip?: boolean;
-	showLegend?: boolean;
 	timezone: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
@@ -18,7 +17,6 @@ interface BaseChartProps {
 interface UPlotBasedChartProps {
 	config: UPlotConfigBuilder;
 	data: uPlot.AlignedData;
-	legendConfig: LegendConfig;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
@@ -28,20 +26,14 @@ interface UPlotBasedChartProps {
 }
 
 export interface TimeSeriesChartProps
-	extends BaseChartProps,
-		UPlotBasedChartProps {}
-
-export interface HistogramChartProps
 	extends BaseChartProps,
 		UPlotBasedChartProps {
-	isQueriesMerged?: boolean;
+	legendConfig: LegendConfig;
 }
 
 export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
+	legendConfig: LegendConfig;
 	isStackedBarChart?: boolean;
 }
 
-export type ChartProps =
-	| TimeSeriesChartProps
-	| BarChartProps
-	| HistogramChartProps;
+export type ChartProps = TimeSeriesChartProps | BarChartProps;

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackUtils.test.ts

@@ -1,117 +0,0 @@
-import { AlignedData } from 'uplot';
-
-import { getInitialStackedBands, stack } from '../stackUtils';
-
-describe('stackUtils', () => {
-	describe('stack', () => {
-		const neverOmit = (): boolean => false;
-
-		it('preserves time axis as first row', () => {
-			const data: AlignedData = [
-				[100, 200, 300],
-				[1, 2, 3],
-				[4, 5, 6],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[0]).toEqual([100, 200, 300]);
-		});
-
-		it('stacks value series cumulatively (last = raw, first = total)', () => {
-			// Time, then 3 value series. Stack order: last series stays raw, then we add upward.
-			const data: AlignedData = [
-				[0, 1, 2],
-				[1, 2, 3], // series 1
-				[4, 5, 6], // series 2
-				[7, 8, 9], // series 3
-			];
-			const { data: result } = stack(data, neverOmit);
-			// result[1] = s1+s2+s3, result[2] = s2+s3, result[3] = s3
-			expect(result[1]).toEqual([12, 15, 18]); // 1+4+7, 2+5+8, 3+6+9
-			expect(result[2]).toEqual([11, 13, 15]); // 4+7, 5+8, 6+9
-			expect(result[3]).toEqual([7, 8, 9]);
-		});
-
-		it('treats null values as 0 when stacking', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, null],
-				[null, 10],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[1]).toEqual([1, 10]); // total
-			expect(result[2]).toEqual([0, 10]); // last series with null→0
-		});
-
-		it('copies omitted series as-is without accumulating', () => {
-			// Omit series 2 (index 2); series 1 and 3 are stacked.
-			const data: AlignedData = [
-				[0, 1],
-				[10, 20], // series 1
-				[100, 200], // series 2 - omitted
-				[1, 2], // series 3
-			];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { data: result } = stack(data, omitSeries2);
-			// series 3 raw: [1, 2]; series 2 omitted: [100, 200] as-is; series 1 stacked with s3: [11, 22]
-			expect(result[1]).toEqual([11, 22]); // 10+1, 20+2
-			expect(result[2]).toEqual([100, 200]); // copied, not stacked
-			expect(result[3]).toEqual([1, 2]);
-		});
-
-		it('returns bands between consecutive visible series when none omitted', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-				[3, 4],
-				[5, 6],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toEqual([{ series: [1, 2] }, { series: [2, 3] }]);
-		});
-
-		it('returns bands only between visible series when some are omitted', () => {
-			// 4 value series; omit index 2. Visible: 1, 3, 4. Bands: [1,3], [3,4]
-			const data: AlignedData = [[0], [1], [2], [3], [4]];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { bands } = stack(data, omitSeries2);
-			expect(bands).toEqual([{ series: [1, 3] }, { series: [3, 4] }]);
-		});
-
-		it('returns empty bands when only one value series', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toEqual([]);
-		});
-	});
-
-	describe('getInitialStackedBands', () => {
-		it('returns one band between each consecutive pair for seriesCount 3', () => {
-			expect(getInitialStackedBands(3)).toEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-			]);
-		});
-
-		it('returns empty array for seriesCount 0 or 1', () => {
-			expect(getInitialStackedBands(0)).toEqual([]);
-			expect(getInitialStackedBands(1)).toEqual([]);
-		});
-
-		it('returns single band for seriesCount 2', () => {
-			expect(getInitialStackedBands(2)).toEqual([{ series: [1, 2] }]);
-		});
-
-		it('returns bands [1,2], [2,3], ..., [n-1, n] for seriesCount n', () => {
-			const bands = getInitialStackedBands(5);
-			expect(bands).toEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-				{ series: [3, 4] },
-				{ series: [4, 5] },
-			]);
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/utils/stackUtils.ts

@@ -1,116 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
- */
-export function stack(
-	data: AlignedData,
-	omit: (seriesIndex: number) => boolean,
-): { data: AlignedData; bands: uPlot.Band[] } {
-	const timeAxis = data[0];
-	const pointCount = timeAxis.length;
-	const valueSeriesCount = data.length - 1; // exclude time axis
-
-	const stackedSeries = buildStackedSeries({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-	});
-	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
-
-	return {
-		data: [timeAxis, ...stackedSeries] as AlignedData,
-		bands,
-	};
-}
-
-interface BuildStackedSeriesParams {
-	data: AlignedData;
-	valueSeriesCount: number;
-	pointCount: number;
-	omit: (seriesIndex: number) => boolean;
-}
-
-/**
- * Accumulate from last series upward: last series = raw values, first = total.
- * Omitted series are copied as-is (no accumulation).
- */
-function buildStackedSeries({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: BuildStackedSeriesParams): (number | null)[][] {
-	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
-	const cumulativeSums = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
-		const rawValues = data[seriesIndex] as (number | null)[];
-
-		if (omit(seriesIndex)) {
-			stackedSeries[seriesIndex - 1] = rawValues;
-		} else {
-			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
-				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
-			});
-		}
-	}
-
-	return stackedSeries;
-}
-
-/**
- * Bands define fill between consecutive visible series for stacked appearance.
- * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
- */
-function buildFillBands(
-	seriesLength: number,
-	omit: (seriesIndex: number) => boolean,
-): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-
-	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
-			seriesLength,
-			seriesIndex,
-			omit,
-		);
-		if (nextVisibleSeriesIndex !== -1) {
-			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
-		}
-	}
-
-	return bands;
-}
-
-function findNextVisibleSeriesIndex(
-	seriesLength: number,
-	afterIndex: number,
-	omit: (seriesIndex: number) => boolean,
-): number {
-	for (let i = afterIndex + 1; i < seriesLength; i++) {
-		if (!omit(i)) {
-			return i;
-		}
-	}
-	return -1;
-}
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useBarChartStacking.test.ts

@@ -1,313 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import uPlot from 'uplot';
-
-import type { UseBarChartStackingParams } from '../useBarChartStacking';
-import { useBarChartStacking } from '../useBarChartStacking';
-
-type MockConfig = { addHook: jest.Mock };
-
-function asConfig(c: MockConfig): UseBarChartStackingParams['config'] {
-	return (c as unknown) as UseBarChartStackingParams['config'];
-}
-
-function createMockConfig(): {
-	config: MockConfig;
-	invokeSetData: (plot: uPlot) => void;
-	invokeSetSeries: (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	) => void;
-	removeSetData: jest.Mock;
-	removeSetSeries: jest.Mock;
-} {
-	let setDataHandler: ((plot: uPlot) => void) | null = null;
-	let setSeriesHandler:
-		| ((plot: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
-		| null = null;
-
-	const removeSetData = jest.fn();
-	const removeSetSeries = jest.fn();
-
-	const addHook = jest.fn(
-		(
-			hookName: string,
-			handler: (plot: uPlot, ...args: unknown[]) => void,
-		): (() => void) => {
-			if (hookName === 'setData') {
-				setDataHandler = handler as (plot: uPlot) => void;
-				return removeSetData;
-			}
-			if (hookName === 'setSeries') {
-				setSeriesHandler = handler as (
-					plot: uPlot,
-					seriesIndex: number | null,
-					opts: uPlot.Series,
-				) => void;
-				return removeSetSeries;
-			}
-			return jest.fn();
-		},
-	);
-
-	const config: MockConfig = { addHook };
-
-	const invokeSetData = (plot: uPlot): void => {
-		setDataHandler?.(plot);
-	};
-
-	const invokeSetSeries = (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	): void => {
-		setSeriesHandler?.(plot, seriesIndex, opts as uPlot.Series);
-	};
-
-	return {
-		config,
-		invokeSetData,
-		invokeSetSeries,
-		removeSetData,
-		removeSetSeries,
-	};
-}
-
-function createMockPlot(overrides: Partial<uPlot> = {}): uPlot {
-	return ({
-		data: [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		],
-		series: [{ show: true }, { show: true }, { show: true }],
-		delBand: jest.fn(),
-		addBand: jest.fn(),
-		setData: jest.fn(),
-		...overrides,
-	} as unknown) as uPlot;
-}
-
-describe('useBarChartStacking', () => {
-	it('returns data as-is when isStackedBarChart is false', () => {
-		const data: uPlot.AlignedData = [
-			[100, 200],
-			[1, 2],
-			[3, 4],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: null,
-			}),
-		);
-		expect(result.current).toBe(data);
-	});
-
-	it('returns data as-is when config is null and isStackedBarChart is true', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[4, 5],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		// Still returns stacked data (computed in useMemo); no hooks registered
-		expect(result.current[0]).toEqual([0, 1]);
-		expect(result.current[1]).toEqual([5, 7]); // stacked
-		expect(result.current[2]).toEqual([4, 5]);
-	});
-
-	it('returns stacked data when isStackedBarChart is true and multiple value series', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-			[7, 8, 9],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current[0]).toEqual([0, 1, 2]);
-		expect(result.current[1]).toEqual([12, 15, 18]); // s1+s2+s3
-		expect(result.current[2]).toEqual([11, 13, 15]); // s2+s3
-		expect(result.current[3]).toEqual([7, 8, 9]);
-	});
-
-	it('returns data as-is when only one value series (no stacking needed)', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current).toEqual(data);
-	});
-
-	it('registers setData and setSeries hooks when isStackedBarChart and config provided', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).toHaveBeenCalledWith('setData', expect.any(Function));
-		expect(config.addHook).toHaveBeenCalledWith(
-			'setSeries',
-			expect.any(Function),
-		);
-	});
-
-	it('does not register hooks when isStackedBarChart is false', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).not.toHaveBeenCalled();
-	});
-
-	it('calls cleanup when unmounted', () => {
-		const { config, removeSetData, removeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		const { unmount } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		unmount();
-
-		expect(removeSetData).toHaveBeenCalled();
-		expect(removeSetSeries).toHaveBeenCalled();
-	});
-
-	it('re-stacks and updates plot when setData hook is invoked', () => {
-		const { config, invokeSetData } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		];
-		const plot = createMockPlot({
-			data: [
-				[0, 1, 2],
-				[5, 7, 9],
-				[4, 5, 6],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetData(plot);
-
-		expect(plot.delBand).toHaveBeenCalledWith(null);
-		expect(plot.addBand).toHaveBeenCalled();
-		expect(plot.setData).toHaveBeenCalledWith(
-			expect.arrayContaining([
-				[0, 1, 2],
-				expect.any(Array), // stacked row 1
-				expect.any(Array), // stacked row 2
-			]),
-		);
-	});
-
-	it('re-stacks when setSeries hook is invoked (e.g. legend toggle)', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[10, 20],
-			[5, 10],
-		];
-		// Plot data must match unstacked length so canApplyStacking passes
-		const plot = createMockPlot({
-			data: [
-				[0, 1],
-				[15, 30],
-				[5, 10],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetSeries(plot, 1, { show: false });
-
-		expect(plot.setData).toHaveBeenCalled();
-	});
-
-	it('does not re-stack when setSeries is called with focus option', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-		const plot = createMockPlot();
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		(plot.setData as jest.Mock).mockClear();
-		invokeSetSeries(plot, 1, { focus: true } as uPlot.Series);
-
-		expect(plot.setData).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useScrollWidgetIntoView.test.ts

@@ -1,69 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-
-import { useScrollWidgetIntoView } from '../useScrollWidgetIntoView';
-
-jest.mock('providers/Dashboard/Dashboard');
-
-type MockHTMLElement = {
-	scrollIntoView: jest.Mock;
-	focus: jest.Mock;
-};
-
-function createMockElement(): MockHTMLElement {
-	return {
-		scrollIntoView: jest.fn(),
-		focus: jest.fn(),
-	};
-}
-
-describe('useScrollWidgetIntoView', () => {
-	const mockedUseDashboard = useDashboard as jest.MockedFunction<
-		typeof useDashboard
-	>;
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('scrolls into view and focuses when toScrollWidgetId matches widget id', () => {
-		const setToScrollWidgetId = jest.fn();
-		const mockElement = createMockElement();
-		const ref = ({
-			current: mockElement,
-		} as unknown) as React.RefObject<HTMLDivElement>;
-
-		mockedUseDashboard.mockReturnValue(({
-			toScrollWidgetId: 'widget-id',
-			setToScrollWidgetId,
-		} as unknown) as ReturnType<typeof useDashboard>);
-
-		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
-
-		expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
-			behavior: 'smooth',
-			block: 'center',
-		});
-		expect(mockElement.focus).toHaveBeenCalled();
-		expect(setToScrollWidgetId).toHaveBeenCalledWith('');
-	});
-
-	it('does nothing when toScrollWidgetId does not match widget id', () => {
-		const setToScrollWidgetId = jest.fn();
-		const mockElement = createMockElement();
-		const ref = ({
-			current: mockElement,
-		} as unknown) as React.RefObject<HTMLDivElement>;
-
-		mockedUseDashboard.mockReturnValue(({
-			toScrollWidgetId: 'other-widget',
-			setToScrollWidgetId,
-		} as unknown) as ReturnType<typeof useDashboard>);
-
-		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
-
-		expect(mockElement.scrollIntoView).not.toHaveBeenCalled();
-		expect(mockElement.focus).not.toHaveBeenCalled();
-		expect(setToScrollWidgetId).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView.ts

@@ -1,26 +0,0 @@
-import { RefObject, useEffect } from 'react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-
-/**
- * Scrolls the given widget container into view when the dashboard
- * requests it via `toScrollWidgetId`.
- *
- * Intended for use in panel components that render a single widget.
- */
-export function useScrollWidgetIntoView<T extends HTMLElement>(
-	widgetId: string,
-	widgetContainerRef: RefObject<T>,
-): void {
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-
-	useEffect(() => {
-		if (toScrollWidgetId === widgetId) {
-			widgetContainerRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			widgetContainerRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widgetId, widgetContainerRef]);
-}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,14 +1,12 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import { calculateChartDimensions } from 'container/DashboardContainer/visualization/charts/utils';
-import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 
 import './ChartLayout.styles.scss';
 
 export interface ChartLayoutProps {
-	showLegend?: boolean;
 	legendComponent: (legendPerSet: number) => React.ReactNode;
 	children: (props: {
 		chartWidth: number;
@@ -22,7 +20,6 @@ export interface ChartLayoutProps {
 	config: UPlotConfigBuilder;
 }
 export default function ChartLayout({
-	showLegend = true,
 	legendComponent,
 	children,
 	layoutChildren,
@@ -33,15 +30,6 @@ export default function ChartLayout({
 }: ChartLayoutProps): JSX.Element {
 	const chartDimensions = useMemo(
 		() => {
-			if (!showLegend) {
-				return {
-					width: containerWidth,
-					height: containerHeight,
-					legendWidth: 0,
-					legendHeight: 0,
-					averageLegendWidth: MAX_LEGEND_WIDTH,
-				};
-			}
 			const legendItemsMap = config.getLegendItems();
 			const seriesLabels = Object.values(legendItemsMap)
 				.map((item) => item.label)
@@ -54,7 +42,7 @@ export default function ChartLayout({
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[containerWidth, containerHeight, legendConfig, showLegend],
+		[containerWidth, containerHeight, legendConfig],
 	);
 
 	return (
@@ -72,17 +60,15 @@ export default function ChartLayout({
 						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
-				{showLegend && (
-					<div
-						className="chart-layout__legend-wrapper"
-						style={{
-							height: chartDimensions.legendHeight,
-							width: chartDimensions.legendWidth,
-						}}
-					>
-						{legendComponent(chartDimensions.averageLegendWidth)}
-					</div>
-				)}
+				<div
+					className="chart-layout__legend-wrapper"
+					style={{
+						height: chartDimensions.legendHeight,
+						width: chartDimensions.legendWidth,
+					}}
+				>
+					{legendComponent(chartDimensions.averageLegendWidth)}
+				</div>
 			</div>
 			{layoutChildren}
 		</div>

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

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import ContextMenu from 'periscope/components/ContextMenu';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
@@ -27,6 +27,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		onToggleModelHandler,
 	} = props;
 	const uPlotRef = useRef<uPlot | null>(null);
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
@@ -35,7 +36,16 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useScrollWidgetIntoView(widget.id, graphRef);
+	useEffect(() => {
+		if (toScrollWidgetId === widget.id) {
+			graphRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			graphRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

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

@@ -11,7 +11,6 @@ import {
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -78,12 +77,6 @@ export function prepareBarPanelConfig({
 		builder.setBands(getInitialStackedBands(seriesCount));
 	}
 
-	const stepIntervals: Record<string, number> = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	);
-
 	const seriesList: QueryData[] = apiResponse?.data?.result || [];
 	seriesList.forEach((series) => {
 		const baseLabelName = getLabelName(
@@ -96,8 +89,6 @@ export function prepareBarPanelConfig({
 			? getLegend(series, currentQuery, baseLabelName)
 			: baseLabelName;
 
-		const currentStepInterval = get(stepIntervals, series.queryName, undefined);
-
 		builder.addSeries({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Bar,
@@ -110,7 +101,6 @@ export function prepareBarPanelConfig({
 			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
-			stepInterval: currentStepInterval,
 		});
 	});
 

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

@@ -1,114 +0,0 @@
-import { useMemo, useRef } from 'react';
-import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
-import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import Histogram from '../../charts/Histogram/Histogram';
-import ChartManager from '../../components/ChartManager/ChartManager';
-import {
-	prepareHistogramPanelConfig,
-	prepareHistogramPanelData,
-} from './utils';
-
-import '../Panel.styles.scss';
-
-function HistogramPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const uPlotRef = useRef<uPlot | null>(null);
-	const graphRef = useRef<HTMLDivElement>(null);
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useScrollWidgetIntoView(widget.id, graphRef);
-
-	const config = useMemo(() => {
-		return prepareHistogramPanelConfig({
-			widget,
-			isDarkMode,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			panelMode,
-		});
-	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareHistogramPanelData({
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			bucketWidth: widget?.bucketWidth,
-			bucketCount: widget?.bucketCount,
-			mergeAllActiveQueries: widget?.mergeAllActiveQueries,
-		});
-	}, [
-		queryResponse?.data?.payload,
-		widget?.bucketWidth,
-		widget?.bucketCount,
-		widget?.mergeAllActiveQueries,
-	]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode || widget.mergeAllActiveQueries) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-		widget.mergeAllActiveQueries,
-	]);
-
-	return (
-		<div className="panel-container" ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<Histogram
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					plotRef={(plot: uPlot | null): void => {
-						uPlotRef.current = plot;
-					}}
-					onDestroy={(): void => {
-						uPlotRef.current = null;
-					}}
-					isQueriesMerged={widget.mergeAllActiveQueries}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					syncMode={DashboardCursorSync.Crosshair}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default HistogramPanel;

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/__tests__/HistogramPanel.test.tsx

@@ -1,223 +0,0 @@
-/* eslint-disable simple-import-sort/imports */
-import type { UseQueryResult } from 'react-query';
-import { render, screen } from 'tests/test-utils';
-
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { Widgets } from 'types/api/dashboard/getAll';
-import {
-	MetricQueryRangeSuccessResponse,
-	MetricRangePayloadProps,
-} from 'types/api/metrics/getQueryRange';
-
-import HistogramPanel from '../HistogramPanel';
-import { HistogramChartProps } from 'container/DashboardContainer/visualization/charts/types';
-
-jest.mock('hooks/useDimensions', () => ({
-	useResizeObserver: jest.fn().mockReturnValue({ width: 800, height: 400 }),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: jest.fn().mockReturnValue(false),
-}));
-
-jest.mock('providers/Timezone', () => ({
-	__esModule: true,
-	// Provide a no-op provider component so AllTheProviders can render
-	default: ({ children }: { children: React.ReactNode }): JSX.Element => (
-		<>{children}</>
-	),
-	// And mock the hook used by HistogramPanel
-	useTimezone: jest.fn().mockReturnValue({
-		timezone: { value: 'UTC' },
-	}),
-}));
-
-jest.mock(
-	'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView',
-	() => ({
-		useScrollWidgetIntoView: jest.fn(),
-	}),
-);
-
-jest.mock(
-	'container/DashboardContainer/visualization/charts/Histogram/Histogram',
-	() => ({
-		__esModule: true,
-		default: (props: HistogramChartProps): JSX.Element => (
-			<div data-testid="histogram-chart">
-				<div data-testid="histogram-props">
-					{JSON.stringify({
-						legendPosition: props.legendConfig?.position,
-						isQueriesMerged: props.isQueriesMerged,
-						yAxisUnit: props.yAxisUnit,
-						decimalPrecision: props.decimalPrecision,
-					})}
-				</div>
-				{props.layoutChildren}
-			</div>
-		),
-	}),
-);
-
-jest.mock(
-	'container/DashboardContainer/visualization/components/ChartManager/ChartManager',
-	() => ({
-		__esModule: true,
-		default: (): JSX.Element => (
-			<div data-testid="chart-manager">ChartManager</div>
-		),
-	}),
-);
-
-function createQueryResponse(
-	payloadOverrides: Partial<MetricRangePayloadProps> = {},
-): { data: { payload: MetricRangePayloadProps } } {
-	const basePayload: MetricRangePayloadProps = {
-		data: {
-			result: [
-				{
-					metric: {},
-					queryName: 'A',
-					legend: 'Series A',
-					values: [
-						[1, '10'],
-						[2, '20'],
-					],
-				},
-			],
-			resultType: 'matrix',
-			newResult: {
-				data: {
-					result: [],
-					resultType: 'matrix',
-				},
-			},
-		},
-	};
-
-	return {
-		data: {
-			payload: {
-				...basePayload,
-				...payloadOverrides,
-			},
-		},
-	};
-}
-
-type WidgetLike = {
-	id: string;
-	yAxisUnit: string;
-	decimalPrecision: number;
-	legendPosition: LegendPosition;
-	mergeAllActiveQueries: boolean;
-};
-
-function createWidget(overrides: Partial<WidgetLike> = {}): WidgetLike {
-	return {
-		id: 'widget-id',
-		yAxisUnit: 'ms',
-		decimalPrecision: 2,
-		legendPosition: LegendPosition.BOTTOM,
-		mergeAllActiveQueries: false,
-		...overrides,
-	};
-}
-
-describe('HistogramPanel', () => {
-	it('renders Histogram when container has dimensions', () => {
-		const widget = (createWidget() as unknown) as Widgets;
-		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
-			MetricQueryRangeSuccessResponse,
-			Error
-		>;
-
-		render(
-			<HistogramPanel
-				panelMode={PanelMode.DASHBOARD_VIEW}
-				widget={widget}
-				queryResponse={queryResponse}
-				isFullViewMode={false}
-				onToggleModelHandler={jest.fn()}
-				onDragSelect={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByTestId('histogram-chart')).toBeInTheDocument();
-	});
-
-	it('passes legend position and other props to Histogram', () => {
-		const widget = (createWidget({
-			legendPosition: LegendPosition.RIGHT,
-		}) as unknown) as Widgets;
-		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
-			MetricQueryRangeSuccessResponse,
-			Error
-		>;
-
-		render(
-			<HistogramPanel
-				panelMode={PanelMode.DASHBOARD_VIEW}
-				widget={widget}
-				queryResponse={queryResponse}
-				isFullViewMode={false}
-				onToggleModelHandler={jest.fn()}
-				onDragSelect={jest.fn()}
-			/>,
-		);
-
-		const propsJson = screen.getByTestId('histogram-props').textContent || '{}';
-		const parsed = JSON.parse(propsJson);
-
-		expect(parsed.legendPosition).toBe(LegendPosition.RIGHT);
-		expect(parsed.yAxisUnit).toBe('ms');
-		expect(parsed.decimalPrecision).toBe(2);
-	});
-
-	it('renders ChartManager in full view when queries are not merged', () => {
-		const widget = (createWidget({
-			mergeAllActiveQueries: false,
-		}) as unknown) as Widgets;
-		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
-			MetricQueryRangeSuccessResponse,
-			Error
-		>;
-
-		render(
-			<HistogramPanel
-				panelMode={PanelMode.DASHBOARD_VIEW}
-				widget={widget}
-				queryResponse={queryResponse}
-				isFullViewMode
-				onToggleModelHandler={jest.fn()}
-				onDragSelect={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByTestId('chart-manager')).toBeInTheDocument();
-	});
-
-	it('does not render ChartManager when queries are merged', () => {
-		const widget = (createWidget({
-			mergeAllActiveQueries: true,
-		}) as unknown) as Widgets;
-		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
-			MetricQueryRangeSuccessResponse,
-			Error
-		>;
-
-		render(
-			<HistogramPanel
-				panelMode={PanelMode.DASHBOARD_VIEW}
-				widget={widget}
-				queryResponse={queryResponse}
-				isFullViewMode
-				onToggleModelHandler={jest.fn()}
-				onDragSelect={jest.fn()}
-			/>,
-		);
-
-		expect(screen.queryByTestId('chart-manager')).not.toBeInTheDocument();
-	});
-});

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

@@ -1,231 +0,0 @@
-import { histogramBucketSizes } from '@grafana/data';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { AlignedData } from 'uplot';
-import { incrRoundDn, roundDecimals } from 'utils/round';
-
-import { PanelMode } from '../types';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
-import {
-	buildHistogramBuckets,
-	mergeAlignedDataTables,
-	prependNullBinToFirstHistogramSeries,
-	replaceUndefinedWithNullInAlignedData,
-} from '../utils/histogram';
-
-export interface PrepareHistogramPanelDataParams {
-	apiResponse: MetricRangePayloadProps;
-	bucketWidth?: number;
-	bucketCount?: number;
-	mergeAllActiveQueries?: boolean;
-}
-
-const BUCKET_OFFSET = 0;
-const HIST_SORT = (a: number, b: number): number => a - b;
-
-function extractNumericValues(
-	result: MetricRangePayloadProps['data']['result'],
-): number[] {
-	const values: number[] = [];
-	for (const item of result) {
-		for (const [, valueStr] of item.values) {
-			values.push(Number.parseFloat(valueStr) || 0);
-		}
-	}
-	return values;
-}
-
-function computeSmallestDelta(sortedValues: number[]): number {
-	if (sortedValues.length <= 1) {
-		return 0;
-	}
-	let smallest = Infinity;
-	for (let i = 1; i < sortedValues.length; i++) {
-		const delta = sortedValues[i] - sortedValues[i - 1];
-		if (delta > 0) {
-			smallest = Math.min(smallest, delta);
-		}
-	}
-	return smallest === Infinity ? 0 : smallest;
-}
-
-function selectBucketSize({
-	range,
-	bucketCount,
-	smallestDelta,
-	bucketWidthOverride,
-}: {
-	range: number;
-	bucketCount: number;
-	smallestDelta: number;
-	bucketWidthOverride?: number;
-}): number {
-	if (bucketWidthOverride != null && bucketWidthOverride > 0) {
-		return bucketWidthOverride;
-	}
-	const targetSize = range / bucketCount;
-	for (const candidate of histogramBucketSizes) {
-		if (targetSize < candidate && candidate >= smallestDelta) {
-			return candidate;
-		}
-	}
-	return 0;
-}
-
-function buildFrames(
-	result: MetricRangePayloadProps['data']['result'],
-	mergeAllActiveQueries: boolean,
-): number[][] {
-	const frames: number[][] = result.map((item) =>
-		item.values.map(([, valueStr]) => Number.parseFloat(valueStr) || 0),
-	);
-	if (mergeAllActiveQueries && frames.length > 1) {
-		const first = frames[0];
-		for (let i = 1; i < frames.length; i++) {
-			first.push(...frames[i]);
-			frames[i] = [];
-		}
-	}
-	return frames;
-}
-
-export function prepareHistogramPanelData({
-	apiResponse,
-	bucketWidth,
-	bucketCount: bucketCountProp = DEFAULT_BUCKET_COUNT,
-	mergeAllActiveQueries = false,
-}: PrepareHistogramPanelDataParams): AlignedData {
-	const bucketCount = bucketCountProp ?? DEFAULT_BUCKET_COUNT;
-	const result = apiResponse.data.result;
-
-	const seriesValues = extractNumericValues(result);
-	if (seriesValues.length === 0) {
-		return [[]];
-	}
-
-	const sorted = [...seriesValues].sort((a, b) => a - b);
-	const min = sorted[0];
-	const max = sorted[sorted.length - 1];
-	const range = max - min;
-	const smallestDelta = computeSmallestDelta(sorted);
-	let bucketSize = selectBucketSize({
-		range,
-		bucketCount,
-		smallestDelta,
-		bucketWidthOverride: bucketWidth,
-	});
-	if (bucketSize <= 0) {
-		bucketSize = range > 0 ? range / bucketCount : 1;
-	}
-
-	const getBucket = (v: number): number =>
-		roundDecimals(incrRoundDn(v - BUCKET_OFFSET, bucketSize) + BUCKET_OFFSET, 9);
-
-	const frames = buildFrames(result, mergeAllActiveQueries);
-	const histogramsPerSeries: AlignedData[] = frames
-		.filter((frame) => frame.length > 0)
-		.map((frame) => buildHistogramBuckets(frame, getBucket, HIST_SORT));
-
-	if (histogramsPerSeries.length === 0) {
-		return [[]];
-	}
-
-	const mergedHistogramData = mergeAlignedDataTables(histogramsPerSeries);
-	replaceUndefinedWithNullInAlignedData(mergedHistogramData);
-	prependNullBinToFirstHistogramSeries(mergedHistogramData, bucketSize);
-	return mergedHistogramData;
-}
-
-export function prepareHistogramPanelConfig({
-	widget,
-	apiResponse,
-	panelMode,
-	isDarkMode,
-}: {
-	widget: Widgets;
-	apiResponse: MetricRangePayloadProps;
-	panelMode: PanelMode;
-	isDarkMode: boolean;
-}): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		apiResponse,
-		panelMode,
-		panelType: PANEL_TYPES.HISTOGRAM,
-	});
-	builder.setCursor({
-		drag: {
-			x: false,
-			y: false,
-			setScale: true,
-		},
-		focus: {
-			prox: 1e3,
-		},
-	});
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: false,
-		auto: true,
-	});
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		auto: true,
-		min: 0,
-	});
-
-	const currentQuery = widget.query;
-	const mergeAllActiveQueries = widget?.mergeAllActiveQueries ?? false;
-
-	// When merged, data has only one y column; add one series to match. Otherwise add one per result.
-	if (mergeAllActiveQueries) {
-		builder.addSeries({
-			label: '',
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.HISTOGRAM,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			barWidthFactor: 1,
-			pointSize: 5,
-			lineColor: '#3f5ecc',
-			fillColor: '#4E74F8',
-			isDarkMode,
-		});
-	} else {
-		apiResponse.data.result.forEach((series) => {
-			const baseLabelName = getLabelName(
-				series.metric,
-				series.queryName || '', // query
-				series.legend || '',
-			);
-
-			const label = currentQuery
-				? getLegend(series, currentQuery, baseLabelName)
-				: baseLabelName;
-
-			builder.addSeries({
-				label: label,
-				scaleKey: 'y',
-				drawStyle: DrawStyle.Bar,
-				panelType: PANEL_TYPES.HISTOGRAM,
-				colorMapping: widget.customLegendColors ?? {},
-				spanGaps: false,
-				barWidthFactor: 1,
-				pointSize: 5,
-				isDarkMode,
-			});
-		});
-	}
-
-	return builder;
-}

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

@@ -2,12 +2,12 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
 import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
 import { usePanelContextMenu } from 'container/DashboardContainer/visualization/hooks/usePanelContextMenu';
-import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
@@ -26,6 +26,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 	} = props;
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
@@ -34,7 +35,16 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useScrollWidgetIntoView(widget.id, graphRef);
+	useEffect(() => {
+		if (toScrollWidgetId === widget.id) {
+			graphRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			graphRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

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

@@ -14,11 +14,9 @@ import {
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { isInvalidPlotValue } from 'lib/uPlotV2/utils/dataUtils';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
 
 import { PanelMode } from '../types';
 import { buildBaseConfig } from '../utils/baseConfigBuilder';
@@ -33,22 +31,6 @@ export const prepareChartData = (
 	return [timestampArr, ...yAxisValuesArr];
 };
 
-function hasSingleVisiblePointForSeries(series: QueryData): boolean {
-	const rawValues = series.values ?? [];
-	let validPointCount = 0;
-
-	for (const [, rawValue] of rawValues) {
-		if (!isInvalidPlotValue(rawValue)) {
-			validPointCount += 1;
-			if (validPointCount > 1) {
-				return false;
-			}
-		}
-	}
-
-	return true;
-}
-
 export const prepareUPlotConfig = ({
 	widget,
 	isDarkMode,
@@ -86,7 +68,6 @@ export const prepareUPlotConfig = ({
 	});
 
 	apiResponse.data?.result?.forEach((series) => {
-		const hasSingleVisiblePoint = hasSingleVisiblePointForSeries(series);
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query
@@ -99,15 +80,13 @@ export const prepareUPlotConfig = ({
 
 		builder.addSeries({
 			scaleKey: 'y',
-			drawStyle: hasSingleVisiblePoint ? DrawStyle.Points : DrawStyle.Line,
+			drawStyle: DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
 			spanGaps: true,
 			lineStyle: LineStyle.Solid,
 			lineInterpolation: LineInterpolation.Spline,
-			showPoints: hasSingleVisiblePoint
-				? VisibilityMode.Always
-				: VisibilityMode.Never,
+			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
 			panelType: PANEL_TYPES.TIME_SERIES,

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

@@ -14,6 +14,11 @@ export interface GraphVisibilityState {
 	dataIndex: SeriesVisibilityItem[];
 }
 
+export interface SeriesVisibilityState {
+	labels: string[];
+	visibility: boolean[];
+}
+
 /**
  * Context in which a panel is rendered. Used to vary behavior (e.g. persistence,
  * interactions) per context.

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/legendVisibilityUtils.test.ts

@@ -62,10 +62,10 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual([
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
+			expect(result).toEqual({
+				labels: ['CPU', 'Memory'],
+				visibility: [true, false],
+			});
 		});
 
 		it('returns visibility by index including duplicate labels', () => {
@@ -85,11 +85,10 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual([
-				{ label: 'CPU', show: true },
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: false },
-			]);
+			expect(result).toEqual({
+				labels: ['CPU', 'CPU', 'Memory'],
+				visibility: [true, false, false],
+			});
 		});
 
 		it('returns null on malformed JSON in localStorage', () => {
@@ -128,10 +127,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual([
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
+			expect(stored).toEqual({
+				labels: ['CPU', 'Memory'],
+				visibility: [true, false],
+			});
 		});
 
 		it('adds a new widget entry when other widgets already exist', () => {
@@ -150,7 +149,7 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-new');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual([{ label: 'CPU', show: false }]);
+			expect(stored).toEqual({ labels: ['CPU'], visibility: [false] });
 		});
 
 		it('updates existing widget visibility when entry already exists', () => {
@@ -176,10 +175,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual([
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: true },
-			]);
+			expect(stored).toEqual({
+				labels: ['CPU', 'Memory'],
+				visibility: [false, true],
+			});
 		});
 
 		it('silently handles malformed existing JSON without throwing', () => {
@@ -202,10 +201,10 @@ describe('legendVisibilityUtils', () => {
 
 			const stored = getStoredSeriesVisibility('widget-1');
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: false },
-			]);
+			expect(stored).toEqual({
+				labels: ['x-axis', 'CPU'],
+				visibility: [true, false],
+			});
 			const expected = [
 				{
 					name: 'widget-1',
@@ -232,12 +231,14 @@ describe('legendVisibilityUtils', () => {
 				{ label: 'B', show: true },
 			]);
 
-			expect(getStoredSeriesVisibility('widget-a')).toEqual([
-				{ label: 'A', show: true },
-			]);
-			expect(getStoredSeriesVisibility('widget-b')).toEqual([
-				{ label: 'B', show: true },
-			]);
+			expect(getStoredSeriesVisibility('widget-a')).toEqual({
+				labels: ['A'],
+				visibility: [true],
+			});
+			expect(getStoredSeriesVisibility('widget-b')).toEqual({
+				labels: ['B'],
+				visibility: [true],
+			});
 		});
 
 		it('calls setItem with storage key and stringified visibility states', () => {

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

@@ -19,9 +19,9 @@ export interface BaseConfigBuilderProps {
 	widget: Widgets;
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
-	onClick?: OnClickPluginOpts['onClick'];
-	onDragSelect?: (startTime: number, endTime: number) => void;
-	timezone?: Timezone;
+	onClick: OnClickPluginOpts['onClick'];
+	onDragSelect: (startTime: number, endTime: number) => void;
+	timezone: Timezone;
 	panelMode: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
@@ -40,10 +40,8 @@ export function buildBaseConfig({
 	minTimeScale,
 	maxTimeScale,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = timezone
-		? (timestamp: number): Date =>
-				uPlot.tzDate(new Date(timestamp * 1e3), timezone.value)
-		: undefined;
+	const tzDate = (timestamp: number): Date =>
+		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,

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

@@ -1,225 +0,0 @@
-import {
-	NULL_EXPAND,
-	NULL_REMOVE,
-	NULL_RETAIN,
-} from 'container/PanelWrapper/constants';
-import { AlignedData } from 'uplot';
-
-/**
- * Expands contiguous runs of `null` values to the left and right of their
- * original positions so that visual gaps in the series are continuous.
- *
- * This is used when `NULL_EXPAND` mode is selected while joining series.
- */
-function propagateNullsAcrossNeighbors(
-	seriesValues: Array<number | null>,
-	nullIndices: number[],
-	alignedLength: number,
-): void {
-	for (
-		let i = 0, currentIndex, lastExpandedNullIndex = -1;
-		i < nullIndices.length;
-		i++
-	) {
-		const nullIndex = nullIndices[i];
-
-		if (nullIndex > lastExpandedNullIndex) {
-			// expand left until we hit a non-null value
-			currentIndex = nullIndex - 1;
-			while (currentIndex >= 0 && seriesValues[currentIndex] == null) {
-				seriesValues[currentIndex--] = null;
-			}
-
-			// expand right until we hit a non-null value
-			currentIndex = nullIndex + 1;
-			while (currentIndex < alignedLength && seriesValues[currentIndex] == null) {
-				seriesValues[(lastExpandedNullIndex = currentIndex++)] = null;
-			}
-		}
-	}
-}
-
-/**
- * Merges multiple uPlot `AlignedData` tables into a single aligned table.
- *
- * - Merges and sorts all distinct x-values from each table.
- * - Re-aligns every series onto the merged x-axis.
- * - Applies per-series null handling (`NULL_REMOVE`, `NULL_RETAIN`, `NULL_EXPAND`).
- */
-/* eslint-disable sonarjs/cognitive-complexity */
-export function mergeAlignedDataTables(
-	alignedTables: AlignedData[],
-	nullModes?: number[][],
-): AlignedData {
-	let mergedXValues: Set<number>;
-
-	// eslint-disable-next-line prefer-const
-	mergedXValues = new Set();
-
-	// Collect all unique x-values from every table.
-	for (let tableIndex = 0; tableIndex < alignedTables.length; tableIndex++) {
-		const table = alignedTables[tableIndex];
-		const xValues = table[0];
-		const xLength = xValues.length;
-
-		for (let i = 0; i < xLength; i++) {
-			mergedXValues.add(xValues[i]);
-		}
-	}
-
-	// Sorted, merged x-axis used by the final result.
-	const alignedData: (number | null | undefined)[][] = [
-		Array.from(mergedXValues).sort((a, b) => a - b),
-	];
-
-	const alignedLength = alignedData[0].length;
-
-	// Map from x-value to its index in the merged x-axis.
-	const xValueToIndexMap = new Map<number, number>();
-
-	for (let i = 0; i < alignedLength; i++) {
-		xValueToIndexMap.set(alignedData[0][i] as number, i);
-	}
-
-	// Re-align all series from all tables onto the merged x-axis.
-	for (let tableIndex = 0; tableIndex < alignedTables.length; tableIndex++) {
-		const table = alignedTables[tableIndex];
-		const xValues = table[0];
-
-		for (let seriesIndex = 1; seriesIndex < table.length; seriesIndex++) {
-			const seriesValues = table[seriesIndex];
-
-			const alignedSeriesValues = Array(alignedLength).fill(undefined);
-
-			const nullHandlingMode = nullModes
-				? nullModes[tableIndex][seriesIndex]
-				: NULL_RETAIN;
-
-			const nullIndices: number[] = [];
-
-			for (let i = 0; i < seriesValues.length; i++) {
-				const valueAtPoint = seriesValues[i];
-				const alignedIndex = xValueToIndexMap.get(xValues[i]);
-
-				if (alignedIndex == null) {
-					continue;
-				}
-
-				if (valueAtPoint === null) {
-					if (nullHandlingMode !== NULL_REMOVE) {
-						alignedSeriesValues[alignedIndex] = valueAtPoint;
-
-						if (nullHandlingMode === NULL_EXPAND) {
-							nullIndices.push(alignedIndex);
-						}
-					}
-				} else {
-					alignedSeriesValues[alignedIndex] = valueAtPoint;
-				}
-			}
-
-			// Optionally expand nulls to visually preserve gaps.
-			propagateNullsAcrossNeighbors(
-				alignedSeriesValues,
-				nullIndices,
-				alignedLength,
-			);
-
-			alignedData.push(alignedSeriesValues);
-		}
-	}
-
-	return alignedData as AlignedData;
-}
-
-/**
- * Builds histogram buckets from raw values.
- *
- * - Each value is mapped into a bucket via `getBucketForValue`.
- * - Counts how many values fall into each bucket.
- * - Optionally sorts buckets using the provided comparator.
- */
-export function buildHistogramBuckets(
-	values: number[],
-	getBucketForValue: (value: number) => number,
-	sortBuckets?: ((a: number, b: number) => number) | null,
-): AlignedData {
-	const bucketMap = new Map<number, { value: number; count: number }>();
-
-	for (let i = 0; i < values.length; i++) {
-		let value = values[i];
-
-		if (value != null) {
-			value = getBucketForValue(value);
-		}
-
-		const bucket = bucketMap.get(value);
-
-		if (bucket) {
-			bucket.count++;
-		} else {
-			bucketMap.set(value, { value, count: 1 });
-		}
-	}
-
-	const buckets = [...bucketMap.values()];
-
-	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-	sortBuckets && buckets.sort((a, b) => sortBuckets(a.value, b.value));
-
-	const bucketValues = Array(buckets.length);
-	const bucketCounts = Array(buckets.length);
-
-	for (let i = 0; i < buckets.length; i++) {
-		bucketValues[i] = buckets[i].value;
-		bucketCounts[i] = buckets[i].count;
-	}
-
-	return [bucketValues, bucketCounts];
-}
-
-/**
- * Mutates an `AlignedData` instance, replacing all `undefined` entries
- * with explicit `null` values so uPlot treats them as gaps.
- */
-export function replaceUndefinedWithNullInAlignedData(
-	data: AlignedData,
-): AlignedData {
-	const seriesList = data as (number | null | undefined)[][];
-	for (let seriesIndex = 0; seriesIndex < seriesList.length; seriesIndex++) {
-		for (
-			let pointIndex = 0;
-			pointIndex < seriesList[seriesIndex].length;
-			pointIndex++
-		) {
-			if (seriesList[seriesIndex][pointIndex] === undefined) {
-				seriesList[seriesIndex][pointIndex] = null;
-			}
-		}
-	}
-	return data;
-}
-
-/**
- * Ensures the first histogram series has a leading "empty" bin so that
- * all series line up visually when rendered as bars.
- *
- * - Prepends a new x-value (first x - `bucketSize`) to the first series.
- * - Prepends `null` to all subsequent series at the same index.
- */
-export function prependNullBinToFirstHistogramSeries(
-	alignedData: AlignedData,
-	bucketSize: number,
-): void {
-	const seriesList = alignedData as (number | null)[][];
-	if (
-		seriesList.length > 0 &&
-		seriesList[0].length > 0 &&
-		seriesList[0][0] !== null
-	) {
-		seriesList[0].unshift(seriesList[0][0] - bucketSize);
-		for (let seriesIndex = 1; seriesIndex < seriesList.length; seriesIndex++) {
-			seriesList[seriesIndex].unshift(null);
-		}
-	}
-}

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

@@ -1,6 +1,10 @@
 import { LOCALSTORAGE } from 'constants/localStorage';
 
-import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
+import {
+	GraphVisibilityState,
+	SeriesVisibilityItem,
+	SeriesVisibilityState,
+} from '../types';
 
 /**
  * Retrieves the stored series visibility for a specific widget from localStorage by index.
@@ -10,7 +14,7 @@ import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
  */
 export function getStoredSeriesVisibility(
 	widgetId: string,
-): SeriesVisibilityItem[] | null {
+): SeriesVisibilityState | null {
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
@@ -25,7 +29,10 @@ export function getStoredSeriesVisibility(
 			return null;
 		}
 
-		return widgetState.dataIndex;
+		return {
+			labels: widgetState.dataIndex.map((item) => item.label),
+			visibility: widgetState.dataIndex.map((item) => item.show),
+		};
 	} catch (error) {
 		if (error instanceof SyntaxError) {
 			// If the stored data is malformed, remove it

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -6,12 +6,10 @@ import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
-import { useIsPanelWaitingOnVariable } from 'hooks/dashboard/useVariableFetchState';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
-import { getVariableReferencesInQuery } from 'lib/dashboardVariables/variableReference';
 import getTimeString from 'lib/getTimeString';
 import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
@@ -55,6 +53,7 @@ function GridCardGraph({
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
 	enableDrillDown,
+	widgetsByDynamicVariableId,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -65,8 +64,8 @@ function GridCardGraph({
 		toScrollWidgetId,
 		setToScrollWidgetId,
 		setDashboardQueryRangeCalled,
+		variablesToGetUpdated,
 	} = useDashboard();
-
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -118,25 +117,10 @@ function GridCardGraph({
 
 	const updatedQuery = widget?.query;
 
-	const referencedVariableNames = useMemo(() => {
-		if (!variables || !updatedQuery) {
-			return [];
-		}
-		const allNames = Object.values(variables)
-			.map((v) => v.name)
-			.filter((name): name is string => !!name);
-		return getVariableReferencesInQuery(updatedQuery, allNames);
-	}, [updatedQuery, variables]);
-
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const isPanelWaitingOnAnyVariable = useIsPanelWaitingOnVariable(
-		referencedVariableNames,
-	);
-
-	const queryEnabledCondition =
-		isVisible && !isEmptyWidget && isQueryEnabled && !isPanelWaitingOnAnyVariable;
+	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -193,6 +177,27 @@ function GridCardGraph({
 		[requestData.query],
 	);
 
+	// Bring back dependency on variable chaining for panels to refetch,
+	// but only for non-dynamic variables. We derive a stable token from
+	// the head of the variablesToGetUpdated queue when it's non-dynamic.
+	const nonDynamicVariableChainToken = useMemo(() => {
+		if (!variablesToGetUpdated || variablesToGetUpdated.length === 0) {
+			return undefined;
+		}
+		if (!variables) {
+			return undefined;
+		}
+		const headName = variablesToGetUpdated[0];
+		const variableObj = Object.values(variables).find(
+			(variable) => variable?.name === headName,
+		);
+		if (variableObj && variableObj.type !== 'DYNAMIC') {
+			return headName;
+		}
+		return undefined;
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [variablesToGetUpdated, variables]);
+
 	const queryResponse = useGetQueryRange(
 		{
 			...requestData,
@@ -219,7 +224,11 @@ function GridCardGraph({
 				requestData,
 				variables
 					? Object.entries(variables).reduce((acc, [id, variable]) => {
-							if (variable.name && referencedVariableNames.includes(variable.name)) {
+							if (
+								variable.type !== 'DYNAMIC' ||
+								(widgetsByDynamicVariableId?.[variable.id] &&
+									widgetsByDynamicVariableId?.[variable.id].includes(widget.id))
+							) {
 								return { ...acc, [id]: variable.selectedValue };
 							}
 							return acc;
@@ -228,6 +237,9 @@ function GridCardGraph({
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),
+				// Include non-dynamic variable chaining token to drive refetches
+				// only when a non-dynamic variable is at the head of the queue
+				...(nonDynamicVariableChainToken ? [nonDynamicVariableChainToken] : []),
 			],
 			retry(failureCount, error): boolean {
 				if (
@@ -240,7 +252,7 @@ function GridCardGraph({
 				return failureCount < 2;
 			},
 			keepPreviousData: true,
-			enabled: queryEnabledCondition,
+			enabled: queryEnabledCondition && !nonDynamicVariableChainToken,
 			refetchOnMount: false,
 			onError: (error) => {
 				const errorMessage =
@@ -307,7 +319,7 @@ function GridCardGraph({
 					threshold={threshold}
 					headerMenuList={menuList}
 					isFetchingResponse={
-						queryResponse.isFetching || isPanelWaitingOnAnyVariable
+						queryResponse.isFetching || variablesToGetUpdated.length > 0
 					}
 					setRequestData={setRequestData}
 					onClickHandler={onClickHandler}

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -72,6 +72,7 @@ export interface GridCardGraphProps {
 	customOnRowClick?: (record: RowData) => void;
 	customTimeRangeWindowForCoRelation?: string | undefined;
 	enableDrillDown?: boolean;
+	widgetsByDynamicVariableId?: Record<string, string[]>;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {