Merge branch 'main' into fix/filter_suggestions

.vscode/settings.json

@@ -17,7 +17,5 @@
 	},
 	"[html]": {
 		"editor.defaultFormatter": "vscode.html-language-features"
-	},
-	"python-envs.defaultEnvManager": "ms-python.python:system",
-	"python-envs.pythonProjects": []
+	}
 }

conf/example.yaml

@@ -144,8 +144,6 @@ telemetrystore:
 
 ##################### Prometheus #####################
 prometheus:
-  # The maximum time a PromQL query is allowed to run before being aborted.
-  timeout: 2m
   active_query_tracker:
     # Whether to enable the active query tracker.
     enabled: true

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

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.117.1
+    image: signoz/signoz:v0.116.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

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.117.1
+    image: signoz/signoz:v0.116.1
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.117.1}
+    image: signoz/signoz:${VERSION:-v0.116.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.117.1}
+    image: signoz/signoz:${VERSION:-v0.116.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/contributing/go/handler.md

@@ -123,7 +123,6 @@ if err := router.Handle("/api/v1/things", handler.New(
         Description:         "This endpoint creates a thing",
         Request:             new(types.PostableThing),
         RequestContentType:  "application/json",
-        RequestQuery:        new(types.QueryableThing),
         Response:            new(types.GettableThing),
         ResponseContentType: "application/json",
         SuccessStatusCode:   http.StatusCreated,
@@ -156,8 +155,6 @@ The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAP
 - **Request / RequestContentType**:
   - `Request` is a Go type that describes the request body or form.
   - `RequestContentType` is usually `"application/json"` or `"application/x-www-form-urlencoded"` (for callbacks like SAML).
-- **RequestQuery**:
-  - `RequestQuery` is a Go type that descirbes query url params.
 - **RequestExamples**: An array of `handler.OpenAPIExample` that provide concrete request payloads in the generated spec. See [Adding request examples](#adding-request-examples) below.
 - **Response / ResponseContentType**:
   - `Response` is the Go type for the successful response payload.

docs/contributing/onboarding.md

@@ -273,7 +273,6 @@ Options can be simple (direct link) or nested (with another question):
 - Place logo files in `public/Logos/`
 - Use SVG format
 - Reference as `"/Logos/your-logo.svg"`
-- **Fetching Icons**: New icons can be easily fetched from [OpenBrand](https://openbrand.sh/). Use the pattern `https://openbrand.sh/?url=<TARGET_URL>`, where `<TARGET_URL>` is the URL-encoded link to the service's website. For example, to get Render's logo, use [https://openbrand.sh/?url=https%3A%2F%2Frender.com](https://openbrand.sh/?url=https%3A%2F%2Frender.com).
 - **Optimize new SVGs**: Run any newly downloaded SVGs through an optimizer like [SVGOMG (svgo)](https://svgomg.net/) or use `npx svgo public/Logos/your-logo.svg` to minimise their size before committing.
 
 ### 4. Links

ee/authz/openfgaauthz/provider.go

@@ -57,10 +57,6 @@ func (provider *provider) Start(ctx context.Context) error {
 	return provider.openfgaServer.Start(ctx)
 }
 
-func (provider *provider) Healthy() <-chan struct{} {
-	return provider.openfgaServer.Healthy()
-}
-
 func (provider *provider) Stop(ctx context.Context) error {
 	return provider.openfgaServer.Stop(ctx)
 }

ee/authz/openfgaserver/server.go

@@ -16,6 +16,7 @@ type Server struct {
 }
 
 func NewOpenfgaServer(ctx context.Context, pkgAuthzService authz.AuthZ) (*Server, error) {
+
 	return &Server{
 		pkgAuthzService: pkgAuthzService,
 	}, nil
@@ -25,10 +26,6 @@ func (server *Server) Start(ctx context.Context) error {
 	return server.pkgAuthzService.Start(ctx)
 }
 
-func (server *Server) Healthy() <-chan struct{} {
-	return server.pkgAuthzService.Healthy()
-}
-
 func (server *Server) Stop(ctx context.Context) error {
 	return server.pkgAuthzService.Stop(ctx)
 }

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

@@ -10,8 +10,6 @@ import (
 	"strings"
 	"time"
 
-	"log/slog"
-
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/modules/user"
@@ -20,6 +18,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/gorilla/mux"
+	"log/slog"
 )
 
 type CloudIntegrationConnectionParamsResponse struct {
@@ -127,7 +126,7 @@ func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId
 		))
 	}
 
-	allPats, err := ah.Signoz.Modules.UserSetter.ListAPIKeys(ctx, orgIdUUID)
+	allPats, err := ah.Signoz.Modules.User.ListAPIKeys(ctx, orgIdUUID)
 	if err != nil {
 		return "", basemodel.InternalError(fmt.Errorf(
 			"couldn't list PATs: %w", err,
@@ -155,7 +154,7 @@ func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId
 		))
 	}
 
-	err = ah.Signoz.Modules.UserSetter.CreateAPIKey(ctx, newPAT)
+	err = ah.Signoz.Modules.User.CreateAPIKey(ctx, newPAT)
 	if err != nil {
 		return "", basemodel.InternalError(fmt.Errorf(
 			"couldn't create cloud integration PAT: %w", err,
@@ -170,19 +169,14 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 	cloudIntegrationUserName := fmt.Sprintf("%s-integration", cloudProvider)
 	email := valuer.MustNewEmail(fmt.Sprintf("%s@signoz.io", cloudIntegrationUserName))
 
-	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, valuer.MustNewUUID(orgId), types.UserStatusActive)
+	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, types.RoleViewer, valuer.MustNewUUID(orgId), types.UserStatusActive)
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
 	}
 
 	password := types.MustGenerateFactorPassword(cloudIntegrationUser.ID.StringValue())
 
-	cloudIntegrationUser, err = ah.Signoz.Modules.UserSetter.GetOrCreateUser(
-		ctx,
-		cloudIntegrationUser,
-		user.WithFactorPassword(password),
-		user.WithRoleNames([]string{authtypes.SigNozViewerRoleName}),
-	)
+	cloudIntegrationUser, err = ah.Signoz.Modules.User.GetOrCreateUser(ctx, cloudIntegrationUser, user.WithFactorPassword(password))
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't look for integration user: %w", err))
 	}

ee/query-service/app/server.go

@@ -136,7 +136,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	logParsingPipelineController, err := logparsingpipeline.NewLogParsingPipelinesController(
 		signoz.SQLStore,
 		integrationsController.GetPipelinesForInstalledIntegrations,
-		reader,
 	)
 	if err != nil {
 		return nil, err

ee/query-service/rules/manager_test.go

@@ -257,7 +257,7 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 						WillReturnRows(samplesRows)
 
 					// Create Prometheus provider for this test
-					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, store)
+					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{}, store)
 				},
 				ManagerOptionsHook: func(opts *rules.ManagerOptions) {
 					// Set Prometheus provider for PromQL queries

frontend/.cursor/rules/state-management.mdc

@@ -1,97 +0,0 @@
----
-globs: **/*.store.ts
-alwaysApply: false
----
-# State Management: React Query, nuqs, Zustand
-
-Use the following stack. Do **not** introduce or recommend Redux or React Context for shared/global state.
-
-## Server state → React Query
-
-- **Use for:** API responses, time-series data, caching, background refetch, retries, stale/refresh.
-- **Do not use Redux/Context** to store or mirror data that comes from React Query (e.g. do not dispatch API results into Redux).
-- Prefer generated React Query hooks from `frontend/src/api/generated` when available.
-- Keep server state in React Query; expose it via hooks that return the query result (and optionally memoized derived values). Do not duplicate it in Redux or Context.
-
-```tsx
-// ✅ GOOD: single source of truth from React Query
-export function useAppStateHook() {
-  const { data, isError } = useQuery(...)
-  const memoizedConfigs = useMemo(() => ({ ... }), [data?.configs])
-  return { configs: memoizedConfigs, isError, ... }
-}
-
-// ❌ BAD: copying React Query result into Redux
-dispatch({ type: UPDATE_LATEST_VERSION, payload: queryResponse.data })
-```
-
-## URL state → nuqs
-
-- **Use for:** shareable state, filters, time range, selected values, pagination, view state that belongs in the URL.
-- **Do not use Redux/Context** for state that should be shareable or reflected in the URL.
-- Use [nuqs](https://nuqs.dev/docs/basic-usage) for typed, type-safe URL search params. Avoid ad-hoc `useSearchParams` encoding/decoding.
-- Keep URL payload small; respect browser URL length limits (e.g. Chrome ~2k chars). Do not put large datasets or sensitive data in query params.
-
-```tsx
-// ✅ GOOD: nuqs for filters / time range / selection
-const [timeRange, setTimeRange] = useQueryState('timeRange', parseAsString.withDefault('1h'))
-const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1))
-
-// ❌ BAD: Redux/Context for shareable or URL-synced state
-const { timeRange } = useContext(SomeContext)
-```
-
-## Client state → Zustand
-
-- **Use for:** global/client state, cross-component state, feature flags, complex or large client objects (e.g. dashboard state, query builder state).
-- **Do not use Redux or React Context** for global or feature-level client state.
-- Prefer small, domain-scoped stores (e.g. DashboardStore, QueryBuilderStore).
-
-### Zustand best practices (align with eslint-plugin-zustand-rules)
-
-- **One store per module.** Do not define multiple `create()` calls in the same file; use one store per module (or compose slices into one store).
-- **Always use selectors.** Call the store hook with a selector so only the used slice triggers re-renders. Never use `useStore()` with no selector.
-
-```tsx
-// ✅ GOOD: selector — re-renders only when isDashboardLocked changes
-const isLocked = useDashboardStore(state => state.isDashboardLocked)
-
-// ❌ BAD: no selector — re-renders on any store change
-const state = useDashboardStore()
-```
-
-- **Never mutate state directly.** Update only via `set` or `setState` (or `getState()` + `set` for reads). No `state.foo = x` or `state.bears += 1` inside actions.
-
-```tsx
-// ✅ GOOD: use set
-increment: () => set(state => ({ bears: state.bears + 1 }))
-
-// ❌ BAD: direct mutation
-increment: () => { state.bears += 1 }
-```
-
-- **State properties before actions.** In the store object, list all state fields first, then action functions.
-- **Split into slices when state is large.** If a store has many top-level properties (e.g. more than 5–10), split into slice factories and combine with one `create()`.
-
-```tsx
-// ✅ GOOD: slices for large state
-const createBearSlice = set => ({ bears: 0, addBear: () => set(s => ({ bears: s.bears + 1 })) })
-const createFishSlice = set => ({ fish: 0, addFish: () => set(s => ({ fish: s.fish + 1 })) })
-const useStore = create(set => ({ ...createBearSlice(set), ...createFishSlice(set) }))
-```
-
-- **In projects using Zustand:** add `eslint-plugin-zustand-rules` and extend `plugin:zustand-rules/recommended` to enforce these rules automatically.
-
-## Local state → React state only
-
-- **Use useState/useReducer** for: component-local UI state, form inputs, toggles, hover state, data that never leaves the component.
-- Do not use Zustand, Redux, or Context for state that is purely local to one component or a small subtree.
-
-## Summary
-
-| State type        | Use              | Avoid              |
-|-------------------|------------------|--------------------|
-| Server / API      | React Query      | Redux, Context     |
-| URL / shareable   | nuqs             | Redux, Context     |
-| Global client     | Zustand          | Redux, Context     |
-| Local UI          | useState/useReducer | Zustand, Redux, Context |

frontend/.cursor/skills/migrate-state-management/SKILL.md

@@ -1,150 +0,0 @@
----
-name: migrate-state-management
-description: Migrate Redux or React Context to the correct state option (React Query for server state, nuqs for URL/shareable state, Zustand for global client state). Use when refactoring away from Redux/Context, moving state to the right store, or when the user asks to migrate state management.
----
-
-# Migrate State: Redux/Context → React Query, nuqs, Zustand
-
-Do **not** introduce or recommend Redux or React Context. Migrate existing usage to the stack below.
-
-## 1. Classify the state
-
-Before changing code, classify what the state represents:
-
-| If the state is… | Migrate to | Do not use |
-|------------------|------------|------------|
-| From API / server (versions, configs, fetched lists, time-series) | **React Query** | Redux, Context |
-| Shareable via URL (filters, time range, page, selected ids) | **nuqs** | Redux, Context |
-| Global/client UI (dashboard lock, query builder, feature flags, large client objects) | **Zustand** | Redux, Context |
-| Local to one component (inputs, toggles, hover) | **useState / useReducer** | Zustand, Redux, Context |
-
-If one slice mixes concerns (e.g. Redux has both API data and pagination), split: API → React Query, pagination → nuqs, rest → Zustand or local state.
-
-## 2. Migrate to React Query (server state)
-
-**When:** State comes from or mirrors an API response (e.g. `currentVersion`, `latestVersion`, `configs`, lists).
-
-**Steps:**
-
-1. Find where the data is fetched (existing `useQuery`/API call) and where it is dispatched or set in Context/Redux.
-2. Remove the dispatch/set that writes API results into Redux/Context.
-3. Expose a single hook that uses the query and returns the same shape consumers expect (use `useMemo` for derived objects like `configs` to avoid unnecessary re-renders).
-4. Replace Redux/Context consumption with the new hook. Prefer generated React Query hooks from `frontend/src/api/generated` when available.
-5. Configure cache/refetch (e.g. `refetchOnMount: false`, `staleTime`) so behavior matches previous “single source” expectations.
-
-**Before (Redux mirroring React Query):**
-
-```tsx
-if (getUserLatestVersionResponse.isFetched && getUserLatestVersionResponse.isSuccess && getUserLatestVersionResponse.data?.payload) {
-  dispatch({ type: UPDATE_LATEST_VERSION, payload: { latestVersion: getUserLatestVersionResponse.data.payload.tag_name } })
-}
-```
-
-**After (single source in React Query):**
-
-```tsx
-export function useAppStateHook() {
-  const { data, isError } = useQuery(...)
-  const memoizedConfigs = useMemo(() => ({ ... }), [data?.configs])
-  return {
-    latestVersion: data?.payload?.tag_name,
-    configs: memoizedConfigs,
-    isError,
-  }
-}
-```
-
-Consumers use `useAppStateHook()` instead of `useSelector` or Context. Do not copy React Query result into Redux or Context.
-
-## 3. Migrate to nuqs (URL / shareable state)
-
-**When:** State should be in the URL: filters, time range, pagination, selected values, view state. Keep payload small (e.g. Chrome ~2k chars); no large datasets or sensitive data.
-
-**Steps:**
-
-1. Identify which Redux/Context fields are shareable or already reflected in the URL (e.g. `currentPage`, `timeRange`, `selectedFilter`).
-2. Add nuqs (or use existing): `useQueryState('param', parseAsString.withDefault('…'))` (or `parseAsInteger`, etc.).
-3. Replace reads/writes of those fields with nuqs hooks. Use typed parsers; avoid ad-hoc `useSearchParams` encoding/decoding.
-4. Remove the same fields from Redux/Context and their reducers/providers.
-
-**Before (Context/Redux):**
-
-```tsx
-const { timeRange } = useContext(SomeContext)
-const [page, setPage] = useDispatch(...)
-```
-
-**After (nuqs):**
-
-```tsx
-const [timeRange, setTimeRange] = useQueryState('timeRange', parseAsString.withDefault('1h'))
-const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1))
-```
-
-## 4. Migrate to Zustand (global client state)
-
-**When:** State is global or cross-component client state: feature flags, dashboard state, query builder state, complex/large client objects (e.g. up to ~1.5–2MB). Not for server cache or local-only UI.
-
-**Steps:**
-
-1. Create one store per domain (e.g. `DashboardStore`, `QueryBuilderStore`). One `create()` per module; for large state use slice factories and combine.
-2. Put state properties first, then actions. Use `set` (or `setState` / `getState()` + `set`) for updates; never mutate state directly.
-3. Replace Context/Redux consumption with the store hook **and a selector** so only the used slice triggers re-renders.
-4. Remove the old Context provider / Redux slice and related dispatches.
-
-**Selector (required):**
-
-```tsx
-const isLocked = useDashboardStore(state => state.isDashboardLocked)
-```
-
-Never use `useStore()` with no selector. Never do `state.foo = x` inside actions; use `set(state => ({ ... }))`.
-
-**Before (Context/Redux):**
-
-```tsx
-const { isDashboardLocked, setLocked } = useContext(DashboardContext)
-```
-
-**After (Zustand):**
-
-```tsx
-const isLocked = useDashboardStore(state => state.isDashboardLocked)
-const setLocked = useDashboardStore(state => state.setLocked)
-```
-
-For large stores (many top-level fields), split into slices and combine:
-
-```tsx
-const createBearSlice = set => ({ bears: 0, addBear: () => set(s => ({ bears: s.bears + 1 })) })
-const useStore = create(set => ({ ...createBearSlice(set), ...createFishSlice(set) }))
-```
-
-Add `eslint-plugin-zustand-rules` with `plugin:zustand-rules/recommended` to enforce selectors and no direct mutation.
-
-## 5. Migrate to local state (useState / useReducer)
-
-**When:** State is used only inside one component or a small subtree (form inputs, toggles, hover, panel selection). No URL sync, no cross-feature sharing.
-
-**Steps:**
-
-1. Move the state into the component that owns it (or the smallest common parent).
-2. Use `useState` or `useReducer` (useReducer when multiple related fields change together).
-3. Remove from Redux/Context and any provider/slice.
-
-Do not use Zustand, Redux, or Context for purely local UI state.
-
-## 6. Migration checklist
-
-- [ ] Classify each piece of state (server / URL / global client / local).
-- [ ] Server state: move to React Query; expose via hook; remove Redux/Context mirroring.
-- [ ] URL state: move to nuqs; remove from Redux/Context; keep URL payload small.
-- [ ] Global client state: move to Zustand with selectors and immutable updates; one store per domain.
-- [ ] Local state: move to useState/useReducer in the owning component.
-- [ ] Remove old Redux slices / Context providers and all dispatches/consumers for migrated state.
-- [ ] Do not duplicate the same data in multiple places (e.g. React Query + Redux).
-
-## Additional resources
-
-- Project rule: [.cursor/rules/state-management.mdc](../../rules/state-management.mdc)
-- Detailed patterns and rationale: [reference.md](reference.md)

frontend/.cursor/skills/migrate-state-management/reference.md

@@ -1,50 +0,0 @@
-# State migration reference
-
-## Why migrate
-
-- **Context:** Re-renders all consumers on any change; no granular subscriptions; becomes brittle at scale.
-- **Redux:** Heavy boilerplate (actions, reducers, selectors, Provider); slower onboarding; often used to mirror React Query or URL state.
-- **Goal:** Fewer mechanisms, domain isolation, granular subscriptions, single source of truth per state type.
-
-## React Query migration (server state)
-
-Typical anti-pattern: API is called via React Query, then result is dispatched to Redux. Flow becomes: Component → useQueries → API → dispatch → Reducer → Redux state → useSelector.
-
-Correct flow: Component → useQuery (or custom hook wrapping it) → same component reads from hook. No Redux/Context in between.
-
-- Prefer generated hooks from `frontend/src/api/generated`.
-- For “app state” that is just API data (versions, configs), one hook that returns `{ ...data, configs: useMemo(...) }` is enough. No selectors needed for plain data; useMemo only where the value is used as dependency (e.g. in useState).
-- Set `staleTime` / `refetchOnMount` etc. so refetch behavior matches previous expectations.
-
-## nuqs migration (URL state)
-
-Redux/Context often hold pagination, filters, time range, selected values that are shareable. Those belong in the URL.
-
-- Use [nuqs](https://nuqs.dev/docs/basic-usage) for typed search params. Avoid ad-hoc `useSearchParams` + manual encoding.
-- Browser limits: Chrome ~2k chars practical; keep payload small; no large datasets or secrets in query params.
-- If the app uses TanStack Router, search params can be handled there; otherwise nuqs is the standard.
-
-## Zustand migration (client state)
-
-- One store per domain (e.g. DashboardStore, QueryBuilderStore). Multiple `create()` in one file is disallowed; use one store or composed slices.
-- Always use a selector: `useStore(s => s.field)` so only that field drives re-renders.
-- Never mutate: update only via `set(state => ({ ... }))` or `setState` / `getState()` + `set`.
-- State properties first, then actions. For 5–10+ top-level fields, split into slice factories and combine with one `create()`.
-- Large client objects: Zustand is for “large” in the ~1.5–2MB range; above that, optimize at API/store design.
-- Testing: no Provider; stores are plain functions; easy to reset and mock.
-
-## What not to use
-
-- **Redux / Context** for new or migrated shared/global state.
-- **Redux / Context** to store or mirror React Query results.
-- **Redux / Context** for state that should live in the URL (use nuqs).
-- **Zustand / Redux / Context** for component-local UI (use useState/useReducer).
-
-## Summary table
-
-| State type   | Use                | Avoid           |
-|-------------|--------------------|-----------------|
-| Server/API  | React Query        | Redux, Context  |
-| URL/shareable | nuqs             | Redux, Context  |
-| Global client | Zustand          | Redux, Context  |
-| Local UI    | useState/useReducer | Zustand, Redux, Context |

frontend/public/Logos/mistral.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fa520f" viewBox="0 0 24 24"><title>Mistral AI</title><path d="M17.143 3.429v3.428h-3.429v3.429h-3.428V6.857H6.857V3.43H3.43v13.714H0v3.428h10.286v-3.428H6.857v-3.429h3.429v3.429h3.429v-3.429h3.428v3.429h-3.428v3.428H24v-3.428h-3.43V3.429z"/></svg>

frontend/public/Logos/openclaw.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 120"><defs><linearGradient id="a" x1="0%" x2="100%" y1="0%" y2="100%"><stop offset="0%" stop-color="#ff4d4d"/><stop offset="100%" stop-color="#991b1b"/></linearGradient></defs><path fill="url(#a)" d="M60 10c-30 0-45 25-45 45s15 40 30 45v10h10v-10s5 2 10 0v10h10v-10c15-5 30-25 30-45S90 10 60 10"/><path fill="url(#a)" d="M20 45C5 40 0 50 5 60s15 5 20-5c3-7 0-10-5-10"/><path fill="url(#a)" d="M100 45c15-5 20 5 15 15s-15 5-20-5c-3-7 0-10 5-10"/><path stroke="#ff4d4d" stroke-linecap="round" stroke-width="3" d="M45 15Q35 5 30 8M75 15Q85 5 90 8"/><circle cx="45" cy="35" r="6" fill="#050810"/><circle cx="75" cy="35" r="6" fill="#050810"/><circle cx="46" cy="34" r="2.5" fill="#00e5cc"/><circle cx="76" cy="34" r="2.5" fill="#00e5cc"/></svg>

frontend/public/Logos/render.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Render</title><path d="M18.263.007c-3.121-.147-5.744 2.109-6.192 5.082-.018.138-.045.272-.067.405-.696 3.703-3.936 6.507-7.827 6.507a7.9 7.9 0 0 1-3.825-.979.202.202 0 0 0-.302.178V24H12v-8.999c0-1.656 1.338-3 2.987-3h2.988c3.382 0 6.103-2.817 5.97-6.244-.12-3.084-2.61-5.603-5.682-5.75"/></svg>

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

@@ -1,250 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useQuery } from 'react-query';
-
-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type {
-	Healthz200,
-	Healthz503,
-	Livez200,
-	Readyz200,
-	Readyz503,
-	RenderErrorResponseDTO,
-} from '../sigNoz.schemas';
-
-/**
- * @summary Health check
- */
-export const healthz = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<Healthz200>({
-		url: `/api/v2/healthz`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getHealthzQueryKey = () => {
-	return [`/api/v2/healthz`] as const;
-};
-
-export const getHealthzQueryOptions = <
-	TData = Awaited<ReturnType<typeof healthz>>,
-	TError = ErrorType<Healthz503>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof healthz>>, TError, TData>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getHealthzQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof healthz>>> = ({
-		signal,
-	}) => healthz(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof healthz>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type HealthzQueryResult = NonNullable<
-	Awaited<ReturnType<typeof healthz>>
->;
-export type HealthzQueryError = ErrorType<Healthz503>;
-
-/**
- * @summary Health check
- */
-
-export function useHealthz<
-	TData = Awaited<ReturnType<typeof healthz>>,
-	TError = ErrorType<Healthz503>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof healthz>>, TError, TData>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getHealthzQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Health check
- */
-export const invalidateHealthz = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getHealthzQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * @summary Liveness check
- */
-export const livez = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<Livez200>({
-		url: `/api/v2/livez`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getLivezQueryKey = () => {
-	return [`/api/v2/livez`] as const;
-};
-
-export const getLivezQueryOptions = <
-	TData = Awaited<ReturnType<typeof livez>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof livez>>, TError, TData>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getLivezQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof livez>>> = ({
-		signal,
-	}) => livez(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof livez>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type LivezQueryResult = NonNullable<Awaited<ReturnType<typeof livez>>>;
-export type LivezQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Liveness check
- */
-
-export function useLivez<
-	TData = Awaited<ReturnType<typeof livez>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof livez>>, TError, TData>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getLivezQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Liveness check
- */
-export const invalidateLivez = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries({ queryKey: getLivezQueryKey() }, options);
-
-	return queryClient;
-};
-
-/**
- * @summary Readiness check
- */
-export const readyz = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<Readyz200>({
-		url: `/api/v2/readyz`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getReadyzQueryKey = () => {
-	return [`/api/v2/readyz`] as const;
-};
-
-export const getReadyzQueryOptions = <
-	TData = Awaited<ReturnType<typeof readyz>>,
-	TError = ErrorType<Readyz503>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof readyz>>, TError, TData>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getReadyzQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof readyz>>> = ({
-		signal,
-	}) => readyz(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof readyz>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ReadyzQueryResult = NonNullable<Awaited<ReturnType<typeof readyz>>>;
-export type ReadyzQueryError = ErrorType<Readyz503>;
-
-/**
- * @summary Readiness check
- */
-
-export function useReadyz<
-	TData = Awaited<ReturnType<typeof readyz>>,
-	TError = ErrorType<Readyz503>
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof readyz>>, TError, TData>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getReadyzQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Readiness check
- */
-export const invalidateReadyz = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getReadyzQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -20,113 +20,11 @@ import { useMutation, useQuery } from 'react-query';
 import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
-	HandleExportRawDataPOSTParams,
 	ListPromotedAndIndexedPaths200,
 	PromotetypesPromotePathDTO,
-	Querybuildertypesv5QueryRangeRequestDTO,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-/**
- * This endpoints allows complex query exporting raw data for traces and logs
- * @summary Export raw data
- */
-export const handleExportRawDataPOST = (
-	querybuildertypesv5QueryRangeRequestDTO: BodyType<Querybuildertypesv5QueryRangeRequestDTO>,
-	params?: HandleExportRawDataPOSTParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v1/export_raw_data`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: querybuildertypesv5QueryRangeRequestDTO,
-		params,
-		signal,
-	});
-};
-
-export const getHandleExportRawDataPOSTMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof handleExportRawDataPOST>>,
-		TError,
-		{
-			data: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-			params?: HandleExportRawDataPOSTParams;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof handleExportRawDataPOST>>,
-	TError,
-	{
-		data: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-		params?: HandleExportRawDataPOSTParams;
-	},
-	TContext
-> => {
-	const mutationKey = ['handleExportRawDataPOST'];
-	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 handleExportRawDataPOST>>,
-		{
-			data: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-			params?: HandleExportRawDataPOSTParams;
-		}
-	> = (props) => {
-		const { data, params } = props ?? {};
-
-		return handleExportRawDataPOST(data, params);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type HandleExportRawDataPOSTMutationResult = NonNullable<
-	Awaited<ReturnType<typeof handleExportRawDataPOST>>
->;
-export type HandleExportRawDataPOSTMutationBody = BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-export type HandleExportRawDataPOSTMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Export raw data
- */
-export const useHandleExportRawDataPOST = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof handleExportRawDataPOST>>,
-		TError,
-		{
-			data: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-			params?: HandleExportRawDataPOSTParams;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof handleExportRawDataPOST>>,
-	TError,
-	{
-		data: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-		params?: HandleExportRawDataPOSTParams;
-	},
-	TContext
-> => {
-	const mutationOptions = getHandleExportRawDataPOSTMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
 /**
  * This endpoints promotes and indexes paths
  * @summary Promote and index paths

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

@@ -425,39 +425,6 @@ export interface AuthtypesSessionContextDTO {
 	orgs?: AuthtypesOrgSessionContextDTO[] | null;
 }
 
-export interface AuthtypesStorableRoleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	orgId?: string;
-	/**
-	 * @type string
-	 */
-	type?: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-}
-
 export interface AuthtypesTransactionDTO {
 	object: AuthtypesObjectDTO;
 	/**
@@ -470,504 +437,6 @@ export interface AuthtypesUpdateableAuthDomainDTO {
 	config?: AuthtypesAuthDomainConfigDTO;
 }
 
-export interface AuthtypesUserRoleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	id: string;
-	role?: AuthtypesStorableRoleDTO;
-	/**
-	 * @type string
-	 */
-	roleId?: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-	/**
-	 * @type string
-	 */
-	userId?: string;
-}
-
-export interface AuthtypesUserWithRolesDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	displayName?: string;
-	/**
-	 * @type string
-	 */
-	email?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type boolean
-	 */
-	isRoot?: boolean;
-	/**
-	 * @type string
-	 */
-	orgId?: string;
-	/**
-	 * @type string
-	 */
-	status?: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	userRoles?: AuthtypesUserRoleDTO[] | null;
-}
-
-export interface CloudintegrationtypesAWSAccountConfigDTO {
-	/**
-	 * @type array
-	 */
-	regions: string[];
-}
-
-export type CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets = {
-	[key: string]: string[];
-};
-
-export interface CloudintegrationtypesAWSCollectionStrategyDTO {
-	aws_logs?: CloudintegrationtypesAWSLogsStrategyDTO;
-	aws_metrics?: CloudintegrationtypesAWSMetricsStrategyDTO;
-	/**
-	 * @type object
-	 */
-	s3_buckets?: CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets;
-}
-
-export interface CloudintegrationtypesAWSConnectionArtifactDTO {
-	/**
-	 * @type string
-	 */
-	connectionURL: string;
-}
-
-export interface CloudintegrationtypesAWSConnectionArtifactRequestDTO {
-	/**
-	 * @type string
-	 */
-	deploymentRegion: string;
-	/**
-	 * @type array
-	 */
-	regions: string[];
-}
-
-export interface CloudintegrationtypesAWSIntegrationConfigDTO {
-	/**
-	 * @type array
-	 */
-	enabledRegions: string[];
-	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
-}
-
-export type CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
-	/**
-	 * @type string
-	 */
-	filter_pattern?: string;
-	/**
-	 * @type string
-	 */
-	log_group_name_prefix?: string;
-};
-
-export interface CloudintegrationtypesAWSLogsStrategyDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	cloudwatch_logs_subscriptions?:
-		| CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
-		| null;
-}
-
-export type CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
-	/**
-	 * @type array
-	 */
-	MetricNames?: string[];
-	/**
-	 * @type string
-	 */
-	Namespace?: string;
-};
-
-export interface CloudintegrationtypesAWSMetricsStrategyDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	cloudwatch_metric_stream_filters?:
-		| CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
-		| null;
-}
-
-export interface CloudintegrationtypesAWSServiceConfigDTO {
-	logs?: CloudintegrationtypesAWSServiceLogsConfigDTO;
-	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
-}
-
-export type CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets = {
-	[key: string]: string[];
-};
-
-export interface CloudintegrationtypesAWSServiceLogsConfigDTO {
-	/**
-	 * @type boolean
-	 */
-	enabled?: boolean;
-	/**
-	 * @type object
-	 */
-	s3_buckets?: CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets;
-}
-
-export interface CloudintegrationtypesAWSServiceMetricsConfigDTO {
-	/**
-	 * @type boolean
-	 */
-	enabled?: boolean;
-}
-
-export interface CloudintegrationtypesAccountDTO {
-	agentReport: CloudintegrationtypesAgentReportDTO;
-	config: CloudintegrationtypesAccountConfigDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 */
-	provider: string;
-	/**
-	 * @type string
-	 * @nullable true
-	 */
-	providerAccountId: string | null;
-	/**
-	 * @type string
-	 * @format date-time
-	 * @nullable true
-	 */
-	removedAt: Date | null;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-}
-
-export interface CloudintegrationtypesAccountConfigDTO {
-	aws: CloudintegrationtypesAWSAccountConfigDTO;
-}
-
-/**
- * @nullable
- */
-export type CloudintegrationtypesAgentReportDTOData = {
-	[key: string]: unknown;
-} | null;
-
-/**
- * @nullable
- */
-export type CloudintegrationtypesAgentReportDTO = {
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	data: CloudintegrationtypesAgentReportDTOData;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	timestampMillis: number;
-} | null;
-
-export interface CloudintegrationtypesAssetsDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
-}
-
-export interface CloudintegrationtypesCollectedLogAttributeDTO {
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	path?: string;
-	/**
-	 * @type string
-	 */
-	type?: string;
-}
-
-export interface CloudintegrationtypesCollectedMetricDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	type?: string;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-}
-
-export interface CloudintegrationtypesCollectionStrategyDTO {
-	aws: CloudintegrationtypesAWSCollectionStrategyDTO;
-}
-
-export interface CloudintegrationtypesConnectionArtifactDTO {
-	aws: CloudintegrationtypesAWSConnectionArtifactDTO;
-}
-
-export interface CloudintegrationtypesConnectionArtifactRequestDTO {
-	aws: CloudintegrationtypesAWSConnectionArtifactRequestDTO;
-}
-
-export interface CloudintegrationtypesDashboardDTO {
-	definition?: DashboardtypesStorableDashboardDataDTO;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	id?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-}
-
-export interface CloudintegrationtypesDataCollectedDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	logs?: CloudintegrationtypesCollectedLogAttributeDTO[] | null;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	metrics?: CloudintegrationtypesCollectedMetricDTO[] | null;
-}
-
-export interface CloudintegrationtypesGettableAccountWithArtifactDTO {
-	connectionArtifact: CloudintegrationtypesConnectionArtifactDTO;
-	/**
-	 * @type string
-	 */
-	id: string;
-}
-
-export interface CloudintegrationtypesGettableAccountsDTO {
-	/**
-	 * @type array
-	 */
-	accounts: CloudintegrationtypesAccountDTO[];
-}
-
-export interface CloudintegrationtypesGettableAgentCheckInResponseDTO {
-	/**
-	 * @type string
-	 */
-	account_id: string;
-	/**
-	 * @type string
-	 */
-	cloud_account_id: string;
-	/**
-	 * @type string
-	 */
-	cloudIntegrationId: string;
-	integration_config: CloudintegrationtypesIntegrationConfigDTO;
-	integrationConfig: CloudintegrationtypesProviderIntegrationConfigDTO;
-	/**
-	 * @type string
-	 */
-	providerAccountId: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 * @nullable true
-	 */
-	removed_at: Date | null;
-	/**
-	 * @type string
-	 * @format date-time
-	 * @nullable true
-	 */
-	removedAt: Date | null;
-}
-
-export interface CloudintegrationtypesGettableServicesMetadataDTO {
-	/**
-	 * @type array
-	 */
-	services: CloudintegrationtypesServiceMetadataDTO[];
-}
-
-/**
- * @nullable
- */
-export type CloudintegrationtypesIntegrationConfigDTO = {
-	/**
-	 * @type array
-	 */
-	enabled_regions: string[];
-	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
-} | null;
-
-/**
- * @nullable
- */
-export type CloudintegrationtypesPostableAgentCheckInRequestDTOData = {
-	[key: string]: unknown;
-} | null;
-
-export interface CloudintegrationtypesPostableAgentCheckInRequestDTO {
-	/**
-	 * @type string
-	 */
-	account_id?: string;
-	/**
-	 * @type string
-	 */
-	cloud_account_id?: string;
-	/**
-	 * @type string
-	 */
-	cloudIntegrationId?: string;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	data: CloudintegrationtypesPostableAgentCheckInRequestDTOData;
-	/**
-	 * @type string
-	 */
-	providerAccountId?: string;
-}
-
-export interface CloudintegrationtypesProviderIntegrationConfigDTO {
-	aws: CloudintegrationtypesAWSIntegrationConfigDTO;
-}
-
-export interface CloudintegrationtypesServiceDTO {
-	assets: CloudintegrationtypesAssetsDTO;
-	dataCollected: CloudintegrationtypesDataCollectedDTO;
-	/**
-	 * @type string
-	 */
-	icon: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	overview: string;
-	serviceConfig?: CloudintegrationtypesServiceConfigDTO;
-	supported_signals: CloudintegrationtypesSupportedSignalsDTO;
-	telemetryCollectionStrategy: CloudintegrationtypesCollectionStrategyDTO;
-	/**
-	 * @type string
-	 */
-	title: string;
-}
-
-export interface CloudintegrationtypesServiceConfigDTO {
-	aws: CloudintegrationtypesAWSServiceConfigDTO;
-}
-
-export interface CloudintegrationtypesServiceMetadataDTO {
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-	/**
-	 * @type string
-	 */
-	icon: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	title: string;
-}
-
-export interface CloudintegrationtypesSupportedSignalsDTO {
-	/**
-	 * @type boolean
-	 */
-	logs?: boolean;
-	/**
-	 * @type boolean
-	 */
-	metrics?: boolean;
-}
-
-export interface CloudintegrationtypesUpdatableAccountDTO {
-	config: CloudintegrationtypesAccountConfigDTO;
-}
-
-export interface CloudintegrationtypesUpdatableServiceDTO {
-	config: CloudintegrationtypesServiceConfigDTO;
-}
-
 export interface DashboardtypesDashboardDTO {
 	/**
 	 * @type string
@@ -1074,23 +543,6 @@ export interface ErrorsResponseerroradditionalDTO {
 	message?: string;
 }
 
-/**
- * @nullable
- */
-export type FactoryResponseDTOServices = { [key: string]: string[] } | null;
-
-export interface FactoryResponseDTO {
-	/**
-	 * @type boolean
-	 */
-	healthy?: boolean;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	services?: FactoryResponseDTOServices;
-}
-
 /**
  * @nullable
  */
@@ -2932,47 +2384,6 @@ export interface TypesChangePasswordRequestDTO {
 	userId?: string;
 }
 
-export interface TypesDeprecatedUserDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	displayName?: string;
-	/**
-	 * @type string
-	 */
-	email?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type boolean
-	 */
-	isRoot?: boolean;
-	/**
-	 * @type string
-	 */
-	orgId?: string;
-	/**
-	 * @type string
-	 */
-	role?: string;
-	/**
-	 * @type string
-	 */
-	status?: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-}
-
 export interface TypesGettableAPIKeyDTO {
 	/**
 	 * @type string
@@ -3180,13 +2591,6 @@ export interface TypesPostableResetPasswordDTO {
 	token?: string;
 }
 
-export interface TypesPostableRoleDTO {
-	/**
-	 * @type string
-	 */
-	name: string;
-}
-
 export interface TypesResetPasswordTokenDTO {
 	/**
 	 * @type string
@@ -3252,13 +2656,6 @@ export interface TypesStorableAPIKeyDTO {
 	userId?: string;
 }
 
-export interface TypesUpdatableUserDTO {
-	/**
-	 * @type string
-	 */
-	displayName: string;
-}
-
 export interface TypesUserDTO {
 	/**
 	 * @type string
@@ -3285,6 +2682,10 @@ export interface TypesUserDTO {
 	 * @type string
 	 */
 	orgId?: string;
+	/**
+	 * @type string
+	 */
+	role?: string;
 	/**
 	 * @type string
 	 */
@@ -3403,97 +2804,6 @@ export type AuthzResources200 = {
 export type ChangePasswordPathParameters = {
 	id: string;
 };
-export type AgentCheckInDeprecatedPathParameters = {
-	cloudProvider: string;
-};
-export type AgentCheckInDeprecated200 = {
-	data: CloudintegrationtypesGettableAgentCheckInResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type ListAccountsPathParameters = {
-	cloudProvider: string;
-};
-export type ListAccounts200 = {
-	data: CloudintegrationtypesGettableAccountsDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateAccountPathParameters = {
-	cloudProvider: string;
-};
-export type CreateAccount200 = {
-	data: CloudintegrationtypesGettableAccountWithArtifactDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DisconnectAccountPathParameters = {
-	cloudProvider: string;
-	id: string;
-};
-export type GetAccountPathParameters = {
-	cloudProvider: string;
-	id: string;
-};
-export type GetAccount200 = {
-	data: CloudintegrationtypesAccountDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateAccountPathParameters = {
-	cloudProvider: string;
-	id: string;
-};
-export type AgentCheckInPathParameters = {
-	cloudProvider: string;
-};
-export type AgentCheckIn200 = {
-	data: CloudintegrationtypesGettableAgentCheckInResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type ListServicesMetadataPathParameters = {
-	cloudProvider: string;
-};
-export type ListServicesMetadata200 = {
-	data: CloudintegrationtypesGettableServicesMetadataDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetServicePathParameters = {
-	cloudProvider: string;
-	serviceId: string;
-};
-export type GetService200 = {
-	data: CloudintegrationtypesServiceDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateServicePathParameters = {
-	cloudProvider: string;
-	serviceId: string;
-};
 export type CreateSessionByGoogleCallback303 = {
 	data: AuthtypesGettableTokenDTO;
 	/**
@@ -3595,19 +2905,6 @@ export type DeleteAuthDomainPathParameters = {
 export type UpdateAuthDomainPathParameters = {
 	id: string;
 };
-export type HandleExportRawDataPOSTParams = {
-	/**
-	 * @enum csv,jsonl
-	 * @type string
-	 * @description The output format for the export.
-	 */
-	format?: HandleExportRawDataPOSTFormat;
-};
-
-export enum HandleExportRawDataPOSTFormat {
-	csv = 'csv',
-	jsonl = 'jsonl',
-}
 export type GetFieldsKeysParams = {
 	/**
 	 * @description undefined
@@ -3965,11 +3262,11 @@ export type UpdateServiceAccountKeyPathParameters = {
 export type UpdateServiceAccountStatusPathParameters = {
 	id: string;
 };
-export type ListUsersDeprecated200 = {
+export type ListUsers200 = {
 	/**
 	 * @type array
 	 */
-	data: TypesDeprecatedUserDTO[];
+	data: TypesUserDTO[];
 	/**
 	 * @type string
 	 */
@@ -3979,30 +3276,30 @@ export type ListUsersDeprecated200 = {
 export type DeleteUserPathParameters = {
 	id: string;
 };
-export type GetUserDeprecatedPathParameters = {
+export type GetUserPathParameters = {
 	id: string;
 };
-export type GetUserDeprecated200 = {
-	data: TypesDeprecatedUserDTO;
+export type GetUser200 = {
+	data: TypesUserDTO;
 	/**
 	 * @type string
 	 */
 	status: string;
 };
 
-export type UpdateUserDeprecatedPathParameters = {
+export type UpdateUserPathParameters = {
 	id: string;
 };
-export type UpdateUserDeprecated200 = {
-	data: TypesDeprecatedUserDTO;
+export type UpdateUser200 = {
+	data: TypesUserDTO;
 	/**
 	 * @type string
 	 */
 	status: string;
 };
 
-export type GetMyUserDeprecated200 = {
-	data: TypesDeprecatedUserDTO;
+export type GetMyUser200 = {
+	data: TypesUserDTO;
 	/**
 	 * @type string
 	 */
@@ -4123,30 +3420,6 @@ export type SearchIngestionKeys200 = {
 	status: string;
 };
 
-export type Healthz200 = {
-	data: FactoryResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type Healthz503 = {
-	data: FactoryResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type Livez200 = {
-	data: FactoryResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListMetricsParams = {
 	/**
 	 * @type integer
@@ -4282,36 +3555,6 @@ export type GetMyOrganization200 = {
 	status: string;
 };
 
-export type Readyz200 = {
-	data: FactoryResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type Readyz503 = {
-	data: FactoryResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetUsersByRoleIDPathParameters = {
-	id: string;
-};
-export type GetUsersByRoleID200 = {
-	/**
-	 * @type array
-	 */
-	data: TypesUserDTO[];
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetSessionContext200 = {
 	data: AuthtypesSessionContextDTO;
 	/**
@@ -4336,60 +3579,6 @@ export type RotateSession200 = {
 	status: string;
 };
 
-export type ListUsers200 = {
-	/**
-	 * @type array
-	 */
-	data: TypesUserDTO[];
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetUserPathParameters = {
-	id: string;
-};
-export type GetUser200 = {
-	data: AuthtypesUserWithRolesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateUserPathParameters = {
-	id: string;
-};
-export type GetRolesByUserIDPathParameters = {
-	id: string;
-};
-export type GetRolesByUserID200 = {
-	/**
-	 * @type array
-	 */
-	data: AuthtypesRoleDTO[];
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type SetRoleByUserIDPathParameters = {
-	id: string;
-};
-export type RemoveUserRoleByUserIDAndRoleIDPathParameters = {
-	id: string;
-	roleId: string;
-};
-export type GetMyUser200 = {
-	data: AuthtypesUserWithRolesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetHosts200 = {
 	data: ZeustypesGettableHostDTO;
 	/**

frontend/src/api/v1/download/downloadExportData.ts

@@ -8,32 +8,42 @@ export const downloadExportData = async (
 	props: ExportRawDataProps,
 ): Promise<void> => {
 	try {
-		const response = await axios.post<Blob>(
-			`export_raw_data?format=${encodeURIComponent(props.format)}`,
-			props.body,
-			{
-				responseType: 'blob',
-				decompress: true,
-				headers: {
-					Accept: 'application/octet-stream',
-					'Content-Type': 'application/json',
-				},
-				timeout: 0,
-			},
-		);
+		const queryParams = new URLSearchParams();
 
+		queryParams.append('start', String(props.start));
+		queryParams.append('end', String(props.end));
+		queryParams.append('filter', props.filter);
+		props.columns.forEach((col) => {
+			queryParams.append('columns', col);
+		});
+		queryParams.append('order_by', props.orderBy);
+		queryParams.append('limit', String(props.limit));
+		queryParams.append('format', props.format);
+
+		const response = await axios.get<Blob>(`export_raw_data?${queryParams}`, {
+			responseType: 'blob', // Important: tell axios to handle response as blob
+			decompress: true, // Enable automatic decompression
+			headers: {
+				Accept: 'application/octet-stream', // Tell server we expect binary data
+			},
+			timeout: 0,
+		});
+
+		// Only proceed if the response status is 200
 		if (response.status !== 200) {
 			throw new Error(
 				`Failed to download data: server returned status ${response.status}`,
 			);
 		}
-
+		// Create blob URL from response data
 		const blob = new Blob([response.data], { type: 'application/octet-stream' });
 		const url = window.URL.createObjectURL(blob);
 
+		// Create and configure download link
 		const link = document.createElement('a');
 		link.href = url;
 
+		// Get filename from Content-Disposition header or generate timestamped default
 		const filename =
 			response.headers['content-disposition']
 				?.split('filename=')[1]
@@ -41,6 +51,7 @@ export const downloadExportData = async (
 
 		link.setAttribute('download', filename);
 
+		// Trigger download
 		document.body.appendChild(link);
 		link.click();
 		link.remove();

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -7,7 +7,7 @@ import ROUTES from 'constants/routes';
 import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
@@ -79,7 +79,7 @@ export function useNavigateToExplorer(): (
 	);
 
 	const { getUpdatedQuery } = useUpdatedQuery();
-	const { selectedDashboard } = useDashboardStore();
+	const { selectedDashboard } = useDashboard();
 	const { notifications } = useNotifications();
 
 	return useCallback(

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -1,357 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { message } from 'antd';
-import configureStore from 'redux-mock-store';
-import store from 'store';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
-
-import '@testing-library/jest-dom';
-
-import { DownloadFormats, DownloadRowCounts } from './constants';
-import DownloadOptionsMenu from './DownloadOptionsMenu';
-
-const mockDownloadExportData = jest.fn().mockResolvedValue(undefined);
-jest.mock('api/v1/download/downloadExportData', () => ({
-	downloadExportData: (...args: any[]): any => mockDownloadExportData(...args),
-	default: (...args: any[]): any => mockDownloadExportData(...args),
-}));
-
-jest.mock('antd', () => {
-	const actual = jest.requireActual('antd');
-	return {
-		...actual,
-		message: {
-			success: jest.fn(),
-			error: jest.fn(),
-		},
-	};
-});
-
-const mockUseQueryBuilder = jest.fn();
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): any => mockUseQueryBuilder(),
-}));
-
-const mockStore = configureStore([]);
-const createMockReduxStore = (): any =>
-	mockStore({
-		...store.getState(),
-	});
-
-const createMockStagedQuery = (dataSource: DataSource): Query => ({
-	id: 'test-query-id',
-	queryType: EQueryType.QUERY_BUILDER,
-	builder: {
-		queryData: [
-			{
-				queryName: 'A',
-				dataSource,
-				aggregateOperator: StringOperators.NOOP,
-				aggregateAttribute: {
-					id: '',
-					dataType: '' as any,
-					key: '',
-					type: '',
-				},
-				aggregations: [{ expression: 'count()' }],
-				functions: [],
-				filter: { expression: 'status = 200' },
-				filters: { items: [], op: 'AND' },
-				groupBy: [],
-				expression: 'A',
-				disabled: false,
-				having: { expression: '' } as any,
-				limit: null,
-				stepInterval: null,
-				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
-				legend: '',
-				selectColumns: [],
-			},
-		],
-		queryFormulas: [],
-		queryTraceOperator: [],
-	},
-	promql: [],
-	clickhouse_sql: [],
-});
-
-const renderWithStore = (dataSource: DataSource): void => {
-	const mockReduxStore = createMockReduxStore();
-	render(
-		<Provider store={mockReduxStore}>
-			<DownloadOptionsMenu dataSource={dataSource} />
-		</Provider>,
-	);
-};
-
-describe.each([
-	[DataSource.LOGS, 'logs'],
-	[DataSource.TRACES, 'traces'],
-])('DownloadOptionsMenu for %s', (dataSource, signal) => {
-	const testId = `periscope-btn-download-${dataSource}`;
-
-	beforeEach(() => {
-		mockDownloadExportData.mockReset().mockResolvedValue(undefined);
-		(message.success as jest.Mock).mockReset();
-		(message.error as jest.Mock).mockReset();
-		mockUseQueryBuilder.mockReturnValue({
-			stagedQuery: createMockStagedQuery(dataSource),
-		});
-	});
-
-	it('renders download button', () => {
-		renderWithStore(dataSource);
-		const button = screen.getByTestId(testId);
-		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass('periscope-btn', 'ghost');
-	});
-
-	it('shows popover with export options when download button is clicked', () => {
-		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-
-		expect(screen.getByRole('dialog')).toBeInTheDocument();
-		expect(screen.getByText('FORMAT')).toBeInTheDocument();
-		expect(screen.getByText('Number of Rows')).toBeInTheDocument();
-
-		if (dataSource === DataSource.TRACES) {
-			expect(screen.queryByText('Columns')).not.toBeInTheDocument();
-		} else {
-			expect(screen.getByText('Columns')).toBeInTheDocument();
-		}
-	});
-
-	it('allows changing export format', () => {
-		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-
-		const csvRadio = screen.getByRole('radio', { name: 'csv' });
-		const jsonlRadio = screen.getByRole('radio', { name: 'jsonl' });
-
-		expect(csvRadio).toBeChecked();
-		fireEvent.click(jsonlRadio);
-		expect(jsonlRadio).toBeChecked();
-		expect(csvRadio).not.toBeChecked();
-	});
-
-	it('allows changing row limit', () => {
-		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-
-		const tenKRadio = screen.getByRole('radio', { name: '10k' });
-		const fiftyKRadio = screen.getByRole('radio', { name: '50k' });
-
-		expect(tenKRadio).toBeChecked();
-		fireEvent.click(fiftyKRadio);
-		expect(fiftyKRadio).toBeChecked();
-		expect(tenKRadio).not.toBeChecked();
-	});
-
-	it('allows changing columns scope', () => {
-		if (dataSource === DataSource.TRACES) {
-			renderWithStore(dataSource);
-			fireEvent.click(screen.getByTestId(testId));
-
-			expect(screen.queryByRole('radio', { name: 'All' })).not.toBeInTheDocument();
-			expect(
-				screen.queryByRole('radio', { name: 'Selected' }),
-			).not.toBeInTheDocument();
-			return;
-		}
-
-		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-
-		const allColumnsRadio = screen.getByRole('radio', { name: 'All' });
-		const selectedColumnsRadio = screen.getByRole('radio', { name: 'Selected' });
-
-		expect(allColumnsRadio).toBeChecked();
-		fireEvent.click(selectedColumnsRadio);
-		expect(selectedColumnsRadio).toBeChecked();
-		expect(allColumnsRadio).not.toBeChecked();
-	});
-
-	it('calls downloadExportData with correct format and POST body', async () => {
-		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(mockDownloadExportData).toHaveBeenCalledTimes(1);
-			const callArgs = mockDownloadExportData.mock.calls[0][0];
-			expect(callArgs.format).toBe(DownloadFormats.CSV);
-			expect(callArgs.body).toBeDefined();
-			expect(callArgs.body.requestType).toBe('raw');
-			expect(callArgs.body.compositeQuery.queries).toHaveLength(1);
-
-			const query = callArgs.body.compositeQuery.queries[0];
-			expect(query.type).toBe('builder_query');
-			expect(query.spec.signal).toBe(signal);
-			expect(query.spec.limit).toBe(DownloadRowCounts.TEN_K);
-		});
-	});
-
-	it('clears groupBy and having in the export payload', async () => {
-		const mockQuery = createMockStagedQuery(dataSource);
-		mockQuery.builder.queryData[0].groupBy = [
-			{ key: 'service', dataType: 'string' as any, type: '' },
-		];
-		mockQuery.builder.queryData[0].having = {
-			expression: 'count() > 10',
-		} as any;
-
-		mockUseQueryBuilder.mockReturnValue({ stagedQuery: mockQuery });
-		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(mockDownloadExportData).toHaveBeenCalledTimes(1);
-			const callArgs = mockDownloadExportData.mock.calls[0][0];
-			const query = callArgs.body.compositeQuery.queries[0];
-			expect(query.spec.groupBy).toBeUndefined();
-			expect(query.spec.having).toEqual({ expression: '' });
-		});
-	});
-
-	it('keeps selectColumns when column scope is Selected', async () => {
-		const mockQuery = createMockStagedQuery(dataSource);
-		mockQuery.builder.queryData[0].selectColumns = [
-			{ name: 'http.status', fieldDataType: 'int64', fieldContext: 'attribute' },
-		] as any;
-
-		mockUseQueryBuilder.mockReturnValue({ stagedQuery: mockQuery });
-		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-
-		// For traces, column scope is always Selected and the radio is hidden
-		if (dataSource !== DataSource.TRACES) {
-			fireEvent.click(screen.getByRole('radio', { name: 'Selected' }));
-		}
-
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(mockDownloadExportData).toHaveBeenCalledTimes(1);
-			const callArgs = mockDownloadExportData.mock.calls[0][0];
-			const query = callArgs.body.compositeQuery.queries[0];
-			expect(query.spec.selectFields).toEqual([
-				expect.objectContaining({
-					name: 'http.status',
-					fieldDataType: 'int64',
-				}),
-			]);
-		});
-	});
-
-	it('sends no selectFields when column scope is All', async () => {
-		// For traces, column scope is always Selected — this test only applies to other sources
-		if (dataSource === DataSource.TRACES) {
-			return;
-		}
-
-		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-		fireEvent.click(screen.getByRole('radio', { name: 'All' }));
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(mockDownloadExportData).toHaveBeenCalledTimes(1);
-			const callArgs = mockDownloadExportData.mock.calls[0][0];
-			const query = callArgs.body.compositeQuery.queries[0];
-			expect(query.spec.selectFields).toBeUndefined();
-		});
-	});
-
-	it('handles successful export with success message', async () => {
-		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(message.success).toHaveBeenCalledWith(
-				'Export completed successfully',
-			);
-		});
-	});
-
-	it('handles export failure with error message', async () => {
-		mockDownloadExportData.mockRejectedValueOnce(new Error('Server error'));
-		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(message.error).toHaveBeenCalledWith(
-				`Failed to export ${dataSource}. Please try again.`,
-			);
-		});
-	});
-
-	it('handles UI state correctly during export process', async () => {
-		let resolveDownload: () => void;
-		mockDownloadExportData.mockImplementationOnce(
-			() =>
-				new Promise<void>((resolve) => {
-					resolveDownload = resolve;
-				}),
-		);
-		renderWithStore(dataSource);
-
-		fireEvent.click(screen.getByTestId(testId));
-		expect(screen.getByRole('dialog')).toBeInTheDocument();
-
-		fireEvent.click(screen.getByText('Export'));
-
-		expect(screen.getByTestId(testId)).toBeDisabled();
-		expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-
-		resolveDownload!();
-
-		await waitFor(() => {
-			expect(screen.getByTestId(testId)).not.toBeDisabled();
-		});
-	});
-});
-
-describe('DownloadOptionsMenu for traces with queryTraceOperator', () => {
-	const dataSource = DataSource.TRACES;
-	const testId = `periscope-btn-download-${dataSource}`;
-
-	beforeEach(() => {
-		mockDownloadExportData.mockReset().mockResolvedValue(undefined);
-		(message.success as jest.Mock).mockReset();
-	});
-
-	it('applies limit and clears groupBy on queryTraceOperator entries', async () => {
-		const query = createMockStagedQuery(dataSource);
-		query.builder.queryTraceOperator = [
-			{
-				...query.builder.queryData[0],
-				queryName: 'TraceOp1',
-				expression: 'TraceOp1',
-				groupBy: [{ key: 'service', dataType: 'string' as any, type: '' }],
-			},
-		];
-
-		mockUseQueryBuilder.mockReturnValue({ stagedQuery: query });
-		renderWithStore(dataSource);
-		fireEvent.click(screen.getByTestId(testId));
-		fireEvent.click(screen.getByRole('radio', { name: '50k' }));
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(mockDownloadExportData).toHaveBeenCalledTimes(1);
-			const callArgs = mockDownloadExportData.mock.calls[0][0];
-			const queries = callArgs.body.compositeQuery.queries;
-			const traceOpQuery = queries.find((q: any) => q.spec.name === 'TraceOp1');
-			if (traceOpQuery) {
-				expect(traceOpQuery.spec.limit).toBe(DownloadRowCounts.FIFTY_K);
-				expect(traceOpQuery.spec.groupBy).toBeUndefined();
-			}
-		});
-	});
-});

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,153 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Radio, Tooltip, Typography } from 'antd';
-import { TelemetryFieldKey } from 'api/v5/v5';
-import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
-import { Download, DownloadIcon, Loader2 } from 'lucide-react';
-import { DataSource } from 'types/common/queryBuilder';
-
-import {
-	DownloadColumnsScopes,
-	DownloadFormats,
-	DownloadRowCounts,
-} from './constants';
-
-import './DownloadOptionsMenu.styles.scss';
-
-interface DownloadOptionsMenuProps {
-	dataSource: DataSource;
-	selectedColumns?: TelemetryFieldKey[];
-}
-
-export default function DownloadOptionsMenu({
-	dataSource,
-	selectedColumns,
-}: DownloadOptionsMenuProps): JSX.Element {
-	const [exportFormat, setExportFormat] = useState<string>(DownloadFormats.CSV);
-	const [rowLimit, setRowLimit] = useState<number>(DownloadRowCounts.TEN_K);
-	const [columnsScope, setColumnsScope] = useState<string>(
-		DownloadColumnsScopes.ALL,
-	);
-	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
-
-	const { isDownloading, handleExportRawData } = useExportRawData({
-		dataSource,
-	});
-
-	const handleExport = useCallback(async (): Promise<void> => {
-		setIsPopoverOpen(false);
-		await handleExportRawData({
-			format: exportFormat,
-			rowLimit,
-			clearSelectColumns:
-				dataSource !== DataSource.TRACES &&
-				columnsScope === DownloadColumnsScopes.ALL,
-			selectedColumns,
-		});
-	}, [
-		exportFormat,
-		rowLimit,
-		columnsScope,
-		selectedColumns,
-		handleExportRawData,
-		dataSource,
-	]);
-
-	const popoverContent = useMemo(
-		() => (
-			<div
-				className="export-options-container"
-				role="dialog"
-				aria-label="Export options"
-				aria-modal="true"
-			>
-				<div className="export-format">
-					<Typography.Text className="title">FORMAT</Typography.Text>
-					<Radio.Group
-						value={exportFormat}
-						onChange={(e): void => setExportFormat(e.target.value)}
-					>
-						<Radio value={DownloadFormats.CSV}>csv</Radio>
-						<Radio value={DownloadFormats.JSONL}>jsonl</Radio>
-					</Radio.Group>
-				</div>
-
-				<div className="horizontal-line" />
-
-				<div className="row-limit">
-					<Typography.Text className="title">Number of Rows</Typography.Text>
-					<Radio.Group
-						value={rowLimit}
-						onChange={(e): void => setRowLimit(e.target.value)}
-					>
-						<Radio value={DownloadRowCounts.TEN_K}>10k</Radio>
-						<Radio value={DownloadRowCounts.THIRTY_K}>30k</Radio>
-						<Radio value={DownloadRowCounts.FIFTY_K}>50k</Radio>
-					</Radio.Group>
-				</div>
-
-				{dataSource !== DataSource.TRACES && (
-					<>
-						<div className="horizontal-line" />
-
-						<div className="columns-scope">
-							<Typography.Text className="title">Columns</Typography.Text>
-							<Radio.Group
-								value={columnsScope}
-								onChange={(e): void => setColumnsScope(e.target.value)}
-							>
-								<Radio value={DownloadColumnsScopes.ALL}>All</Radio>
-								<Radio value={DownloadColumnsScopes.SELECTED}>Selected</Radio>
-							</Radio.Group>
-						</div>
-					</>
-				)}
-
-				<Button
-					type="primary"
-					icon={<Download size={16} />}
-					onClick={handleExport}
-					className="export-button"
-					disabled={isDownloading}
-					loading={isDownloading}
-				>
-					Export
-				</Button>
-			</div>
-		),
-		[
-			exportFormat,
-			rowLimit,
-			columnsScope,
-			isDownloading,
-			handleExport,
-			dataSource,
-		],
-	);
-
-	return (
-		<Popover
-			content={popoverContent}
-			trigger="click"
-			placement="bottomRight"
-			arrow={false}
-			open={isPopoverOpen}
-			onOpenChange={setIsPopoverOpen}
-			rootClassName="download-popover"
-		>
-			<Tooltip title="Download" placement="top">
-				<Button
-					className="periscope-btn ghost"
-					icon={
-						isDownloading ? (
-							<Loader2 size={14} className="animate-spin" />
-						) : (
-							<DownloadIcon size={14} />
-						)
-					}
-					data-testid={`periscope-btn-download-${dataSource}`}
-					disabled={isDownloading}
-				/>
-			</Tooltip>
-		</Popover>
-	);
-}

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -20,7 +20,7 @@ import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	getResetPasswordToken,
 	useDeleteUser,
-	useUpdateUserDeprecated,
+	useUpdateUser,
 } from 'api/generated/services/users';
 import { AxiosError } from 'axios';
 import { MemberRow } from 'components/MembersTable/MembersTable';
@@ -60,7 +60,7 @@ function EditMemberDrawer({
 
 	const isInvited = member?.status === MemberStatus.Invited;
 
-	const { mutate: updateUser, isLoading: isSaving } = useUpdateUserDeprecated({
+	const { mutate: updateUser, isLoading: isSaving } = useUpdateUser({
 		mutation: {
 			onSuccess: (): void => {
 				toast.success('Member details updated successfully', { richColors: true });

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

@@ -4,7 +4,7 @@ import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getResetPasswordToken,
 	useDeleteUser,
-	useUpdateUserDeprecated,
+	useUpdateUser,
 } from 'api/generated/services/users';
 import { MemberStatus } from 'container/MembersSettings/utils';
 import {
@@ -50,7 +50,7 @@ jest.mock('@signozhq/dialog', () => ({
 
 jest.mock('api/generated/services/users', () => ({
 	useDeleteUser: jest.fn(),
-	useUpdateUserDeprecated: jest.fn(),
+	useUpdateUser: jest.fn(),
 	getResetPasswordToken: jest.fn(),
 }));
 
@@ -105,7 +105,7 @@ function renderDrawer(
 describe('EditMemberDrawer', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		(useUpdateUserDeprecated as jest.Mock).mockReturnValue({
+		(useUpdateUser as jest.Mock).mockReturnValue({
 			mutate: mockUpdateMutate,
 			isLoading: false,
 		});
@@ -130,7 +130,7 @@ describe('EditMemberDrawer', () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-		(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
+		(useUpdateUser as jest.Mock).mockImplementation((options) => ({
 			mutate: mockUpdateMutate.mockImplementation(() => {
 				options?.mutation?.onSuccess?.();
 			}),
@@ -239,7 +239,7 @@ describe('EditMemberDrawer', () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-		(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
+		(useUpdateUser as jest.Mock).mockImplementation((options) => ({
 			mutate: mockUpdateMutate.mockImplementation(() => {
 				options?.mutation?.onSuccess?.();
 			}),
@@ -280,7 +280,7 @@ describe('EditMemberDrawer', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			const mockToast = jest.mocked(toast);
 
-			(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
+			(useUpdateUser as jest.Mock).mockImplementation((options) => ({
 				mutate: mockUpdateMutate.mockImplementation(() => {
 					options?.mutation?.onError?.({});
 				}),

frontend/src/components/LogsDownloadOptionsMenu/LogsDownloadOptionsMenu.styles.scss

@@ -1,11 +1,11 @@
-.download-popover {
+.logs-download-popover {
 	.ant-popover-inner {
 		border-radius: 4px;
-		border: 1px solid var(--l3-border);
+		border: 1px solid var(--bg-slate-400);
 		background: linear-gradient(
 			139deg,
-			var(--l2-background) 0%,
-			var(--l3-background) 98.68%
+			var(--bg-ink-400) 0%,
+			var(--bg-ink-500) 98.68%
 		);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
@@ -19,7 +19,7 @@
 
 		.title {
 			display: flex;
-			color: var(--l3-foreground);
+			color: var(--bg-slate-50);
 			font-family: Inter;
 			font-size: 11px;
 			font-style: normal;
@@ -38,7 +38,7 @@
 			flex-direction: column;
 
 			:global(.ant-radio-wrapper) {
-				color: var(--foreground);
+				color: var(--bg-vanilla-400);
 				font-family: Inter;
 				font-size: 13px;
 			}
@@ -46,7 +46,7 @@
 
 		.horizontal-line {
 			height: 1px;
-			background: var(--l3-border);
+			background: var(--bg-slate-400);
 		}
 
 		.export-button {
@@ -59,27 +59,27 @@
 }
 
 .lightMode {
-	.download-popover {
+	.logs-download-popover {
 		.ant-popover-inner {
-			border: 1px solid var(--l2-border);
+			border: 1px solid var(--bg-vanilla-300);
 			background: linear-gradient(
 				139deg,
-				var(--background) 0%,
-				var(--l1-background) 98.68%
+				var(--bg-vanilla-100) 0%,
+				var(--bg-vanilla-300) 98.68%
 			);
 			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
 		}
 		.export-options-container {
 			.title {
-				color: var(--l2-foreground);
+				color: var(--bg-ink-200);
 			}
 
 			:global(.ant-radio-wrapper) {
-				color: var(--foreground);
+				color: var(--bg-ink-400);
 			}
 
 			.horizontal-line {
-				background: var(--l2-border);
+				background: var(--bg-vanilla-300);
 			}
 		}
 	}

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

@@ -0,0 +1,341 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { message } from 'antd';
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+import '@testing-library/jest-dom';
+
+import { DownloadFormats, DownloadRowCounts } from './constants';
+import LogsDownloadOptionsMenu from './LogsDownloadOptionsMenu';
+
+// Mock antd message
+jest.mock('antd', () => {
+	const actual = jest.requireActual('antd');
+	return {
+		...actual,
+		message: {
+			success: jest.fn(),
+			error: jest.fn(),
+		},
+	};
+});
+
+const TEST_IDS = {
+	DOWNLOAD_BUTTON: 'periscope-btn-download-options',
+} as const;
+
+interface TestProps {
+	startTime: number;
+	endTime: number;
+	filter: string;
+	columns: TelemetryFieldKey[];
+	orderBy: string;
+}
+
+const createTestProps = (): TestProps => ({
+	startTime: 1631234567890,
+	endTime: 1631234567999,
+	filter: 'status = 200',
+	columns: [
+		{
+			name: 'http.status',
+			fieldContext: 'attribute',
+			fieldDataType: 'int64',
+		} as TelemetryFieldKey,
+	],
+	orderBy: 'timestamp:desc',
+});
+
+const testRenderContent = (props: TestProps): void => {
+	render(
+		<LogsDownloadOptionsMenu
+			startTime={props.startTime}
+			endTime={props.endTime}
+			filter={props.filter}
+			columns={props.columns}
+			orderBy={props.orderBy}
+		/>,
+	);
+};
+
+const testSuccessResponse = (res: any, ctx: any): any =>
+	res(
+		ctx.status(200),
+		ctx.set('Content-Type', 'application/octet-stream'),
+		ctx.set('Content-Disposition', 'attachment; filename="export.csv"'),
+		ctx.body('id,value\n1,2\n'),
+	);
+
+describe('LogsDownloadOptionsMenu', () => {
+	const BASE_URL = ENVIRONMENT.baseURL;
+	const EXPORT_URL = `${BASE_URL}/api/v1/export_raw_data`;
+	let requestSpy: jest.Mock<any, any>;
+	const setupDefaultServer = (): void => {
+		server.use(
+			rest.get(EXPORT_URL, (req, res, ctx) => {
+				const params = req.url.searchParams;
+				const payload = {
+					start: Number(params.get('start')),
+					end: Number(params.get('end')),
+					filter: params.get('filter'),
+					columns: params.getAll('columns'),
+					order_by: params.get('order_by'),
+					limit: Number(params.get('limit')),
+					format: params.get('format'),
+				};
+				requestSpy(payload);
+				return testSuccessResponse(res, ctx);
+			}),
+		);
+	};
+
+	// Mock URL.createObjectURL used by download logic
+	const originalCreateObjectURL = URL.createObjectURL;
+	const originalRevokeObjectURL = URL.revokeObjectURL;
+
+	beforeEach(() => {
+		requestSpy = jest.fn();
+		setupDefaultServer();
+		(message.success as jest.Mock).mockReset();
+		(message.error as jest.Mock).mockReset();
+		// jsdom doesn't implement it by default
+		((URL as unknown) as {
+			createObjectURL: (b: Blob) => string;
+		}).createObjectURL = jest.fn(() => 'blob:mock');
+		((URL as unknown) as {
+			revokeObjectURL: (u: string) => void;
+		}).revokeObjectURL = jest.fn();
+	});
+
+	beforeAll(() => {
+		server.listen();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	afterAll(() => {
+		server.close();
+		// restore
+		URL.createObjectURL = originalCreateObjectURL;
+		URL.revokeObjectURL = originalRevokeObjectURL;
+	});
+
+	it('renders download button', () => {
+		const props = createTestProps();
+		testRenderContent(props);
+
+		const button = screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON);
+		expect(button).toBeInTheDocument();
+		expect(button).toHaveClass('periscope-btn', 'ghost');
+	});
+
+	it('shows popover with export options when download button is clicked', () => {
+		const props = createTestProps();
+		render(
+			<LogsDownloadOptionsMenu
+				startTime={props.startTime}
+				endTime={props.endTime}
+				filter={props.filter}
+				columns={props.columns}
+				orderBy={props.orderBy}
+			/>,
+		);
+
+		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
+
+		expect(screen.getByRole('dialog')).toBeInTheDocument();
+		expect(screen.getByText('FORMAT')).toBeInTheDocument();
+		expect(screen.getByText('Number of Rows')).toBeInTheDocument();
+		expect(screen.getByText('Columns')).toBeInTheDocument();
+	});
+
+	it('allows changing export format', () => {
+		const props = createTestProps();
+		testRenderContent(props);
+		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
+
+		const csvRadio = screen.getByRole('radio', { name: 'csv' });
+		const jsonlRadio = screen.getByRole('radio', { name: 'jsonl' });
+
+		expect(csvRadio).toBeChecked();
+		fireEvent.click(jsonlRadio);
+		expect(jsonlRadio).toBeChecked();
+		expect(csvRadio).not.toBeChecked();
+	});
+
+	it('allows changing row limit', () => {
+		const props = createTestProps();
+		testRenderContent(props);
+
+		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
+
+		const tenKRadio = screen.getByRole('radio', { name: '10k' });
+		const fiftyKRadio = screen.getByRole('radio', { name: '50k' });
+
+		expect(tenKRadio).toBeChecked();
+		fireEvent.click(fiftyKRadio);
+		expect(fiftyKRadio).toBeChecked();
+		expect(tenKRadio).not.toBeChecked();
+	});
+
+	it('allows changing columns scope', () => {
+		const props = createTestProps();
+		testRenderContent(props);
+		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
+
+		const allColumnsRadio = screen.getByRole('radio', { name: 'All' });
+		const selectedColumnsRadio = screen.getByRole('radio', { name: 'Selected' });
+
+		expect(allColumnsRadio).toBeChecked();
+		fireEvent.click(selectedColumnsRadio);
+		expect(selectedColumnsRadio).toBeChecked();
+		expect(allColumnsRadio).not.toBeChecked();
+	});
+
+	it('calls downloadExportData with correct parameters when export button is clicked (Selected columns)', async () => {
+		const props = createTestProps();
+		testRenderContent(props);
+		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
+		fireEvent.click(screen.getByRole('radio', { name: 'Selected' }));
+		fireEvent.click(screen.getByText('Export'));
+
+		await waitFor(() => {
+			expect(requestSpy).toHaveBeenCalledWith(
+				expect.objectContaining({
+					start: props.startTime,
+					end: props.endTime,
+					columns: ['attribute.http.status:int64'],
+					filter: props.filter,
+					order_by: props.orderBy,
+					format: DownloadFormats.CSV,
+					limit: DownloadRowCounts.TEN_K,
+				}),
+			);
+		});
+	});
+
+	it('calls downloadExportData with correct parameters when export button is clicked', async () => {
+		const props = createTestProps();
+		testRenderContent(props);
+
+		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
+		fireEvent.click(screen.getByRole('radio', { name: 'All' }));
+		fireEvent.click(screen.getByText('Export'));
+
+		await waitFor(() => {
+			expect(requestSpy).toHaveBeenCalledWith(
+				expect.objectContaining({
+					start: props.startTime,
+					end: props.endTime,
+					columns: [],
+					filter: props.filter,
+					order_by: props.orderBy,
+					format: DownloadFormats.CSV,
+					limit: DownloadRowCounts.TEN_K,
+				}),
+			);
+		});
+	});
+
+	it('handles successful export with success message', async () => {
+		const props = createTestProps();
+		testRenderContent(props);
+
+		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
+		fireEvent.click(screen.getByText('Export'));
+
+		await waitFor(() => {
+			expect(message.success).toHaveBeenCalledWith(
+				'Export completed successfully',
+			);
+		});
+	});
+
+	it('handles export failure with error message', async () => {
+		// Override handler to return 500 for this test
+		server.use(rest.get(EXPORT_URL, (_req, res, ctx) => res(ctx.status(500))));
+		const props = createTestProps();
+		testRenderContent(props);
+
+		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
+		fireEvent.click(screen.getByText('Export'));
+
+		await waitFor(() => {
+			expect(message.error).toHaveBeenCalledWith(
+				'Failed to export logs. Please try again.',
+			);
+		});
+	});
+
+	it('handles UI state correctly during export process', async () => {
+		server.use(
+			rest.get(EXPORT_URL, (_req, res, ctx) => testSuccessResponse(res, ctx)),
+		);
+		const props = createTestProps();
+		testRenderContent(props);
+
+		// Open popover
+		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
+		expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+		// Start export
+		fireEvent.click(screen.getByText('Export'));
+
+		// Check button is disabled during export
+		expect(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON)).toBeDisabled();
+
+		// Check popover is closed immediately after export starts
+		expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
+		// Wait for export to complete and verify button is enabled again
+		await waitFor(() => {
+			expect(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON)).not.toBeDisabled();
+		});
+	});
+
+	it('uses filename from Content-Disposition and triggers download click', async () => {
+		server.use(
+			rest.get(EXPORT_URL, (_req, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.set('Content-Type', 'application/octet-stream'),
+					ctx.set('Content-Disposition', 'attachment; filename="report.jsonl"'),
+					ctx.body('row\n'),
+				),
+			),
+		);
+
+		const originalCreateElement = document.createElement.bind(document);
+		const anchorEl = originalCreateElement('a') as HTMLAnchorElement;
+		const setAttrSpy = jest.spyOn(anchorEl, 'setAttribute');
+		const clickSpy = jest.spyOn(anchorEl, 'click');
+		const removeSpy = jest.spyOn(anchorEl, 'remove');
+		const createElSpy = jest
+			.spyOn(document, 'createElement')
+			.mockImplementation((tagName: any): any =>
+				tagName === 'a' ? anchorEl : originalCreateElement(tagName),
+			);
+		const appendSpy = jest.spyOn(document.body, 'appendChild');
+
+		const props = createTestProps();
+		testRenderContent(props);
+
+		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
+		fireEvent.click(screen.getByText('Export'));
+
+		await waitFor(() => {
+			expect(appendSpy).toHaveBeenCalledWith(anchorEl);
+			expect(setAttrSpy).toHaveBeenCalledWith('download', 'report.jsonl');
+			expect(clickSpy).toHaveBeenCalled();
+			expect(removeSpy).toHaveBeenCalled();
+		});
+		expect(anchorEl.getAttribute('download')).toBe('report.jsonl');
+
+		createElSpy.mockRestore();
+		appendSpy.mockRestore();
+	});
+});

frontend/src/components/LogsDownloadOptionsMenu/LogsDownloadOptionsMenu.tsx

@@ -0,0 +1,170 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Button, message, Popover, Radio, Tooltip, Typography } from 'antd';
+import { downloadExportData } from 'api/v1/download/downloadExportData';
+import { Download, DownloadIcon, Loader2 } from 'lucide-react';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+import {
+	DownloadColumnsScopes,
+	DownloadFormats,
+	DownloadRowCounts,
+} from './constants';
+
+import './LogsDownloadOptionsMenu.styles.scss';
+
+function convertTelemetryFieldKeyToText(key: TelemetryFieldKey): string {
+	const prefix = key.fieldContext ? `${key.fieldContext}.` : '';
+	const suffix = key.fieldDataType ? `:${key.fieldDataType}` : '';
+	return `${prefix}${key.name}${suffix}`;
+}
+
+interface LogsDownloadOptionsMenuProps {
+	startTime: number;
+	endTime: number;
+	filter: string;
+	columns: TelemetryFieldKey[];
+	orderBy: string;
+}
+
+export default function LogsDownloadOptionsMenu({
+	startTime,
+	endTime,
+	filter,
+	columns,
+	orderBy,
+}: LogsDownloadOptionsMenuProps): JSX.Element {
+	const [exportFormat, setExportFormat] = useState<string>(DownloadFormats.CSV);
+	const [rowLimit, setRowLimit] = useState<number>(DownloadRowCounts.TEN_K);
+	const [columnsScope, setColumnsScope] = useState<string>(
+		DownloadColumnsScopes.ALL,
+	);
+	const [isDownloading, setIsDownloading] = useState<boolean>(false);
+	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+
+	const handleExportRawData = useCallback(async (): Promise<void> => {
+		setIsPopoverOpen(false);
+		try {
+			setIsDownloading(true);
+			const downloadOptions = {
+				source: 'logs',
+				start: startTime,
+				end: endTime,
+				columns:
+					columnsScope === DownloadColumnsScopes.SELECTED
+						? columns.map((col) => convertTelemetryFieldKeyToText(col))
+						: [],
+				filter,
+				orderBy,
+				format: exportFormat,
+				limit: rowLimit,
+			};
+
+			await downloadExportData(downloadOptions);
+			message.success('Export completed successfully');
+		} catch (error) {
+			console.error('Error exporting logs:', error);
+			message.error('Failed to export logs. Please try again.');
+		} finally {
+			setIsDownloading(false);
+		}
+	}, [
+		startTime,
+		endTime,
+		columnsScope,
+		columns,
+		filter,
+		orderBy,
+		exportFormat,
+		rowLimit,
+		setIsDownloading,
+		setIsPopoverOpen,
+	]);
+
+	const popoverContent = useMemo(
+		() => (
+			<div
+				className="export-options-container"
+				role="dialog"
+				aria-label="Export options"
+				aria-modal="true"
+			>
+				<div className="export-format">
+					<Typography.Text className="title">FORMAT</Typography.Text>
+					<Radio.Group
+						value={exportFormat}
+						onChange={(e): void => setExportFormat(e.target.value)}
+					>
+						<Radio value={DownloadFormats.CSV}>csv</Radio>
+						<Radio value={DownloadFormats.JSONL}>jsonl</Radio>
+					</Radio.Group>
+				</div>
+
+				<div className="horizontal-line" />
+
+				<div className="row-limit">
+					<Typography.Text className="title">Number of Rows</Typography.Text>
+					<Radio.Group
+						value={rowLimit}
+						onChange={(e): void => setRowLimit(e.target.value)}
+					>
+						<Radio value={DownloadRowCounts.TEN_K}>10k</Radio>
+						<Radio value={DownloadRowCounts.THIRTY_K}>30k</Radio>
+						<Radio value={DownloadRowCounts.FIFTY_K}>50k</Radio>
+					</Radio.Group>
+				</div>
+
+				<div className="horizontal-line" />
+
+				<div className="columns-scope">
+					<Typography.Text className="title">Columns</Typography.Text>
+					<Radio.Group
+						value={columnsScope}
+						onChange={(e): void => setColumnsScope(e.target.value)}
+					>
+						<Radio value={DownloadColumnsScopes.ALL}>All</Radio>
+						<Radio value={DownloadColumnsScopes.SELECTED}>Selected</Radio>
+					</Radio.Group>
+				</div>
+
+				<Button
+					type="primary"
+					icon={<Download size={16} />}
+					onClick={handleExportRawData}
+					className="export-button"
+					disabled={isDownloading}
+					loading={isDownloading}
+				>
+					Export
+				</Button>
+			</div>
+		),
+		[exportFormat, rowLimit, columnsScope, isDownloading, handleExportRawData],
+	);
+
+	return (
+		<Popover
+			content={popoverContent}
+			trigger="click"
+			placement="bottomRight"
+			arrow={false}
+			open={isPopoverOpen}
+			onOpenChange={setIsPopoverOpen}
+			rootClassName="logs-download-popover"
+		>
+			<Tooltip title="Download" placement="top">
+				<Button
+					className="periscope-btn ghost"
+					icon={
+						isDownloading ? (
+							<Loader2 size={18} className="animate-spin" />
+						) : (
+							<DownloadIcon size={15} />
+						)
+					}
+					data-testid="periscope-btn-download-options"
+					disabled={isDownloading}
+				/>
+			</Tooltip>
+		</Popover>
+	);
+}

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -86,8 +86,8 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
-jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
-	useDashboardStore: (): { selectedDashboard: undefined } => ({
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): { selectedDashboard: undefined } => ({
 		selectedDashboard: undefined,
 	}),
 }));

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -1,6 +1,4 @@
-import { ReactNode } from 'react';
 import { MemoryRouter, useLocation } from 'react-router-dom';
-import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
 import {
 	getDashboardById,
 	getNonIntegrationDashboardById,
@@ -8,9 +6,10 @@ import {
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import {
-	resetDashboard,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
+	DashboardContext,
+	DashboardProvider,
+} from 'providers/Dashboard/Dashboard';
+import { IDashboardContext } from 'providers/Dashboard/types';
 import {
 	fireEvent,
 	render,
@@ -22,18 +21,6 @@ import { Dashboard } from 'types/api/dashboard/getAll';
 
 import DashboardDescription from '..';
 
-function DashboardBootstrapWrapper({
-	dashboardId,
-	children,
-}: {
-	dashboardId: string;
-	children: ReactNode;
-}): JSX.Element {
-	useDashboardBootstrap(dashboardId);
-	// eslint-disable-next-line react/jsx-no-useless-fragment
-	return <>{children}</>;
-}
-
 interface MockSafeNavigateReturn {
 	safeNavigate: jest.MockedFunction<(url: string) => void>;
 }
@@ -67,7 +54,6 @@ describe('Dashboard landing page actions header tests', () => {
 	beforeEach(() => {
 		mockSafeNavigate.mockClear();
 		sessionStorage.clear();
-		resetDashboard();
 	});
 
 	it('unlock dashboard should be disabled for integrations created dashboards', async () => {
@@ -78,7 +64,7 @@ describe('Dashboard landing page actions header tests', () => {
 		(useLocation as jest.Mock).mockReturnValue(mockLocation);
 		const { getByTestId } = render(
 			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardBootstrapWrapper dashboardId="4">
+				<DashboardProvider dashboardId="4">
 					<DashboardDescription
 						handle={{
 							active: false,
@@ -87,7 +73,7 @@ describe('Dashboard landing page actions header tests', () => {
 							node: { current: null },
 						}}
 					/>
-				</DashboardBootstrapWrapper>
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -119,7 +105,7 @@ describe('Dashboard landing page actions header tests', () => {
 		);
 		const { getByTestId } = render(
 			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardBootstrapWrapper dashboardId="4">
+				<DashboardProvider dashboardId="4">
 					<DashboardDescription
 						handle={{
 							active: false,
@@ -128,7 +114,7 @@ describe('Dashboard landing page actions header tests', () => {
 							node: { current: null },
 						}}
 					/>
-				</DashboardBootstrapWrapper>
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -158,7 +144,7 @@ describe('Dashboard landing page actions header tests', () => {
 
 		const { getByText } = render(
 			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardBootstrapWrapper dashboardId="4">
+				<DashboardProvider dashboardId="4">
 					<DashboardDescription
 						handle={{
 							active: false,
@@ -167,7 +153,7 @@ describe('Dashboard landing page actions header tests', () => {
 							node: { current: null },
 						}}
 					/>
-				</DashboardBootstrapWrapper>
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -195,26 +181,37 @@ describe('Dashboard landing page actions header tests', () => {
 
 		(useLocation as jest.Mock).mockReturnValue(mockLocation);
 
-		useDashboardStore.setState({
+		const mockContextValue: IDashboardContext = {
+			isDashboardLocked: false,
+			handleDashboardLockToggle: jest.fn(),
+			dashboardResponse: {} as IDashboardContext['dashboardResponse'],
 			selectedDashboard: (getDashboardById.data as unknown) as Dashboard,
 			layouts: [],
 			panelMap: {},
 			setPanelMap: jest.fn(),
 			setLayouts: jest.fn(),
 			setSelectedDashboard: jest.fn(),
+			updatedTimeRef: { current: null },
+			updateLocalStorageDashboardVariables: jest.fn(),
+			dashboardQueryRangeCalled: false,
+			setDashboardQueryRangeCalled: jest.fn(),
+			isDashboardFetching: false,
 			columnWidths: {},
-		});
+			setColumnWidths: jest.fn(),
+		};
 
 		const { getByText } = render(
 			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardDescription
-					handle={{
-						active: false,
-						enter: (): Promise<void> => Promise.resolve(),
-						exit: (): Promise<void> => Promise.resolve(),
-						node: { current: null },
-					}}
-				/>
+				<DashboardContext.Provider value={mockContextValue}>
+					<DashboardDescription
+						handle={{
+							active: false,
+							enter: (): Promise<void> => Promise.resolve(),
+							exit: (): Promise<void> => Promise.resolve(),
+							node: { current: null },
+						}}
+					/>
+				</DashboardContext.Provider>
 			</MemoryRouter>,
 		);
 

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

@@ -21,7 +21,6 @@ import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteBu
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useGetPublicDashboardMeta } from 'hooks/dashboard/useGetPublicDashboardMeta';
-import { useLockDashboard } from 'hooks/dashboard/useLockDashboard';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -40,11 +39,8 @@ import {
 	X,
 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
-import {
-	selectIsDashboardLocked,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
 import { sortLayout } from 'providers/Dashboard/util';
 import { DashboardData } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
@@ -83,11 +79,10 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		setPanelMap,
 		layouts,
 		setLayouts,
+		isDashboardLocked,
 		setSelectedDashboard,
-	} = useDashboardStore();
-
-	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
-	const handleDashboardLockToggle = useLockDashboard();
+		handleDashboardLockToggle,
+	} = useDashboard();
 
 	const variablesSettingsTabHandle = useRef<VariablesSettingsTab>(null);
 	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] = useState<boolean>(

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -30,7 +30,7 @@ import {
 	Pyramid,
 	X,
 } from 'lucide-react';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { AppState } from 'store/reducers';
 import {
 	IDashboardVariable,
@@ -239,7 +239,7 @@ function VariableItem({
 
 	const [selectedWidgets, setSelectedWidgets] = useState<string[]>([]);
 
-	const { selectedDashboard } = useDashboardStore();
+	const { selectedDashboard } = useDashboard();
 	const widgetsByDynamicVariableId = useWidgetsByDynamicVariableId();
 
 	useEffect(() => {

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/WidgetSelector.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { CustomMultiSelect } from 'components/NewSelect';
 import { PANEL_GROUP_TYPES } from 'constants/queryBuilder';
 import { generateGridTitle } from 'container/GridPanelSwitch/utils';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { WidgetRow, Widgets } from 'types/api/dashboard/getAll';
 
 export function WidgetSelector({
@@ -12,7 +12,7 @@ export function WidgetSelector({
 	selectedWidgets: string[];
 	setSelectedWidgets: (widgets: string[]) => void;
 }): JSX.Element {
-	const { selectedDashboard } = useDashboardStore();
+	const { selectedDashboard } = useDashboard();
 
 	// Get layout IDs for cross-referencing
 	const layoutIds = new Set(

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx

@@ -19,8 +19,8 @@ import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useNotifications } from 'hooks/useNotifications';
 import { PenLine, Trash2 } from 'lucide-react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import { TVariableMode } from './types';
@@ -87,7 +87,7 @@ function VariablesSettings({
 
 	const { t } = useTranslation(['dashboard']);
 
-	const { selectedDashboard, setSelectedDashboard } = useDashboardStore();
+	const { selectedDashboard, setSelectedDashboard } = useDashboard();
 	const { dashboardVariables } = useDashboardVariables();
 
 	const { notifications } = useNotifications();

frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx

@@ -5,7 +5,7 @@ import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddT
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { isEqual } from 'lodash-es';
 import { Check, X } from 'lucide-react';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 
 import { Button } from './styles';
 import { Base64Icons } from './utils';
@@ -15,7 +15,7 @@ import './GeneralSettings.styles.scss';
 const { Option } = Select;
 
 function GeneralDashboardSettings(): JSX.Element {
-	const { selectedDashboard, setSelectedDashboard } = useDashboardStore();
+	const { selectedDashboard, setSelectedDashboard } = useDashboard();
 
 	const updateDashboardMutation = useUpdateDashboard();
 

frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/__tests__/PublicDashboard.test.tsx

@@ -7,14 +7,14 @@ import {
 	unpublishedPublicDashboardMeta,
 } from 'mocks-server/__mockdata__/publicDashboard';
 import { rest, server } from 'mocks-server/server';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import { USER_ROLES } from 'types/roles';
 
 import PublicDashboardSetting from '../index';
 
 // Mock dependencies
-jest.mock('providers/Dashboard/store/useDashboardStore');
+jest.mock('providers/Dashboard/Dashboard');
 jest.mock('react-use', () => ({
 	...jest.requireActual('react-use'),
 	useCopyToClipboard: jest.fn(),
@@ -26,7 +26,7 @@ jest.mock('@signozhq/sonner', () => ({
 	},
 }));
 
-const mockUseDashboard = jest.mocked(useDashboardStore);
+const mockUseDashboard = jest.mocked(useDashboard);
 const mockUseCopyToClipboard = jest.mocked(useCopyToClipboard);
 const mockToast = jest.mocked(toast);
 
@@ -67,10 +67,10 @@ beforeEach(() => {
 	// Mock window.open
 	window.open = jest.fn();
 
-	// Mock useDashboardStore
+	// Mock useDashboard
 	mockUseDashboard.mockReturnValue(({
 		selectedDashboard: mockSelectedDashboard,
-	} as unknown) as ReturnType<typeof useDashboardStore>);
+	} as unknown) as ReturnType<typeof useDashboard>);
 
 	// Mock useCopyToClipboard
 	mockUseCopyToClipboard.mockReturnValue(([

frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx

@@ -11,7 +11,7 @@ import { useGetPublicDashboardMeta } from 'hooks/dashboard/useGetPublicDashboard
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Copy, ExternalLink, Globe, Info, Loader2, Trash } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
 import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
@@ -59,7 +59,7 @@ function PublicDashboardSetting(): JSX.Element {
 	const [defaultTimeRange, setDefaultTimeRange] = useState('30m');
 	const [, setCopyPublicDashboardURL] = useCopyToClipboard();
 
-	const { selectedDashboard } = useDashboardStore();
+	const { selectedDashboard } = useDashboard();
 
 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
 

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

@@ -3,14 +3,13 @@ import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { Row } from 'antd';
 import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
-import { updateLocalStorageDashboardVariable } from 'hooks/dashboard/useDashboardFromLocalStorage';
 import {
 	useDashboardVariables,
 	useDashboardVariablesSelector,
 } from 'hooks/dashboard/useDashboardVariables';
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { updateDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import {
 	enqueueDescendantsOfVariable,
 	enqueueFetchOfAllVariables,
@@ -19,23 +18,23 @@ import {
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { useShallow } from 'zustand/react/shallow';
 
 import VariableItem from './VariableItem';
 
 import './DashboardVariableSelection.styles.scss';
 
 function DashboardVariableSelection(): JSX.Element | null {
-	const { dashboardId, setSelectedDashboard } = useDashboardStore(
-		useShallow((s) => ({
-			dashboardId: s.selectedDashboard?.id ?? '',
-			setSelectedDashboard: s.setSelectedDashboard,
-		})),
-	);
+	const {
+		setSelectedDashboard,
+		updateLocalStorageDashboardVariables,
+	} = useDashboard();
 
 	const { updateUrlVariable } = useVariablesFromUrl();
 
 	const { dashboardVariables } = useDashboardVariables();
+	const dashboardId = useDashboardVariablesSelector(
+		(state) => state.dashboardId,
+	);
 	const sortedVariablesArray = useDashboardVariablesSelector(
 		(state) => state.sortedVariablesArray,
 	);
@@ -83,13 +82,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 			// This makes localStorage much lighter by avoiding storing all individual values
 			const variable = dashboardVariables[id] || dashboardVariables[name];
 			const isDynamic = variable.type === 'DYNAMIC';
-			updateLocalStorageDashboardVariable(
-				dashboardId,
-				name,
-				value,
-				allSelected,
-				isDynamic,
-			);
+			updateLocalStorageDashboardVariables(name, value, allSelected, isDynamic);
 
 			if (allSelected) {
 				updateUrlVariable(name || id, ALL_SELECTED_VALUE);
@@ -157,7 +150,13 @@ function DashboardVariableSelection(): JSX.Element | null {
 			// Safe to call synchronously now that the store already has the updated value.
 			enqueueDescendantsOfVariable(name);
 		},
-		[dashboardId, dashboardVariables, updateUrlVariable, setSelectedDashboard],
+		[
+			dashboardId,
+			dashboardVariables,
+			updateLocalStorageDashboardVariables,
+			updateUrlVariable,
+			setSelectedDashboard,
+		],
 	);
 
 	return (

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

@@ -32,22 +32,11 @@ const mockVariableItemCallbacks: {
 // Mock providers/Dashboard/Dashboard
 const mockSetSelectedDashboard = jest.fn();
 const mockUpdateLocalStorageDashboardVariables = jest.fn();
-interface MockDashboardStoreState {
-	selectedDashboard?: { id: string };
-	setSelectedDashboard: typeof mockSetSelectedDashboard;
-	updateLocalStorageDashboardVariables: typeof mockUpdateLocalStorageDashboardVariables;
-}
-jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
-	useDashboardStore: (
-		selector?: (s: Record<string, unknown>) => MockDashboardStoreState,
-	): MockDashboardStoreState => {
-		const state = {
-			selectedDashboard: { id: 'dash-1' },
-			setSelectedDashboard: mockSetSelectedDashboard,
-			updateLocalStorageDashboardVariables: mockUpdateLocalStorageDashboardVariables,
-		};
-		return selector ? selector(state) : state;
-	},
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): Record<string, unknown> => ({
+		setSelectedDashboard: mockSetSelectedDashboard,
+		updateLocalStorageDashboardVariables: mockUpdateLocalStorageDashboardVariables,
+	}),
 }));
 
 // Mock hooks/dashboard/useVariablesFromUrl

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

@@ -1,13 +1,11 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback } from 'react';
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
-import { updateLocalStorageDashboardVariable } from 'hooks/dashboard/useDashboardFromLocalStorage';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { v4 as uuidv4 } from 'uuid';
-import { useShallow } from 'zustand/react/shallow';
 
 import { convertVariablesToDbFormat } from './util';
 
@@ -39,16 +37,11 @@ interface UseDashboardVariableUpdateReturn {
 
 export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn => {
 	const {
-		dashboardId,
 		selectedDashboard,
 		setSelectedDashboard,
-	} = useDashboardStore(
-		useShallow((s) => ({
-			dashboardId: s.selectedDashboard?.id ?? '',
-			selectedDashboard: s.selectedDashboard,
-			setSelectedDashboard: s.setSelectedDashboard,
-		})),
-	);
+		updateLocalStorageDashboardVariables,
+	} = useDashboard();
+
 	const addDynamicVariableToPanels = useAddDynamicVariableToPanels();
 	const updateMutation = useUpdateDashboard();
 
@@ -66,13 +59,7 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 				// This makes localStorage much lighter and more efficient.
 				// currently all the variables are dynamic
 				const isDynamic = true;
-				updateLocalStorageDashboardVariable(
-					dashboardId,
-					name,
-					value,
-					allSelected,
-					isDynamic,
-				);
+				updateLocalStorageDashboardVariables(name, value, allSelected, isDynamic);
 
 				if (selectedDashboard) {
 					setSelectedDashboard((prev) => {
@@ -110,7 +97,11 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 				}
 			}
 		},
-		[dashboardId, selectedDashboard, setSelectedDashboard],
+		[
+			selectedDashboard,
+			setSelectedDashboard,
+			updateLocalStorageDashboardVariables,
+		],
 	);
 
 	const updateVariables = useCallback(

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

@@ -49,8 +49,8 @@ const mockDashboard = {
 // Mock the dashboard provider with stable functions to prevent infinite loops
 const mockSetSelectedDashboard = jest.fn();
 const mockUpdateLocalStorageDashboardVariables = jest.fn();
-jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
-	useDashboardStore: (): any => ({
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): any => ({
 		selectedDashboard: mockDashboard,
 		setSelectedDashboard: mockSetSelectedDashboard,
 		updateLocalStorageDashboardVariables: mockUpdateLocalStorageDashboardVariables,

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

@@ -56,8 +56,8 @@ const mockDashboard = {
 	},
 };
 // Mock dependencies
-jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
-	useDashboardStore: (): any => ({
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): any => ({
 		selectedDashboard: mockDashboard,
 	}),
 }));
@@ -152,8 +152,8 @@ describe('Panel Management Tests', () => {
 			};
 
 			// Temporarily mock the dashboard
-			jest.doMock('providers/Dashboard/store/useDashboardStore', () => ({
-				useDashboardStore: (): any => ({
+			jest.doMock('providers/Dashboard/Dashboard', () => ({
+				useDashboard: (): any => ({
 					selectedDashboard: modifiedDashboard,
 				}),
 			}));

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

@@ -4,7 +4,7 @@ import ROUTES from 'constants/routes';
 import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { LayoutGrid } from 'lucide-react';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { DashboardData } from 'types/api/dashboard/getAll';
 
 import { Base64Icons } from '../../DashboardSettings/General/utils';
@@ -13,7 +13,7 @@ import './DashboardBreadcrumbs.styles.scss';
 
 function DashboardBreadcrumbs(): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
-	const { selectedDashboard } = useDashboardStore();
+	const { selectedDashboard } = useDashboard();
 	const updatedAtRef = useRef(selectedDashboard?.updatedAt);
 
 	const selectedData = selectedDashboard

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -6,10 +6,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-import {
-	selectIsDashboardLocked,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 
 import { getChartManagerColumns } from './getChartMangerColumns';
 import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
@@ -53,7 +50,7 @@ export default function ChartManager({
 		onToggleSeriesVisibility,
 		syncSeriesVisibilityToLocalStorage,
 	} = usePlotContext();
-	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
+	const { isDashboardLocked } = useDashboard();
 
 	const [tableDataSet, setTableDataSet] = useState<ExtendedChartDataset[]>(() =>
 		getDefaultTableDataSet(

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/ChartManager.test.tsx

@@ -32,18 +32,10 @@ jest.mock('lib/uPlotV2/hooks/useLegendsSync', () => ({
 	}),
 }));
 
-jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
-	useDashboardStore: (
-		selector?: (s: {
-			selectedDashboard: { locked: boolean } | undefined;
-		}) => { selectedDashboard: { locked: boolean } },
-	): { selectedDashboard: { locked: boolean } } => {
-		const mockState = { selectedDashboard: { locked: false } };
-		return selector ? selector(mockState) : mockState;
-	},
-	selectIsDashboardLocked: (s: {
-		selectedDashboard: { locked: boolean } | undefined;
-	}): boolean => s.selectedDashboard?.locked ?? false,
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): { isDashboardLocked: boolean } => ({
+		isDashboardLocked: false,
+	}),
 }));
 
 jest.mock('hooks/useNotifications', () => ({

frontend/src/container/FormAlertRules/utils.ts

@@ -53,24 +53,17 @@ export const getUpdatedStepInterval = (evalWindow?: string): number => {
 };
 
 export const getSelectedQueryOptions = (
-	queries:
-		| Array<
-				| IBuilderQuery
-				| IBuilderTraceOperator
-				| IBuilderFormula
-				| IClickHouseQuery
-				| IPromQLQuery
-		  >
-		| undefined
-		| null,
-): SelectProps['options'] => {
-	if (!queries) {
-		return [];
-	}
-	return queries
+	queries: Array<
+		| IBuilderQuery
+		| IBuilderTraceOperator
+		| IBuilderFormula
+		| IClickHouseQuery
+		| IPromQLQuery
+	>,
+): SelectProps['options'] =>
+	queries
 		.filter((query) => !query.disabled)
 		.map((query) => ({
 			label: 'queryName' in query ? query.queryName : query.name,
 			value: 'queryName' in query ? query.queryName : query.name,
 		}));
-};

frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.tsx

@@ -8,11 +8,8 @@ import { VariablesSettingsTab } from 'container/DashboardContainer/DashboardDesc
 import DashboardSettings from 'container/DashboardContainer/DashboardSettings';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
-import {
-	selectIsDashboardLocked,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 
@@ -23,8 +20,7 @@ export default function DashboardEmptyState(): JSX.Element {
 		(s) => s.setIsPanelTypeSelectionModalOpen,
 	);
 
-	const { selectedDashboard } = useDashboardStore();
-	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
+	const { selectedDashboard, isDashboardLocked } = useDashboard();
 
 	const variablesSettingsTabHandle = useRef<VariablesSettingsTab>(null);
 	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] = useState<boolean>(

frontend/src/container/GridCardLayout/GridCard/FullView/GraphManager.tsx

@@ -3,10 +3,7 @@ import { Button, Input } from 'antd';
 import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';
-import {
-	selectIsDashboardLocked,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 
 import { getGraphManagerTableColumns } from './TableRender/GraphManagerColumns';
 import { ExtendedChartDataset, GraphManagerProps } from './types';
@@ -37,7 +34,7 @@ function GraphManager({
 	}, [data, options]);
 
 	const { notifications } = useNotifications();
-	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
+	const { isDashboardLocked } = useDashboard();
 
 	const checkBoxOnChangeHandler = useCallback(
 		(e: CheckboxChangeEvent, index: number): void => {

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

@@ -39,10 +39,7 @@ import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariab
 import GetMinMax from 'lib/getMinMax';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import {
-	selectIsDashboardLocked,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -84,8 +81,11 @@ function FullView({
 		setCurrentGraphRef(fullViewRef);
 	}, [setCurrentGraphRef]);
 
-	const { selectedDashboard, setColumnWidths } = useDashboardStore();
-	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
+	const {
+		selectedDashboard,
+		isDashboardLocked,
+		setColumnWidths,
+	} = useDashboard();
 
 	const onColumnWidthsChange = useCallback(
 		(widths: Record<string, number>) => {

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -161,8 +161,8 @@ const mockProps: WidgetGraphComponentProps = {
 };
 
 // Mock useDashabord hook
-jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
-	useDashboardStore: (): any => ({
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): any => ({
 		selectedDashboard: {
 			data: {
 				variables: [],

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

@@ -28,7 +28,7 @@ import {
 	getCustomTimeRangeWindowSweepInMS,
 	getStartAndEndTimesInMilliseconds,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
 import { EQueryType } from 'types/common/dashboard';
@@ -106,7 +106,7 @@ function WidgetGraphComponent({
 		selectedDashboard,
 		setSelectedDashboard,
 		setColumnWidths,
-	} = useDashboardStore();
+	} = useDashboard();
 
 	const onColumnWidthsChange = useCallback(
 		(widths: Record<string, number>) => {

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

@@ -1,7 +1,6 @@
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import { DEFAULT_ENTITY_VERSION, ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
@@ -18,6 +17,7 @@ import { getVariableReferencesInQuery } from 'lib/dashboardVariables/variableRef
 import getTimeString from 'lib/getTimeString';
 import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import APIError from 'types/api/error';
@@ -68,19 +68,7 @@ function GridCardGraph({
 	const [isInternalServerError, setIsInternalServerError] = useState<boolean>(
 		false,
 	);
-	const queryRangeCalledRef = useRef(false);
-
-	useEffect(() => {
-		const timeoutId = setTimeout(() => {
-			if (!queryRangeCalledRef.current) {
-				Sentry.captureEvent({
-					message: `Dashboard query range not called within expected timeframe for widget ${widget?.id}`,
-					level: 'warning',
-				});
-			}
-		}, 120000);
-		return (): void => clearTimeout(timeoutId);
-	}, [widget?.id]);
+	const { setDashboardQueryRangeCalled } = useDashboard();
 
 	const {
 		minTime,
@@ -272,14 +260,14 @@ function GridCardGraph({
 						});
 					}
 				}
-				queryRangeCalledRef.current = true;
+				setDashboardQueryRangeCalled(true);
 			},
 			onSettled: (data) => {
 				dataAvailable?.(
 					isDataAvailableByPanelType(data?.payload?.data, widget?.panelTypes),
 				);
 				getGraphData?.(data?.payload?.data);
-				queryRangeCalledRef.current = true;
+				setDashboardQueryRangeCalled(true);
 			},
 		},
 	);

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FullScreen, FullScreenHandle } from 'react-full-screen';
 import { ItemCallback, Layout } from 'react-grid-layout';
-import { useIsFetching } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Form, Input, Modal, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -12,7 +12,6 @@ import cx from 'classnames';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { themeColors } from 'constants/theme';
 import { DEFAULT_ROW_NAME } from 'container/DashboardContainer/DashboardDescription/utils';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
@@ -32,10 +31,7 @@ import {
 	X,
 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import {
-	selectIsDashboardLocked,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { sortLayout } from 'providers/Dashboard/util';
 import { UpdateTimeInterval } from 'store/actions';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -48,7 +44,6 @@ import DashboardEmptyState from './DashboardEmptyState/DashboardEmptyState';
 import GridCard from './GridCard';
 import { Card, CardContainer, ReactGridLayout } from './styles';
 import {
-	applyRowCollapse,
 	hasColumnWidthsChanged,
 	removeUndefinedValuesFromLayout,
 } from './utils';
@@ -66,9 +61,6 @@ interface GraphLayoutProps {
 function GraphLayout(props: GraphLayoutProps): JSX.Element {
 	const { handle, enableDrillDown = false } = props;
 	const { safeNavigate } = useSafeNavigate();
-	const isDashboardFetching =
-		useIsFetching([REACT_QUERY_KEY.DASHBOARD_BY_ID]) > 0;
-
 	const {
 		selectedDashboard,
 		layouts,
@@ -76,9 +68,12 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		panelMap,
 		setPanelMap,
 		setSelectedDashboard,
+		isDashboardLocked,
+		dashboardQueryRangeCalled,
+		setDashboardQueryRangeCalled,
+		isDashboardFetching,
 		columnWidths,
-	} = useDashboardStore();
-	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
+	} = useDashboard();
 	const { data } = selectedDashboard || {};
 	const { pathname } = useLocation();
 	const dispatch = useDispatch();
@@ -142,6 +137,25 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		setDashboardLayout(sortLayout(layouts));
 	}, [layouts]);
 
+	useEffect(() => {
+		setDashboardQueryRangeCalled(false);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	useEffect(() => {
+		const timeoutId = setTimeout(() => {
+			// Send Sentry event if query_range is not called within expected timeframe (2 mins) when there are widgets
+			if (!dashboardQueryRangeCalled && data?.widgets?.length) {
+				Sentry.captureEvent({
+					message: `Dashboard query range not called within expected timeframe even when there are ${data?.widgets?.length} widgets`,
+					level: 'warning',
+				});
+			}
+		}, 120000);
+
+		return (): void => clearTimeout(timeoutId);
+	}, [dashboardQueryRangeCalled, data?.widgets?.length]);
+
 	const logEventCalledRef = useRef(false);
 	useEffect(() => {
 		if (!logEventCalledRef.current && !isUndefined(data)) {
@@ -269,10 +283,13 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 			return;
 		}
 
-		const updatedWidgets = selectedDashboard?.data?.widgets?.map((e) =>
-			e.id === currentSelectRowId ? { ...e, title: newTitle } : e,
+		currentWidget.title = newTitle;
+		const updatedWidgets = selectedDashboard?.data?.widgets?.filter(
+			(e) => e.id !== currentSelectRowId,
 		);
 
+		updatedWidgets?.push(currentWidget);
+
 		const updatedSelectedDashboard: Props = {
 			id: selectedDashboard.id,
 			data: {
@@ -314,13 +331,88 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		if (!selectedDashboard) {
 			return;
 		}
-		const { updatedLayout, updatedPanelMap } = applyRowCollapse(
-			id,
-			dashboardLayout,
-			currentPanelMap,
-		);
-		setCurrentPanelMap((prev) => ({ ...prev, ...updatedPanelMap }));
-		setDashboardLayout(sortLayout(updatedLayout));
+		const rowProperties = { ...currentPanelMap[id] };
+		const updatedPanelMap = { ...currentPanelMap };
+
+		let updatedDashboardLayout = [...dashboardLayout];
+		if (rowProperties.collapsed === true) {
+			rowProperties.collapsed = false;
+			const widgetsInsideTheRow = rowProperties.widgets;
+			let maxY = 0;
+			widgetsInsideTheRow.forEach((w) => {
+				maxY = Math.max(maxY, w.y + w.h);
+			});
+			const currentRowWidget = dashboardLayout.find((w) => w.i === id);
+			if (currentRowWidget && widgetsInsideTheRow.length) {
+				maxY -= currentRowWidget.h + currentRowWidget.y;
+			}
+
+			const idxCurrentRow = dashboardLayout.findIndex((w) => w.i === id);
+
+			for (let j = idxCurrentRow + 1; j < dashboardLayout.length; j++) {
+				updatedDashboardLayout[j].y += maxY;
+				if (updatedPanelMap[updatedDashboardLayout[j].i]) {
+					updatedPanelMap[updatedDashboardLayout[j].i].widgets = updatedPanelMap[
+						updatedDashboardLayout[j].i
+					].widgets.map((w) => ({
+						...w,
+						y: w.y + maxY,
+					}));
+				}
+			}
+			updatedDashboardLayout = [...updatedDashboardLayout, ...widgetsInsideTheRow];
+		} else {
+			rowProperties.collapsed = true;
+			const currentIdx = dashboardLayout.findIndex((w) => w.i === id);
+
+			let widgetsInsideTheRow: Layout[] = [];
+			let isPanelMapUpdated = false;
+			for (let j = currentIdx + 1; j < dashboardLayout.length; j++) {
+				if (currentPanelMap[dashboardLayout[j].i]) {
+					rowProperties.widgets = widgetsInsideTheRow;
+					widgetsInsideTheRow = [];
+					isPanelMapUpdated = true;
+					break;
+				} else {
+					widgetsInsideTheRow.push(dashboardLayout[j]);
+				}
+			}
+			if (!isPanelMapUpdated) {
+				rowProperties.widgets = widgetsInsideTheRow;
+			}
+			let maxY = 0;
+			widgetsInsideTheRow.forEach((w) => {
+				maxY = Math.max(maxY, w.y + w.h);
+			});
+			const currentRowWidget = dashboardLayout[currentIdx];
+			if (currentRowWidget && widgetsInsideTheRow.length) {
+				maxY -= currentRowWidget.h + currentRowWidget.y;
+			}
+			for (let j = currentIdx + 1; j < updatedDashboardLayout.length; j++) {
+				updatedDashboardLayout[j].y += maxY;
+				if (updatedPanelMap[updatedDashboardLayout[j].i]) {
+					updatedPanelMap[updatedDashboardLayout[j].i].widgets = updatedPanelMap[
+						updatedDashboardLayout[j].i
+					].widgets.map((w) => ({
+						...w,
+						y: w.y + maxY,
+					}));
+				}
+			}
+
+			updatedDashboardLayout = updatedDashboardLayout.filter(
+				(widget) => !rowProperties.widgets.some((w: Layout) => w.i === widget.i),
+			);
+		}
+		setCurrentPanelMap((prev) => ({
+			...prev,
+			...updatedPanelMap,
+			[id]: {
+				...rowProperties,
+			},
+		}));
+
+		setDashboardLayout(sortLayout(updatedDashboardLayout));
 	};
 
 	const handleDragStop: ItemCallback = (_, oldItem, newItem): void => {

frontend/src/container/GridCardLayout/WidgetRow.tsx

@@ -4,12 +4,9 @@ import { Button, Popover } from 'antd';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { EllipsisIcon, PenLine, Plus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { setSelectedRowWidgetId } from 'providers/Dashboard/helpers/selectedRowWidgetIdHelper';
-import {
-	selectIsDashboardLocked,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 
@@ -42,8 +39,7 @@ export function WidgetRowHeader(props: WidgetRowHeaderProps): JSX.Element {
 		(s) => s.setIsPanelTypeSelectionModalOpen,
 	);
 
-	const { selectedDashboard } = useDashboardStore();
-	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
+	const { selectedDashboard, isDashboardLocked } = useDashboard();
 
 	const permissions: ComponentTypes[] = ['add_panel'];
 	const { user } = useAppContext();

frontend/src/container/GridCardLayout/__tests__/rowCollapse.test.ts

@@ -1,181 +0,0 @@
-import { Layout } from 'react-grid-layout';
-
-import { applyRowCollapse, PanelMap } from '../utils';
-
-// Helper to produce deeply-frozen objects that mimic what zustand/immer returns.
-function freeze<T>(obj: T): T {
-	return JSON.parse(JSON.stringify(obj), (_, v) =>
-		typeof v === 'object' && v !== null ? Object.freeze(v) : v,
-	) as T;
-}
-
-// ─── fixtures ────────────────────────────────────────────────────────────────
-
-const ROW_ID = 'row1';
-
-/** A layout with one row followed by two widgets. */
-function makeLayout(): Layout[] {
-	return [
-		{ i: ROW_ID, x: 0, y: 0, w: 12, h: 1 },
-		{ i: 'w1', x: 0, y: 1, w: 6, h: 4 },
-		{ i: 'w2', x: 6, y: 1, w: 6, h: 4 },
-	];
-}
-
-/** panelMap where the row is expanded (collapsed = false, widgets = []). */
-function makeExpandedPanelMap(): PanelMap {
-	return {
-		[ROW_ID]: { collapsed: false, widgets: [] },
-	};
-}
-
-/** panelMap where the row is collapsed (widgets stored inside). */
-function makeCollapsedPanelMap(): PanelMap {
-	return {
-		[ROW_ID]: {
-			collapsed: true,
-			widgets: [
-				{ i: 'w1', x: 0, y: 1, w: 6, h: 4 },
-				{ i: 'w2', x: 6, y: 1, w: 6, h: 4 },
-			],
-		},
-	};
-}
-
-// ─── frozen-input guard (regression for zustand/immer read-only bug) ──────────
-
-describe('applyRowCollapse – does not mutate frozen inputs', () => {
-	it('does not throw when collapsing a row with frozen layout + panelMap', () => {
-		expect(() =>
-			applyRowCollapse(
-				ROW_ID,
-				freeze(makeLayout()),
-				freeze(makeExpandedPanelMap()),
-			),
-		).not.toThrow();
-	});
-
-	it('does not throw when expanding a row with frozen layout + panelMap', () => {
-		// Collapsed layout only has the row item; widgets live in panelMap.
-		const collapsedLayout = freeze([{ i: ROW_ID, x: 0, y: 0, w: 12, h: 1 }]);
-		expect(() =>
-			applyRowCollapse(ROW_ID, collapsedLayout, freeze(makeCollapsedPanelMap())),
-		).not.toThrow();
-	});
-
-	it('leaves the original layout array untouched after collapse', () => {
-		const layout = makeLayout();
-		const originalY = layout[1].y; // w1.y before collapse
-		applyRowCollapse(ROW_ID, layout, makeExpandedPanelMap());
-		expect(layout[1].y).toBe(originalY);
-	});
-
-	it('leaves the original panelMap untouched after collapse', () => {
-		const panelMap = makeExpandedPanelMap();
-		applyRowCollapse(ROW_ID, makeLayout(), panelMap);
-		expect(panelMap[ROW_ID].collapsed).toBe(false);
-	});
-});
-
-// ─── collapse behaviour ───────────────────────────────────────────────────────
-
-describe('applyRowCollapse – collapsing a row', () => {
-	it('sets collapsed = true on the row entry', () => {
-		const { updatedPanelMap } = applyRowCollapse(
-			ROW_ID,
-			makeLayout(),
-			makeExpandedPanelMap(),
-		);
-		expect(updatedPanelMap[ROW_ID].collapsed).toBe(true);
-	});
-
-	it('stores the child widgets inside the panelMap entry', () => {
-		const { updatedPanelMap } = applyRowCollapse(
-			ROW_ID,
-			makeLayout(),
-			makeExpandedPanelMap(),
-		);
-		const ids = updatedPanelMap[ROW_ID].widgets.map((w) => w.i);
-		expect(ids).toContain('w1');
-		expect(ids).toContain('w2');
-	});
-
-	it('removes child widgets from the returned layout', () => {
-		const { updatedLayout } = applyRowCollapse(
-			ROW_ID,
-			makeLayout(),
-			makeExpandedPanelMap(),
-		);
-		const ids = updatedLayout.map((l) => l.i);
-		expect(ids).not.toContain('w1');
-		expect(ids).not.toContain('w2');
-		expect(ids).toContain(ROW_ID);
-	});
-});
-
-// ─── expand behaviour ─────────────────────────────────────────────────────────
-
-describe('applyRowCollapse – expanding a row', () => {
-	it('sets collapsed = false on the row entry', () => {
-		const collapsedLayout: Layout[] = [{ i: ROW_ID, x: 0, y: 0, w: 12, h: 1 }];
-		const { updatedPanelMap } = applyRowCollapse(
-			ROW_ID,
-			collapsedLayout,
-			makeCollapsedPanelMap(),
-		);
-		expect(updatedPanelMap[ROW_ID].collapsed).toBe(false);
-	});
-
-	it('restores child widgets to the returned layout', () => {
-		const collapsedLayout: Layout[] = [{ i: ROW_ID, x: 0, y: 0, w: 12, h: 1 }];
-		const { updatedLayout } = applyRowCollapse(
-			ROW_ID,
-			collapsedLayout,
-			makeCollapsedPanelMap(),
-		);
-		const ids = updatedLayout.map((l) => l.i);
-		expect(ids).toContain('w1');
-		expect(ids).toContain('w2');
-	});
-
-	it('restored child widgets appear in both the layout and the panelMap entry', () => {
-		const collapsedLayout: Layout[] = [{ i: ROW_ID, x: 0, y: 0, w: 12, h: 1 }];
-		const { updatedLayout, updatedPanelMap } = applyRowCollapse(
-			ROW_ID,
-			collapsedLayout,
-			makeCollapsedPanelMap(),
-		);
-		// The previously-stored widgets should now be back in the live layout.
-		expect(updatedLayout.map((l) => l.i)).toContain('w1');
-		// The panelMap entry still holds a reference to them (stale until next collapse).
-		expect(updatedPanelMap[ROW_ID].widgets.map((w) => w.i)).toContain('w1');
-	});
-});
-
-// ─── y-offset adjustment ──────────────────────────────────────────────────────
-
-describe('applyRowCollapse – y-offset adjustments for rows below', () => {
-	it('shifts items below a second row down when the first row expands', () => {
-		const ROW2 = 'row2';
-		// Layout: row1 (y=0,h=1) | w1 (y=1,h=4) | row2 (y=5,h=1) | w3 (y=6,h=2)
-		const layout: Layout[] = [
-			{ i: ROW_ID, x: 0, y: 0, w: 12, h: 1 },
-			{ i: 'w1', x: 0, y: 1, w: 12, h: 4 },
-			{ i: ROW2, x: 0, y: 5, w: 12, h: 1 },
-			{ i: 'w3', x: 0, y: 6, w: 12, h: 2 },
-		];
-		const panelMap: PanelMap = {
-			[ROW_ID]: {
-				collapsed: true,
-				widgets: [{ i: 'w1', x: 0, y: 1, w: 12, h: 4 }],
-			},
-			[ROW2]: { collapsed: false, widgets: [] },
-		};
-		// Expanding row1 should push row2 and w3 down by the height of w1 (4).
-		const collapsedLayout = layout.filter((l) => l.i !== 'w1');
-		const { updatedLayout } = applyRowCollapse(ROW_ID, collapsedLayout, panelMap);
-
-		const row2Item = updatedLayout.find((l) => l.i === ROW2);
-		expect(row2Item?.y).toBe(5 + 4); // shifted by maxY = 4
-	});
-});

frontend/src/container/GridCardLayout/useNavigateToExplorerPages.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useNotifications } from 'hooks/useNotifications';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
@@ -121,7 +121,7 @@ function useNavigateToExplorerPages(): (
 ) => Promise<{
 	[queryName: string]: { filters: TagFilterItem[]; dataSource?: string };
 }> {
-	const { selectedDashboard } = useDashboardStore();
+	const { selectedDashboard } = useDashboard();
 	const { notifications } = useNotifications();
 
 	return useCallback(

frontend/src/container/GridCardLayout/utils.ts

@@ -4,122 +4,6 @@ import { isEmpty, isEqual } from 'lodash-es';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 
-export type PanelMap = Record<
-	string,
-	{ widgets: Layout[]; collapsed: boolean }
->;
-
-export interface RowCollapseResult {
-	updatedLayout: Layout[];
-	updatedPanelMap: PanelMap;
-}
-
-/**
- * Pure function that computes the new layout and panelMap after toggling a
- * row's collapsed state. All inputs are treated as immutable — no input object
- * is mutated, so it is safe to pass frozen objects from the zustand store.
- */
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function applyRowCollapse(
-	id: string,
-	dashboardLayout: Layout[],
-	currentPanelMap: PanelMap,
-): RowCollapseResult {
-	// Deep-copy the row's own properties so we can mutate our local copy.
-	const rowProperties = {
-		...currentPanelMap[id],
-		widgets: [...(currentPanelMap[id]?.widgets ?? [])],
-	};
-
-	// Shallow-copy each entry's widgets array so inner .map() calls are safe.
-	const updatedPanelMap: PanelMap = Object.fromEntries(
-		Object.entries(currentPanelMap).map(([k, v]) => [
-			k,
-			{ ...v, widgets: [...v.widgets] },
-		]),
-	);
-
-	let updatedDashboardLayout = [...dashboardLayout];
-
-	if (rowProperties.collapsed === true) {
-		// ── EXPAND ──────────────────────────────────────────────────────────────
-		rowProperties.collapsed = false;
-		const widgetsInsideTheRow = rowProperties.widgets;
-
-		let maxY = 0;
-		widgetsInsideTheRow.forEach((w) => {
-			maxY = Math.max(maxY, w.y + w.h);
-		});
-		const currentRowWidget = dashboardLayout.find((w) => w.i === id);
-		if (currentRowWidget && widgetsInsideTheRow.length) {
-			maxY -= currentRowWidget.h + currentRowWidget.y;
-		}
-
-		const idxCurrentRow = dashboardLayout.findIndex((w) => w.i === id);
-		for (let j = idxCurrentRow + 1; j < dashboardLayout.length; j++) {
-			updatedDashboardLayout[j] = {
-				...updatedDashboardLayout[j],
-				y: updatedDashboardLayout[j].y + maxY,
-			};
-			if (updatedPanelMap[updatedDashboardLayout[j].i]) {
-				updatedPanelMap[updatedDashboardLayout[j].i].widgets = updatedPanelMap[
-					updatedDashboardLayout[j].i
-				].widgets.map((w) => ({ ...w, y: w.y + maxY }));
-			}
-		}
-		updatedDashboardLayout = [...updatedDashboardLayout, ...widgetsInsideTheRow];
-	} else {
-		// ── COLLAPSE ─────────────────────────────────────────────────────────────
-		rowProperties.collapsed = true;
-		const currentIdx = dashboardLayout.findIndex((w) => w.i === id);
-
-		let widgetsInsideTheRow: Layout[] = [];
-		let isPanelMapUpdated = false;
-		for (let j = currentIdx + 1; j < dashboardLayout.length; j++) {
-			if (currentPanelMap[dashboardLayout[j].i]) {
-				rowProperties.widgets = widgetsInsideTheRow;
-				widgetsInsideTheRow = [];
-				isPanelMapUpdated = true;
-				break;
-			} else {
-				widgetsInsideTheRow.push(dashboardLayout[j]);
-			}
-		}
-		if (!isPanelMapUpdated) {
-			rowProperties.widgets = widgetsInsideTheRow;
-		}
-
-		let maxY = 0;
-		widgetsInsideTheRow.forEach((w) => {
-			maxY = Math.max(maxY, w.y + w.h);
-		});
-		const currentRowWidget = dashboardLayout[currentIdx];
-		if (currentRowWidget && widgetsInsideTheRow.length) {
-			maxY -= currentRowWidget.h + currentRowWidget.y;
-		}
-
-		for (let j = currentIdx + 1; j < updatedDashboardLayout.length; j++) {
-			updatedDashboardLayout[j] = {
-				...updatedDashboardLayout[j],
-				y: updatedDashboardLayout[j].y + maxY,
-			};
-			if (updatedPanelMap[updatedDashboardLayout[j].i]) {
-				updatedPanelMap[updatedDashboardLayout[j].i].widgets = updatedPanelMap[
-					updatedDashboardLayout[j].i
-				].widgets.map((w) => ({ ...w, y: w.y + maxY }));
-			}
-		}
-
-		updatedDashboardLayout = updatedDashboardLayout.filter(
-			(widget) => !rowProperties.widgets.some((w: Layout) => w.i === widget.i),
-		);
-	}
-
-	updatedPanelMap[id] = { ...rowProperties };
-
-	return { updatedLayout: updatedDashboardLayout, updatedPanelMap };
-}
-
 export const removeUndefinedValuesFromLayout = (layout: Layout[]): Layout[] =>
 	layout.map((obj) =>
 		Object.fromEntries(

frontend/src/container/InfraMonitoringK8s/Volumes/VolumeDetails/constants.ts

@@ -62,6 +62,9 @@ export const getVolumeQueryPayload = (
 	const k8sPVCNameKey = dotMetricsEnabled
 		? 'k8s.persistentvolumeclaim.name'
 		: 'k8s_persistentvolumeclaim_name';
+	const legendTemplate = dotMetricsEnabled
+		? '{{k8s.namespace.name}}-{{k8s.pod.name}}'
+		: '{{k8s_namespace_name}}-{{k8s_pod_name}}';
 
 	return [
 		{
@@ -133,7 +136,7 @@ export const getVolumeQueryPayload = (
 							functions: [],
 							groupBy: [],
 							having: [],
-							legend: 'Available',
+							legend: legendTemplate,
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
@@ -225,7 +228,7 @@ export const getVolumeQueryPayload = (
 							functions: [],
 							groupBy: [],
 							having: [],
-							legend: 'Capacity',
+							legend: legendTemplate,
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
@@ -316,7 +319,7 @@ export const getVolumeQueryPayload = (
 							},
 							groupBy: [],
 							having: [],
-							legend: 'Inodes Used',
+							legend: legendTemplate,
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
@@ -408,7 +411,7 @@ export const getVolumeQueryPayload = (
 							},
 							groupBy: [],
 							having: [],
-							legend: 'Total Inodes',
+							legend: legendTemplate,
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
@@ -500,7 +503,7 @@ export const getVolumeQueryPayload = (
 							},
 							groupBy: [],
 							having: [],
-							legend: 'Inodes Free',
+							legend: legendTemplate,
 							limit: null,
 							orderBy: [],
 							queryName: 'A',

frontend/src/container/LogExplorerQuerySection/LogExplorerQuerySection.test.tsx

@@ -92,8 +92,8 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
-jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
-	useDashboardStore: (): { selectedDashboard: undefined } => ({
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): { selectedDashboard: undefined } => ({
 		selectedDashboard: undefined,
 	}),
 }));

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,5 +1,5 @@
 import { Switch, Typography } from 'antd';
-import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
+import LogsDownloadOptionsMenu from 'components/LogsDownloadOptionsMenu/LogsDownloadOptionsMenu';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -21,6 +21,8 @@ function LogsActionsContainer({
 	isLoading,
 	isError,
 	isSuccess,
+	minTime,
+	maxTime,
 }: {
 	listQuery: any;
 	selectedPanelType: PANEL_TYPES;
@@ -32,6 +34,8 @@ function LogsActionsContainer({
 	isLoading: boolean;
 	isError: boolean;
 	isSuccess: boolean;
+	minTime: number;
+	maxTime: number;
 }): JSX.Element {
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -92,9 +96,12 @@ function LogsActionsContainer({
 								/>
 							</div>
 							<div className="download-options-container">
-								<DownloadOptionsMenu
-									dataSource={DataSource.LOGS}
-									selectedColumns={options?.selectColumns}
+								<LogsDownloadOptionsMenu
+									startTime={minTime}
+									endTime={maxTime}
+									filter={listQuery?.filter?.expression || ''}
+									columns={config.addColumn?.value || []}
+									orderBy={orderBy}
 								/>
 							</div>
 							<div className="format-options-container">

frontend/src/container/LogsExplorerViews/index.tsx

@@ -444,6 +444,8 @@ function LogsExplorerViewsContainer({
 						isLoading={isLoading}
 						isError={isError}
 						isSuccess={isSuccess}
+						minTime={minTime}
+						maxTime={maxTime}
 					/>
 				)}
 

frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx

@@ -168,7 +168,7 @@ describe('LogsExplorerViews -', () => {
 		lodsQueryServerRequest();
 		const { queryByTestId } = renderer();
 
-		const periscopeDownloadButtonTestId = 'periscope-btn-download-logs';
+		const periscopeDownloadButtonTestId = 'periscope-btn-download-options';
 		const periscopeFormatButtonTestId = 'periscope-btn-format-options';
 
 		// Test that the periscope button is present

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -42,15 +42,8 @@ function LogsPanelComponent({
 		setPageSize(value);
 		setOffset(0);
 		setRequestData((prev) => {
-			const newQueryData = {
-				...prev.query,
-				builder: {
-					...prev.query.builder,
-					queryData: prev.query.builder.queryData.map((qd, i) =>
-						i === 0 ? { ...qd, pageSize: value } : qd,
-					),
-				},
-			};
+			const newQueryData = { ...prev.query };
+			newQueryData.builder.queryData[0].pageSize = value;
 			return {
 				...prev,
 				query: newQueryData,

frontend/src/container/NewWidget/__test__/NewWidget.test.tsx

@@ -6,24 +6,11 @@
 // - Handling multiple rows correctly
 // - Handling widgets with different heights
 
-import { ReactNode } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { screen } from '@testing-library/react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
-
-function DashboardBootstrapWrapper({
-	dashboardId,
-	children,
-}: {
-	dashboardId: string;
-	children: ReactNode;
-}): JSX.Element {
-	useDashboardBootstrap(dashboardId);
-	// eslint-disable-next-line react/jsx-no-useless-fragment
-	return <>{children}</>;
-}
+import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import i18n from 'ReactI18';
 import {
@@ -322,7 +309,7 @@ describe('Stacking bar in new panel', () => {
 
 		const { container, getByText } = render(
 			<I18nextProvider i18n={i18n}>
-				<DashboardBootstrapWrapper dashboardId="">
+				<DashboardProvider dashboardId="">
 					<PreferenceContextProvider>
 						<NewWidget
 							dashboardId=""
@@ -330,7 +317,7 @@ describe('Stacking bar in new panel', () => {
 							selectedGraph={PANEL_TYPES.BAR}
 						/>
 					</PreferenceContextProvider>
-				</DashboardBootstrapWrapper>
+				</DashboardProvider>
 			</I18nextProvider>,
 		);
 
@@ -375,13 +362,13 @@ describe('when switching to BAR panel type', () => {
 		});
 
 		const { getByTestId, getByText, container } = render(
-			<DashboardBootstrapWrapper dashboardId="">
+			<DashboardProvider dashboardId="">
 				<NewWidget
 					dashboardId=""
 					selectedDashboard={undefined}
 					selectedGraph={PANEL_TYPES.BAR}
 				/>
-			</DashboardBootstrapWrapper>,
+			</DashboardProvider>,
 		);
 
 		expect(getByTestId('panel-change-select')).toHaveAttribute(

frontend/src/container/NewWidget/types.ts

@@ -2,15 +2,16 @@ import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { IDashboardContext } from 'providers/Dashboard/types';
 import { SuccessResponse, Warning } from 'types/api';
-import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { timePreferance } from './RightContainer/timeItems';
 
 export interface NewWidgetProps {
 	dashboardId: string;
-	selectedDashboard: Dashboard | undefined;
+	selectedDashboard: IDashboardContext['selectedDashboard'];
 	selectedGraph: PANEL_TYPES;
 	enableDrillDown?: boolean;
 }
@@ -34,7 +35,7 @@ export interface WidgetGraphProps {
 		>
 	>;
 	enableDrillDown?: boolean;
-	selectedDashboard: Dashboard | undefined;
+	selectedDashboard: IDashboardContext['selectedDashboard'];
 	isNewPanel?: boolean;
 }
 

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json

@@ -6122,95 +6122,5 @@
 		],
 		"id": "huggingface-observability",
 		"link": "/docs/huggingface-observability/"
-	},
-	{
-		"dataSource": "mistral-observability",
-		"label": "Mistral AI",
-		"imgUrl": "/Logos/mistral.svg",
-		"tags": [
-			"LLM Monitoring"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"llm",
-			"llm monitoring",
-			"mistral",
-			"mistral ai",
-			"monitoring",
-			"observability",
-			"otel mistral",
-			"traces",
-			"tracing"
-		],
-		"id": "mistral-observability",
-		"link": "/docs/mistral-observability/"
-	},
-	{
-		"dataSource": "openclaw-observability",
-		"label": "OpenClaw",
-		"imgUrl": "/Logos/openclaw.svg",
-		"tags": [
-			"LLM Monitoring"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"llm",
-			"llm monitoring",
-			"monitoring",
-			"observability",
-			"openclaw",
-			"otel openclaw",
-			"traces",
-			"tracing"
-		],
-		"id": "openclaw-observability",
-		"link": "/docs/openclaw-monitoring/"
-	},
-	{
-		"dataSource": "claude-agent-monitoring",
-		"label": "Claude Agent SDK",
-		"imgUrl": "/Logos/claude-code.svg",
-		"tags": [
-			"LLM Monitoring"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"anthropic",
-			"claude",
-			"claude agent",
-			"claude agent sdk",
-			"claude sdk",
-			"llm",
-			"llm monitoring",
-			"monitoring",
-			"observability",
-			"otel claude",
-			"traces",
-			"tracing"
-		],
-		"id": "claude-agent-monitoring",
-		"link": "/docs/claude-agent-monitoring/"
-	},
-	{
-		"dataSource": "render-metrics",
-		"label": "Render",
-		"imgUrl": "/Logos/render.svg",
-		"tags": [
-			"infrastructure monitoring",
-			"metrics"
-		],
-		"module": "metrics",
-		"relatedSearchKeywords": [
-			"infrastructure",
-			"metrics",
-			"monitoring",
-			"observability",
-			"paas",
-			"render",
-			"render metrics",
-			"render monitoring"
-		],
-		"id": "render-metrics",
-		"link": "/docs/metrics-management/render-metrics/"
 	}
 ]

frontend/src/container/PublicDashboardContainer/Panel.tsx

@@ -42,19 +42,11 @@ function Panel({
 			};
 		}
 
+		updatedQuery.builder.queryData[0].pageSize = 10;
 		const initialDataSource = updatedQuery.builder.queryData[0].dataSource;
-		const updatedQueryForList = {
-			...updatedQuery,
-			builder: {
-				...updatedQuery.builder,
-				queryData: updatedQuery.builder.queryData.map((qd, i) =>
-					i === 0 ? { ...qd, pageSize: 10 } : qd,
-				),
-			},
-		};
 
 		return {
-			query: updatedQueryForList,
+			query: updatedQuery,
 			graphType: PANEL_TYPES.LIST,
 			selectedTime: widget.timePreferance || 'GLOBAL_TIME',
 			tableParams: {

frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx

@@ -11,7 +11,7 @@ import useContextVariables from 'hooks/dashboard/useContextVariables';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import createQueryParams from 'lib/createQueryParams';
 import ContextMenu from 'periscope/components/ContextMenu';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
@@ -66,7 +66,7 @@ const useBaseAggregateOptions = ({
 		getUpdatedQuery,
 		isLoading: isResolveQueryLoading,
 	} = useUpdatedQuery();
-	const { selectedDashboard } = useDashboardStore();
+	const { selectedDashboard } = useDashboard();
 
 	useEffect(() => {
 		if (!aggregateData) {

frontend/src/container/QueryTable/__test__/QueryTable.test.tsx

@@ -12,8 +12,8 @@ jest.mock('react-router-dom', () => ({
 }));
 
 // Mock useDashabord hook
-jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
-	useDashboardStore: (): any => ({
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): any => ({
 		selectedDashboard: {
 			data: {
 				variables: [],

frontend/src/container/TracesExplorer/ListView/ListView.styles.scss

@@ -1,7 +1,6 @@
 .trace-explorer-controls {
 	display: flex;
 	justify-content: flex-end;
-	align-items: center;
 	gap: 8px;
 
 	.order-by-container {

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -11,7 +11,6 @@ import {
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import logEvent from 'api/common/logEvent';
-import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import { ResizeTable } from 'components/ResizeTable';
@@ -239,11 +238,6 @@ function ListView({
 					/>
 				</div>
 
-				<DownloadOptionsMenu
-					dataSource={DataSource.TRACES}
-					selectedColumns={options?.selectColumns}
-				/>
-
 				<TraceExplorerControls
 					isLoading={isFetching}
 					totalCount={totalCount}

frontend/src/hooks/dashboard/__test__/useTransformDashboardVariables.test.tsx

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react';
-import { getLocalStorageDashboardVariables } from 'hooks/dashboard/useDashboardFromLocalStorage';
+import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
 import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
@@ -7,8 +7,8 @@ import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
 jest.mock('hooks/dashboard/useDashboardFromLocalStorage');
 jest.mock('hooks/dashboard/useVariablesFromUrl');
 
-const mockGetLocalStorageDashboardVariables = getLocalStorageDashboardVariables as jest.MockedFunction<
-	typeof getLocalStorageDashboardVariables
+const mockUseDashboardVariablesFromLocalStorage = useDashboardVariablesFromLocalStorage as jest.MockedFunction<
+	typeof useDashboardVariablesFromLocalStorage
 >;
 const mockUseVariablesFromUrl = useVariablesFromUrl as jest.MockedFunction<
 	typeof useVariablesFromUrl
@@ -46,7 +46,10 @@ const setupHook = (
 	currentDashboard: Record<string, any> = {},
 	urlVariables: Record<string, any> = {},
 ): ReturnType<typeof useTransformDashboardVariables> => {
-	mockGetLocalStorageDashboardVariables.mockReturnValue(currentDashboard as any);
+	mockUseDashboardVariablesFromLocalStorage.mockReturnValue({
+		currentDashboard,
+		updateLocalStorageDashboardVariables: jest.fn(),
+	});
 	mockUseVariablesFromUrl.mockReturnValue({
 		getUrlVariables: () => urlVariables,
 		setUrlVariables: jest.fn(),

frontend/src/hooks/dashboard/useDashboardBootstrap.ts

@@ -1,164 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
-import { Modal } from 'antd';
-import dayjs from 'dayjs';
-import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
-import useTabVisibility from 'hooks/useTabFocus';
-import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout';
-import { getMinMaxForSelectedTime } from 'lib/getMinMax';
-import { defaultTo } from 'lodash-es';
-import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
-import { sortLayout } from 'providers/Dashboard/util';
-// eslint-disable-next-line no-restricted-imports
-import { Dispatch } from 'redux';
-import { AppState } from 'store/reducers';
-import AppActions from 'types/actions';
-import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { useDashboardQuery } from './useDashboardQuery';
-import { useDashboardVariablesSync } from './useDashboardVariablesSync';
-
-interface UseDashboardBootstrapOptions {
-	/** Pass `onModal.confirm` from `Modal.useModal()` to get theme-aware modals. Falls back to static `Modal.confirm`. */
-	confirm?: typeof Modal.confirm;
-}
-
-export interface UseDashboardBootstrapReturn {
-	isLoading: boolean;
-	isError: boolean;
-	isFetching: boolean;
-	error: unknown;
-}
-
-export function useDashboardBootstrap(
-	dashboardId: string,
-	options: UseDashboardBootstrapOptions = {},
-): UseDashboardBootstrapReturn {
-	const confirm = options.confirm ?? Modal.confirm;
-
-	const { t } = useTranslation(['dashboard']);
-	const dispatch = useDispatch<Dispatch<AppActions>>();
-	const globalTime = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const {
-		setSelectedDashboard,
-		setLayouts,
-		setPanelMap,
-		resetDashboardStore,
-	} = useDashboardStore();
-
-	const dashboardRef = useRef<Dashboard>();
-	const modalRef = useRef<ReturnType<typeof Modal.confirm>>();
-
-	const isVisible = useTabVisibility();
-
-	const {
-		getUrlVariables,
-		updateUrlVariable,
-		transformDashboardVariables,
-	} = useTransformDashboardVariables(dashboardId);
-
-	// Keep the external variables store in sync with selectedDashboard
-	useDashboardVariablesSync(dashboardId);
-
-	const dashboardQuery = useDashboardQuery(dashboardId);
-
-	// Handle new dashboard data: initialize on first load, detect changes on subsequent fetches.
-	// React Query's structural sharing means this effect only fires when data actually changes.
-	useEffect(() => {
-		if (!dashboardQuery.data?.data) {
-			return;
-		}
-
-		const updatedDashboardData = transformDashboardVariables(
-			dashboardQuery.data.data,
-		);
-		const updatedDate = dayjs(updatedDashboardData?.updatedAt);
-
-		// First load: initialize store and URL variables, then return
-		if (!dashboardRef.current) {
-			const variables = updatedDashboardData?.data?.variables;
-			if (variables) {
-				initializeDefaultVariables(variables, getUrlVariables, updateUrlVariable);
-			}
-			setSelectedDashboard(updatedDashboardData);
-			dashboardRef.current = updatedDashboardData;
-			setLayouts(sortLayout(getUpdatedLayout(updatedDashboardData?.data.layout)));
-			setPanelMap(defaultTo(updatedDashboardData?.data?.panelMap, {}));
-			return;
-		}
-
-		// Subsequent fetches: skip if updatedAt hasn't advanced
-		if (!updatedDate.isAfter(dayjs(dashboardRef.current.updatedAt))) {
-			return;
-		}
-
-		// Data has changed: prompt user if tab is visible
-		if (isVisible && dashboardRef.current.id === updatedDashboardData?.id) {
-			const modal = confirm({
-				centered: true,
-				title: t('dashboard_has_been_updated'),
-				content: t('do_you_want_to_refresh_the_dashboard'),
-				onOk() {
-					setSelectedDashboard(updatedDashboardData);
-
-					const { maxTime, minTime } = getMinMaxForSelectedTime(
-						globalTime.selectedTime,
-						globalTime.minTime,
-						globalTime.maxTime,
-					);
-					dispatch({
-						type: UPDATE_TIME_INTERVAL,
-						payload: { maxTime, minTime, selectedTime: globalTime.selectedTime },
-					});
-
-					dashboardRef.current = updatedDashboardData;
-					setLayouts(
-						sortLayout(getUpdatedLayout(updatedDashboardData?.data.layout)),
-					);
-					setPanelMap(defaultTo(updatedDashboardData?.data.panelMap, {}));
-				},
-			});
-			modalRef.current = modal;
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboardQuery.data]);
-
-	// Refetch when tab becomes visible (after initial load)
-	useEffect(() => {
-		if (isVisible && dashboardRef.current && !!dashboardId) {
-			dashboardQuery.refetch();
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isVisible]);
-
-	// Dismiss stale modal when tab is hidden
-	useEffect(() => {
-		if (!isVisible && modalRef.current) {
-			modalRef.current.destroy();
-		}
-	}, [isVisible]);
-
-	// Reset store on unmount so stale state doesn't bleed across dashboards
-	useEffect(
-		() => (): void => {
-			resetDashboardStore();
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
-	);
-
-	return {
-		isLoading: dashboardQuery.isLoading,
-		isError: dashboardQuery.isError,
-		isFetching: dashboardQuery.isFetching,
-		error: dashboardQuery.error,
-	};
-}

frontend/src/hooks/dashboard/useDashboardFromLocalStorage.ts

@@ -1,68 +0,0 @@
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import setLocalStorageKey from 'api/browser/localstorage/set';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-export interface LocalStoreDashboardVariables {
-	[id: string]: {
-		selectedValue: IDashboardVariable['selectedValue'];
-		allSelected: boolean;
-	};
-}
-
-interface DashboardLocalStorageVariables {
-	[id: string]: LocalStoreDashboardVariables;
-}
-
-function readAll(): DashboardLocalStorageVariables {
-	const raw = getLocalStorageKey(LOCALSTORAGE.DASHBOARD_VARIABLES);
-	if (!raw) {
-		return {};
-	}
-	try {
-		return JSON.parse(raw);
-	} catch {
-		console.error('Failed to parse dashboard variables from local storage');
-		return {};
-	}
-}
-
-function writeAll(data: DashboardLocalStorageVariables): void {
-	try {
-		setLocalStorageKey(LOCALSTORAGE.DASHBOARD_VARIABLES, JSON.stringify(data));
-	} catch {
-		console.error('Failed to set dashboard variables in local storage');
-	}
-}
-
-/** Read the saved variable selections for a dashboard from localStorage. */
-export function getLocalStorageDashboardVariables(
-	dashboardId: string,
-): LocalStoreDashboardVariables {
-	return readAll()[dashboardId] ?? {};
-}
-
-/**
- * Write one variable's selection for a dashboard to localStorage.
- * All call sites write to the same store with no React state coordination.
- */
-export function updateLocalStorageDashboardVariable(
-	dashboardId: string,
-	id: string,
-	selectedValue: IDashboardVariable['selectedValue'],
-	allSelected: boolean,
-	isDynamic?: boolean,
-): void {
-	const all = readAll();
-	all[dashboardId] = {
-		...(all[dashboardId] ?? {}),
-		[id]:
-			isDynamic && allSelected
-				? {
-						selectedValue: (undefined as unknown) as IDashboardVariable['selectedValue'],
-						allSelected: true,
-				  }
-				: { selectedValue, allSelected },
-	};
-	writeAll(all);
-}

frontend/src/hooks/dashboard/useDashboardFromLocalStorage.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useState } from 'react';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { defaultTo } from 'lodash-es';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+interface LocalStoreDashboardVariables {
+	[id: string]: {
+		selectedValue: IDashboardVariable['selectedValue'];
+		allSelected: boolean;
+	};
+}
+interface DashboardLocalStorageVariables {
+	[id: string]: LocalStoreDashboardVariables;
+}
+
+export interface UseDashboardVariablesFromLocalStorageReturn {
+	currentDashboard: LocalStoreDashboardVariables;
+	updateLocalStorageDashboardVariables: (
+		id: string,
+		selectedValue: IDashboardVariable['selectedValue'],
+		allSelected: boolean,
+		isDynamic?: boolean,
+	) => void;
+}
+
+export const useDashboardVariablesFromLocalStorage = (
+	dashboardId: string,
+): UseDashboardVariablesFromLocalStorageReturn => {
+	const [
+		allDashboards,
+		setAllDashboards,
+	] = useState<DashboardLocalStorageVariables>({});
+
+	const [
+		currentDashboard,
+		setCurrentDashboard,
+	] = useState<LocalStoreDashboardVariables>({});
+
+	useEffect(() => {
+		const localStoreDashboardVariablesString = getLocalStorageKey(
+			LOCALSTORAGE.DASHBOARD_VARIABLES,
+		);
+		let localStoreDashboardVariables: DashboardLocalStorageVariables = {};
+		if (localStoreDashboardVariablesString === null) {
+			try {
+				const serialzedData = JSON.stringify({
+					[dashboardId]: {},
+				});
+
+				setLocalStorageKey(LOCALSTORAGE.DASHBOARD_VARIABLES, serialzedData);
+			} catch {
+				console.error('Failed to seralise the data');
+			}
+		} else {
+			try {
+				localStoreDashboardVariables = JSON.parse(
+					localStoreDashboardVariablesString,
+				);
+			} catch {
+				console.error('Failed to parse dashboards from local storage');
+				localStoreDashboardVariables = {};
+			} finally {
+				setAllDashboards(localStoreDashboardVariables);
+			}
+		}
+		setCurrentDashboard(defaultTo(localStoreDashboardVariables[dashboardId], {}));
+	}, [dashboardId]);
+
+	useEffect(() => {
+		try {
+			const serializedData = JSON.stringify(allDashboards);
+			setLocalStorageKey(LOCALSTORAGE.DASHBOARD_VARIABLES, serializedData);
+		} catch {
+			console.error('Failed to set dashboards in local storage');
+		}
+	}, [allDashboards]);
+
+	useEffect(() => {
+		setAllDashboards((prev) => ({
+			...prev,
+			[dashboardId]: { ...currentDashboard },
+		}));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentDashboard]);
+
+	const updateLocalStorageDashboardVariables = (
+		id: string,
+		selectedValue: IDashboardVariable['selectedValue'],
+		allSelected: boolean,
+		isDynamic?: boolean,
+	): void => {
+		setCurrentDashboard((prev) => ({
+			...prev,
+			[id]:
+				isDynamic && allSelected
+					? {
+							selectedValue: (undefined as unknown) as IDashboardVariable['selectedValue'],
+							allSelected: true,
+					  }
+					: { selectedValue, allSelected },
+		}));
+	};
+
+	return {
+		currentDashboard,
+		updateLocalStorageDashboardVariables,
+	};
+};

frontend/src/hooks/dashboard/useDashboardQuery.ts

@@ -1,49 +0,0 @@
-import { useQuery, UseQueryResult } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import getDashboard from 'api/v1/dashboards/id/get';
-import {
-	DASHBOARD_CACHE_TIME,
-	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
-} from 'constants/queryCacheTime';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useAppContext } from 'providers/App/App';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import { AppState } from 'store/reducers';
-import { SuccessResponseV2 } from 'types/api';
-import { Dashboard } from 'types/api/dashboard/getAll';
-import APIError from 'types/api/error';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-/**
- * Fetches a dashboard by ID. Handles auth gating, cache time based on
- * auto-refresh setting, and surfaces API errors via the error modal.
- */
-export function useDashboardQuery(
-	dashboardId: string,
-): UseQueryResult<SuccessResponseV2<Dashboard>> {
-	const { isLoggedIn } = useAppContext();
-	const { showErrorModal } = useErrorModal();
-	const globalTime = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	return useQuery(
-		[
-			REACT_QUERY_KEY.DASHBOARD_BY_ID,
-			dashboardId,
-			globalTime.isAutoRefreshDisabled,
-		],
-		{
-			enabled: !!dashboardId && isLoggedIn,
-			queryFn: () => getDashboard({ id: dashboardId }),
-			refetchOnWindowFocus: false,
-			cacheTime: globalTime.isAutoRefreshDisabled
-				? DASHBOARD_CACHE_TIME
-				: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
-			onError: (error) => {
-				showErrorModal(error as APIError);
-			},
-		},
-	);
-}

frontend/src/hooks/dashboard/useDashboardVariablesSync.ts

@@ -1,33 +0,0 @@
-import { useEffect } from 'react';
-import isEqual from 'lodash-es/isEqual';
-import {
-	setDashboardVariablesStore,
-	updateDashboardVariablesStore,
-} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import {
-	DashboardStore,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
-
-import { useDashboardVariablesSelector } from './useDashboardVariables';
-
-/**
- * Keeps the external variables store in sync with the zustand dashboard store.
- * When selectedDashboard changes, propagates variable updates to the variables store.
- */
-export function useDashboardVariablesSync(dashboardId: string): void {
-	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
-	const savedDashboardId = useDashboardVariablesSelector((s) => s.dashboardId);
-	const selectedDashboard = useDashboardStore(
-		(s: DashboardStore) => s.selectedDashboard,
-	);
-
-	useEffect(() => {
-		const updatedVariables = selectedDashboard?.data.variables || {};
-		if (savedDashboardId !== dashboardId) {
-			setDashboardVariablesStore({ dashboardId, variables: updatedVariables });
-		} else if (!isEqual(dashboardVariables, updatedVariables)) {
-			updateDashboardVariablesStore({ dashboardId, variables: updatedVariables });
-		}
-	}, [selectedDashboard]); // eslint-disable-line react-hooks/exhaustive-deps
-}

frontend/src/hooks/dashboard/useLockDashboard.ts

@@ -1,42 +0,0 @@
-import { useMutation } from 'react-query';
-import locked from 'api/v1/dashboards/id/lock';
-import {
-	getSelectedDashboard,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-/**
- * Hook for toggling dashboard locked state.
- * Calls the lock API and syncs the result into the Zustand store.
- */
-export function useLockDashboard(): (value: boolean) => Promise<void> {
-	const { showErrorModal } = useErrorModal();
-	const { setSelectedDashboard } = useDashboardStore();
-
-	const { mutate: lockDashboard } = useMutation(locked, {
-		onSuccess: (_, props) => {
-			setSelectedDashboard((prev) =>
-				prev ? { ...prev, locked: props.lock } : prev,
-			);
-		},
-		onError: (error) => {
-			showErrorModal(error as APIError);
-		},
-	});
-
-	return async (value: boolean): Promise<void> => {
-		const selectedDashboard = getSelectedDashboard();
-		if (selectedDashboard) {
-			try {
-				await lockDashboard({
-					id: selectedDashboard.id,
-					lock: value,
-				});
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		}
-	};
-}

frontend/src/hooks/dashboard/useTransformDashboardVariables.ts

@@ -1,5 +1,8 @@
 import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
-import { getLocalStorageDashboardVariables } from 'hooks/dashboard/useDashboardFromLocalStorage';
+import {
+	useDashboardVariablesFromLocalStorage,
+	UseDashboardVariablesFromLocalStorageReturn,
+} from 'hooks/dashboard/useDashboardFromLocalStorage';
 import useVariablesFromUrl, {
 	UseVariablesFromUrlReturn,
 } from 'hooks/dashboard/useVariablesFromUrl';
@@ -10,10 +13,14 @@ import { v4 as generateUUID } from 'uuid';
 
 export function useTransformDashboardVariables(
 	dashboardId: string,
-): Pick<UseVariablesFromUrlReturn, 'getUrlVariables' | 'updateUrlVariable'> & {
-	transformDashboardVariables: (data: Dashboard) => Dashboard;
-	currentDashboard: ReturnType<typeof getLocalStorageDashboardVariables>;
-} {
+): Pick<UseVariablesFromUrlReturn, 'getUrlVariables' | 'updateUrlVariable'> &
+	UseDashboardVariablesFromLocalStorageReturn & {
+		transformDashboardVariables: (data: Dashboard) => Dashboard;
+	} {
+	const {
+		currentDashboard,
+		updateLocalStorageDashboardVariables,
+	} = useDashboardVariablesFromLocalStorage(dashboardId);
 	const { getUrlVariables, updateUrlVariable } = useVariablesFromUrl();
 
 	const mergeDBWithLocalStorage = (
@@ -73,7 +80,7 @@ export function useTransformDashboardVariables(
 		if (data && data.data && data.data.variables) {
 			const clonedDashboardData = mergeDBWithLocalStorage(
 				JSON.parse(JSON.stringify(data)),
-				getLocalStorageDashboardVariables(dashboardId),
+				currentDashboard,
 			);
 			const { variables } = clonedDashboardData.data;
 			const existingOrders: Set<number> = new Set();
@@ -115,6 +122,7 @@ export function useTransformDashboardVariables(
 		transformDashboardVariables,
 		getUrlVariables,
 		updateUrlVariable,
-		currentDashboard: getLocalStorageDashboardVariables(dashboardId),
+		currentDashboard,
+		updateLocalStorageDashboardVariables,
 	};
 }

frontend/src/hooks/dashboard/useUpdateDashboard.tsx

@@ -1,5 +1,7 @@
 import { useMutation, UseMutationResult } from 'react-query';
 import update from 'api/v1/dashboards/id/update';
+import dayjs from 'dayjs';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { SuccessResponseV2 } from 'types/api';
 import { Dashboard } from 'types/api/dashboard/getAll';
@@ -7,8 +9,14 @@ import { Props } from 'types/api/dashboard/update';
 import APIError from 'types/api/error';
 
 export const useUpdateDashboard = (): UseUpdateDashboard => {
+	const { updatedTimeRef } = useDashboard();
 	const { showErrorModal } = useErrorModal();
 	return useMutation(update, {
+		onSuccess: (data) => {
+			if (data.data) {
+				updatedTimeRef.current = dayjs(data.data.updatedAt);
+			}
+		},
 		onError: (error) => {
 			showErrorModal(error);
 		},

frontend/src/hooks/dashboard/useWidgetsByDynamicVariableId.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { PANEL_GROUP_TYPES } from 'constants/queryBuilder';
 import { createDynamicVariableToWidgetsMap } from 'hooks/dashboard/utils';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { Widgets } from 'types/api/dashboard/getAll';
 
 import { useDashboardVariablesByType } from './useDashboardVariablesByType';
@@ -12,7 +12,7 @@ import { useDashboardVariablesByType } from './useDashboardVariablesByType';
  */
 export function useWidgetsByDynamicVariableId(): Record<string, string[]> {
 	const dynamicVariables = useDashboardVariablesByType('DYNAMIC', 'values');
-	const { selectedDashboard } = useDashboardStore();
+	const { selectedDashboard } = useDashboard();
 
 	return useMemo(() => {
 		const widgets =

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -17,7 +17,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { isEmpty } from 'lodash-es';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -33,7 +33,7 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 
 	const { notifications } = useNotifications();
 
-	const { selectedDashboard } = useDashboardStore();
+	const { selectedDashboard } = useDashboard();
 
 	const { dashboardVariables } = useDashboardVariables();
 	const dashboardDynamicVariables = useDashboardVariablesByType(

frontend/src/hooks/queryBuilder/useGetQueryRange.ts

@@ -52,44 +52,37 @@ export const useGetQueryRange: UseGetQueryRange = (
 			!firstQueryData?.filters?.items.some((filter) => filter.key?.key === 'id') &&
 			firstQueryData?.orderBy[0].columnName === 'timestamp';
 
-		if (
-			isListWithSingleTimestampOrder &&
-			firstQueryData?.dataSource === DataSource.LOGS
-		) {
-			return {
-				...requestData,
-				graphType:
-					requestData.graphType === PANEL_TYPES.BAR
-						? PANEL_TYPES.TIME_SERIES
-						: requestData.graphType,
-				query: {
-					...requestData.query,
-					builder: {
-						...requestData.query.builder,
-						queryData: [
-							{
-								...firstQueryData,
-								orderBy: [
-									...(firstQueryData?.orderBy || []),
-									{
-										columnName: 'id',
-										order: firstQueryData?.orderBy[0]?.order,
-									},
-								],
-							},
-						],
-					},
-				},
-			};
-		}
-
-		return {
+		const modifiedRequestData = {
 			...requestData,
 			graphType:
 				requestData.graphType === PANEL_TYPES.BAR
 					? PANEL_TYPES.TIME_SERIES
 					: requestData.graphType,
 		};
+
+		// If the query is a list with a single timestamp order, we need to add the id column to the order by clause
+		if (
+			isListWithSingleTimestampOrder &&
+			firstQueryData?.dataSource === DataSource.LOGS
+		) {
+			modifiedRequestData.query.builder = {
+				...requestData.query.builder,
+				queryData: [
+					{
+						...firstQueryData,
+						orderBy: [
+							...(firstQueryData?.orderBy || []),
+							{
+								columnName: 'id',
+								order: firstQueryData?.orderBy[0]?.order,
+							},
+						],
+					},
+				],
+			};
+		}
+
+		return modifiedRequestData;
 	}, [requestData]);
 
 	const queryKey = useMemo(() => {

frontend/src/hooks/useDownloadOptionsMenu/useDownloadOptionsMenu.ts

@@ -1,103 +0,0 @@
-import { useCallback, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { message } from 'antd';
-import { downloadExportData } from 'api/v1/download/downloadExportData';
-import { prepareQueryRangePayloadV5, TelemetryFieldKey } from 'api/v5/v5';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { AppState } from 'store/reducers';
-import { DataSource } from 'types/common/queryBuilder';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-interface ExportOptions {
-	format: string;
-	rowLimit: number;
-	clearSelectColumns: boolean;
-	selectedColumns?: TelemetryFieldKey[];
-}
-
-interface UseExportRawDataProps {
-	dataSource: DataSource;
-}
-
-interface UseExportRawDataReturn {
-	isDownloading: boolean;
-	handleExportRawData: (options: ExportOptions) => Promise<void>;
-}
-
-export function useExportRawData({
-	dataSource,
-}: UseExportRawDataProps): UseExportRawDataReturn {
-	const [isDownloading, setIsDownloading] = useState<boolean>(false);
-
-	const { stagedQuery } = useQueryBuilder();
-
-	const { selectedTime: globalSelectedInterval } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
-
-	const handleExportRawData = useCallback(
-		async ({
-			format,
-			rowLimit,
-			clearSelectColumns,
-			selectedColumns,
-		}: ExportOptions): Promise<void> => {
-			if (!stagedQuery) {
-				return;
-			}
-
-			try {
-				setIsDownloading(true);
-
-				const selectColumnsOverride = clearSelectColumns
-					? {}
-					: selectedColumns?.length
-					? { selectColumns: selectedColumns }
-					: {};
-
-				const exportQuery = {
-					...stagedQuery,
-					builder: {
-						...stagedQuery.builder,
-						queryData: stagedQuery.builder.queryData.map((qd) => ({
-							...qd,
-							groupBy: [],
-							having: { expression: '' },
-							limit: rowLimit,
-							...selectColumnsOverride,
-						})),
-						queryTraceOperator: (stagedQuery.builder.queryTraceOperator || []).map(
-							(traceOp) => ({
-								...traceOp,
-								groupBy: [],
-								having: { expression: '' },
-								limit: rowLimit,
-								...selectColumnsOverride,
-							}),
-						),
-					},
-				};
-
-				const { queryPayload } = prepareQueryRangePayloadV5({
-					query: exportQuery,
-					graphType: PANEL_TYPES.LIST,
-					selectedTime: 'GLOBAL_TIME',
-					globalSelectedInterval,
-				});
-
-				await downloadExportData({ format, body: queryPayload });
-				message.success('Export completed successfully');
-			} catch (error) {
-				message.error(`Failed to export ${dataSource}. Please try again.`);
-			} finally {
-				setIsDownloading(false);
-			}
-		},
-		[stagedQuery, globalSelectedInterval, dataSource],
-	);
-
-	return { isDownloading, handleExportRawData };
-}

frontend/src/pages/DashboardPage/DashboardPage.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { Typography } from 'antd';
+import { AxiosError } from 'axios';
+import NotFound from 'components/NotFound';
+import Spinner from 'components/Spinner';
+import DashboardContainer from 'container/DashboardContainer';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { ErrorType } from 'types/common';
+
+function DashboardPage(): JSX.Element {
+	const { dashboardResponse } = useDashboard();
+
+	const { isFetching, isError, isLoading } = dashboardResponse;
+
+	const errorMessage = isError
+		? (dashboardResponse?.error as AxiosError<{ errorType: string }>)?.response
+				?.data?.errorType
+		: 'Something went wrong';
+
+	useEffect(() => {
+		const dashboardTitle = dashboardResponse.data?.data.data.title;
+		document.title = dashboardTitle || document.title;
+	}, [dashboardResponse.data?.data.data.title, isFetching]);
+
+	if (isError && !isFetching && errorMessage === ErrorType.NotFound) {
+		return <NotFound />;
+	}
+
+	if (isError && errorMessage) {
+		return <Typography>{errorMessage}</Typography>;
+	}
+
+	if (isLoading) {
+		return <Spinner tip="Loading.." />;
+	}
+
+	return <DashboardContainer />;
+}
+
+export default DashboardPage;

frontend/src/pages/DashboardPage/index.tsx

@@ -1,56 +1,16 @@
-import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { Modal, Typography } from 'antd';
-import { AxiosError } from 'axios';
-import NotFound from 'components/NotFound';
-import Spinner from 'components/Spinner';
-import DashboardContainer from 'container/DashboardContainer';
-import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
-import { ErrorType } from 'types/common';
+import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 
-function DashboardPage(): JSX.Element {
+import DashboardPage from './DashboardPage';
+
+function DashboardPageWithProvider(): JSX.Element {
 	const { dashboardId } = useParams<{ dashboardId: string }>();
 
-	const [onModal, Content] = Modal.useModal();
-
-	const {
-		isLoading,
-		isError,
-		isFetching,
-		error,
-	} = useDashboardBootstrap(dashboardId, { confirm: onModal.confirm });
-
-	const dashboardTitle = useDashboardStore(
-		(s) => s.selectedDashboard?.data.title,
-	);
-
-	useEffect(() => {
-		document.title = dashboardTitle || document.title;
-	}, [dashboardTitle]);
-
-	const errorMessage = isError
-		? (error as AxiosError<{ errorType: string }>)?.response?.data?.errorType
-		: 'Something went wrong';
-
-	if (isError && !isFetching && errorMessage === ErrorType.NotFound) {
-		return <NotFound />;
-	}
-
-	if (isError && errorMessage) {
-		return <Typography>{errorMessage}</Typography>;
-	}
-
-	if (isLoading) {
-		return <Spinner tip="Loading.." />;
-	}
-
 	return (
-		<>
-			{Content}
-			<DashboardContainer />
-		</>
+		<DashboardProvider dashboardId={dashboardId}>
+			<DashboardPage />
+		</DashboardProvider>
 	);
 }
 
-export default DashboardPage;
+export default DashboardPageWithProvider;

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -0,0 +1,365 @@
+import {
+	// eslint-disable-next-line no-restricted-imports
+	createContext,
+	PropsWithChildren,
+	// eslint-disable-next-line no-restricted-imports
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { Layout } from 'react-grid-layout';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery, UseQueryResult } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { useDispatch, useSelector } from 'react-redux';
+import { Modal } from 'antd';
+import getDashboard from 'api/v1/dashboards/id/get';
+import locked from 'api/v1/dashboards/id/lock';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import dayjs, { Dayjs } from 'dayjs';
+import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
+import useTabVisibility from 'hooks/useTabFocus';
+import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout';
+import { getMinMaxForSelectedTime } from 'lib/getMinMax';
+import { defaultTo } from 'lodash-es';
+import isEqual from 'lodash-es/isEqual';
+import isUndefined from 'lodash-es/isUndefined';
+import omitBy from 'lodash-es/omitBy';
+import { useAppContext } from 'providers/App/App';
+import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+// eslint-disable-next-line no-restricted-imports
+import { Dispatch } from 'redux';
+import { AppState } from 'store/reducers';
+import AppActions from 'types/actions';
+import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
+import { SuccessResponseV2 } from 'types/api';
+import { Dashboard } from 'types/api/dashboard/getAll';
+import APIError from 'types/api/error';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import {
+	DASHBOARD_CACHE_TIME,
+	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+} from '../../constants/queryCacheTime';
+import { useDashboardVariablesSelector } from '../../hooks/dashboard/useDashboardVariables';
+import {
+	setDashboardVariablesStore,
+	updateDashboardVariablesStore,
+} from './store/dashboardVariables/dashboardVariablesStore';
+import { IDashboardContext, WidgetColumnWidths } from './types';
+import { sortLayout } from './util';
+
+export const DashboardContext = createContext<IDashboardContext>({
+	isDashboardLocked: false,
+	handleDashboardLockToggle: () => {},
+	dashboardResponse: {} as UseQueryResult<
+		SuccessResponseV2<Dashboard>,
+		APIError
+	>,
+	selectedDashboard: {} as Dashboard,
+	layouts: [],
+	panelMap: {},
+	setPanelMap: () => {},
+
+	setLayouts: () => {},
+	setSelectedDashboard: () => {},
+	updatedTimeRef: {} as React.MutableRefObject<Dayjs | null>,
+	updateLocalStorageDashboardVariables: () => {},
+	dashboardQueryRangeCalled: false,
+	setDashboardQueryRangeCalled: () => {},
+	isDashboardFetching: false,
+	columnWidths: {},
+	setColumnWidths: () => {},
+});
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function DashboardProvider({
+	children,
+	dashboardId,
+}: PropsWithChildren<{ dashboardId: string }>): JSX.Element {
+	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);
+
+	const [
+		dashboardQueryRangeCalled,
+		setDashboardQueryRangeCalled,
+	] = useState<boolean>(false);
+
+	const { showErrorModal } = useErrorModal();
+
+	const dispatch = useDispatch<Dispatch<AppActions>>();
+
+	const globalTime = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const [onModal, Content] = Modal.useModal();
+
+	const [layouts, setLayouts] = useState<Layout[]>([]);
+
+	const [panelMap, setPanelMap] = useState<
+		Record<string, { widgets: Layout[]; collapsed: boolean }>
+	>({});
+
+	const { isLoggedIn } = useAppContext();
+
+	const [selectedDashboard, setSelectedDashboard] = useState<Dashboard>();
+	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
+	const savedDashboardId = useDashboardVariablesSelector((s) => s.dashboardId);
+
+	useEffect(() => {
+		const existingVariables = dashboardVariables;
+		const updatedVariables = selectedDashboard?.data.variables || {};
+
+		if (savedDashboardId !== dashboardId) {
+			setDashboardVariablesStore({
+				dashboardId,
+				variables: updatedVariables,
+			});
+		} else if (!isEqual(existingVariables, updatedVariables)) {
+			updateDashboardVariablesStore({
+				dashboardId,
+				variables: updatedVariables,
+			});
+		}
+	}, [selectedDashboard]);
+
+	const {
+		currentDashboard,
+		updateLocalStorageDashboardVariables,
+		getUrlVariables,
+		updateUrlVariable,
+		transformDashboardVariables,
+	} = useTransformDashboardVariables(dashboardId);
+
+	const updatedTimeRef = useRef<Dayjs | null>(null); // Using ref to store the updated time
+	const modalRef = useRef<any>(null);
+
+	const isVisible = useTabVisibility();
+
+	const { t } = useTranslation(['dashboard']);
+	const dashboardRef = useRef<Dashboard>();
+
+	const [isDashboardFetching, setIsDashboardFetching] = useState<boolean>(false);
+
+	const dashboardResponse = useQuery(
+		[
+			REACT_QUERY_KEY.DASHBOARD_BY_ID,
+			dashboardId,
+			globalTime.isAutoRefreshDisabled,
+		],
+		{
+			enabled: !!dashboardId && isLoggedIn,
+			queryFn: async () => {
+				setIsDashboardFetching(true);
+				try {
+					return await getDashboard({
+						id: dashboardId,
+					});
+				} catch (error) {
+					showErrorModal(error as APIError);
+					return;
+				} finally {
+					setIsDashboardFetching(false);
+				}
+			},
+			refetchOnWindowFocus: false,
+			cacheTime: globalTime.isAutoRefreshDisabled
+				? DASHBOARD_CACHE_TIME
+				: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+			onError: (error) => {
+				showErrorModal(error as APIError);
+			},
+
+			onSuccess: (data: SuccessResponseV2<Dashboard>) => {
+				const updatedDashboardData = transformDashboardVariables(data?.data);
+
+				// initialize URL variables after dashboard state is set to avoid race conditions
+				const variables = updatedDashboardData?.data?.variables;
+				if (variables) {
+					initializeDefaultVariables(variables, getUrlVariables, updateUrlVariable);
+				}
+
+				const updatedDate = dayjs(updatedDashboardData?.updatedAt);
+
+				setIsDashboardLocked(updatedDashboardData?.locked || false);
+
+				// on first render
+				if (updatedTimeRef.current === null) {
+					setSelectedDashboard(updatedDashboardData);
+
+					updatedTimeRef.current = updatedDate;
+
+					dashboardRef.current = updatedDashboardData;
+
+					setLayouts(
+						sortLayout(getUpdatedLayout(updatedDashboardData?.data.layout)),
+					);
+
+					setPanelMap(defaultTo(updatedDashboardData?.data?.panelMap, {}));
+				}
+
+				if (
+					updatedTimeRef.current !== null &&
+					updatedDate.isAfter(updatedTimeRef.current) &&
+					isVisible &&
+					dashboardRef.current?.id === updatedDashboardData?.id
+				) {
+					// show modal when state is out of sync
+					const modal = onModal.confirm({
+						centered: true,
+						title: t('dashboard_has_been_updated'),
+						content: t('do_you_want_to_refresh_the_dashboard'),
+						onOk() {
+							setSelectedDashboard(updatedDashboardData);
+
+							const { maxTime, minTime } = getMinMaxForSelectedTime(
+								globalTime.selectedTime,
+								globalTime.minTime,
+								globalTime.maxTime,
+							);
+
+							dispatch({
+								type: UPDATE_TIME_INTERVAL,
+								payload: {
+									maxTime,
+									minTime,
+									selectedTime: globalTime.selectedTime,
+								},
+							});
+
+							dashboardRef.current = updatedDashboardData;
+
+							updatedTimeRef.current = dayjs(updatedDashboardData?.updatedAt);
+
+							setLayouts(
+								sortLayout(getUpdatedLayout(updatedDashboardData?.data.layout)),
+							);
+
+							setPanelMap(defaultTo(updatedDashboardData?.data.panelMap, {}));
+						},
+					});
+
+					modalRef.current = modal;
+				} else {
+					// normal flow
+					updatedTimeRef.current = dayjs(updatedDashboardData?.updatedAt);
+
+					dashboardRef.current = updatedDashboardData;
+
+					if (!isEqual(selectedDashboard, updatedDashboardData)) {
+						setSelectedDashboard(updatedDashboardData);
+					}
+
+					if (
+						!isEqual(
+							[omitBy(layouts, (value): boolean => isUndefined(value))[0]],
+							updatedDashboardData?.data.layout,
+						)
+					) {
+						setLayouts(
+							sortLayout(getUpdatedLayout(updatedDashboardData?.data.layout)),
+						);
+
+						setPanelMap(defaultTo(updatedDashboardData?.data.panelMap, {}));
+					}
+				}
+			},
+		},
+	);
+
+	useEffect(() => {
+		// make the call on tab visibility only if the user is on dashboard / widget page
+		if (isVisible && updatedTimeRef.current && !!dashboardId) {
+			dashboardResponse.refetch();
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isVisible]);
+
+	useEffect(() => {
+		if (!isVisible && modalRef.current) {
+			modalRef.current.destroy();
+		}
+	}, [isVisible]);
+
+	const { mutate: lockDashboard } = useMutation(locked, {
+		onSuccess: (_, props) => {
+			setIsDashboardLocked(props.lock);
+		},
+		onError: (error) => {
+			showErrorModal(error as APIError);
+		},
+	});
+
+	const handleDashboardLockToggle = async (value: boolean): Promise<void> => {
+		if (selectedDashboard) {
+			try {
+				await lockDashboard({
+					id: selectedDashboard.id,
+					lock: value,
+				});
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		}
+	};
+
+	const [columnWidths, setColumnWidths] = useState<WidgetColumnWidths>({});
+
+	const value: IDashboardContext = useMemo(
+		() => ({
+			isDashboardLocked,
+			handleDashboardLockToggle,
+			dashboardResponse,
+			selectedDashboard,
+			dashboardId,
+			layouts,
+			panelMap,
+			setLayouts,
+			setPanelMap,
+			setSelectedDashboard,
+			updatedTimeRef,
+			updateLocalStorageDashboardVariables,
+			dashboardQueryRangeCalled,
+			setDashboardQueryRangeCalled,
+			isDashboardFetching,
+			columnWidths,
+			setColumnWidths,
+		}),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[
+			isDashboardLocked,
+			dashboardResponse,
+			selectedDashboard,
+			dashboardId,
+			layouts,
+			panelMap,
+			updateLocalStorageDashboardVariables,
+			currentDashboard,
+			dashboardQueryRangeCalled,
+			setDashboardQueryRangeCalled,
+			isDashboardFetching,
+			columnWidths,
+			setColumnWidths,
+		],
+	);
+
+	return (
+		<DashboardContext.Provider value={value}>
+			{Content}
+			{children}
+		</DashboardContext.Provider>
+	);
+}
+
+export const useDashboard = (): IDashboardContext => {
+	const context = useContext(DashboardContext);
+
+	if (!context) {
+		throw new Error('Should be used inside the context');
+	}
+
+	return context;
+};

frontend/src/providers/Dashboard/__tests__/Dashboard.test.tsx

@@ -1,4 +1,3 @@
-import { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -7,20 +6,7 @@ import { render, RenderResult, screen, waitFor } from '@testing-library/react';
 import getDashboard from 'api/v1/dashboards/id/get';
 import { DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED } from 'constants/queryCacheTime';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
-
-function DashboardBootstrapWrapper({
-	dashboardId,
-	children,
-}: {
-	dashboardId: string;
-	children: ReactNode;
-}): JSX.Element {
-	useDashboardBootstrap(dashboardId);
-	// eslint-disable-next-line react/jsx-no-useless-fragment
-	return <>{children}</>;
-}
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { DashboardProvider, useDashboard } from 'providers/Dashboard/Dashboard';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import { useDashboardVariables } from '../../../hooks/dashboard/useDashboardVariables';
@@ -69,12 +55,17 @@ jest.mock('react-redux', () => ({
 jest.mock('uuid', () => ({ v4: jest.fn(() => 'mock-uuid') }));
 
 function TestComponent(): JSX.Element {
-	const { selectedDashboard } = useDashboardStore();
+	const { dashboardResponse, selectedDashboard } = useDashboard();
 	const { dashboardVariables } = useDashboardVariables();
 
 	return (
 		<div>
 			<div data-testid="dashboard-id">{selectedDashboard?.id}</div>
+			<div data-testid="query-status">{dashboardResponse.status}</div>
+			<div data-testid="is-loading">{dashboardResponse.isLoading.toString()}</div>
+			<div data-testid="is-fetching">
+				{dashboardResponse.isFetching.toString()}
+			</div>
 			<div data-testid="dashboard-variables">
 				{dashboardVariables ? JSON.stringify(dashboardVariables) : 'null'}
 			</div>
@@ -98,7 +89,7 @@ function createTestQueryClient(): QueryClient {
 }
 
 // Helper to render with dashboard provider
-function renderWithDashboardBootstrap(
+function renderWithDashboardProvider(
 	dashboardId = 'test-dashboard-id',
 ): RenderResult {
 	const queryClient = createTestQueryClient();
@@ -107,9 +98,9 @@ function renderWithDashboardBootstrap(
 	return render(
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter initialEntries={[initialRoute]}>
-				<DashboardBootstrapWrapper dashboardId={dashboardId}>
+				<DashboardProvider dashboardId={dashboardId}>
 					<TestComponent />
-				</DashboardBootstrapWrapper>
+				</DashboardProvider>
 			</MemoryRouter>
 		</QueryClientProvider>,
 	);
@@ -181,7 +172,7 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 	describe('Query Key Behavior', () => {
 		it('should include route params in query key when on dashboard page', async () => {
 			const dashboardId = 'test-dashboard-id';
-			renderWithDashboardBootstrap(dashboardId);
+			renderWithDashboardProvider(dashboardId);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: dashboardId });
@@ -196,7 +187,7 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			const newDashboardId = 'new-dashboard-id';
 
 			// First render with initial dashboard ID
-			const { rerender } = renderWithDashboardBootstrap(initialDashboardId);
+			const { rerender } = renderWithDashboardProvider(initialDashboardId);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: initialDashboardId });
@@ -206,9 +197,9 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			rerender(
 				<QueryClientProvider client={createTestQueryClient()}>
 					<MemoryRouter initialEntries={[`/dashboard/${newDashboardId}`]}>
-						<DashboardBootstrapWrapper dashboardId={newDashboardId}>
+						<DashboardProvider dashboardId={newDashboardId}>
 							<TestComponent />
-						</DashboardBootstrapWrapper>
+						</DashboardProvider>
 					</MemoryRouter>
 				</QueryClientProvider>,
 			);
@@ -222,7 +213,7 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 		});
 
 		it('should not fetch when no dashboardId is provided', () => {
-			renderWithDashboardBootstrap('');
+			renderWithDashboardProvider('');
 
 			// Should not call the API
 			expect(mockGetDashboard).not.toHaveBeenCalled();
@@ -238,9 +229,9 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			const { rerender } = render(
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter initialEntries={[`/dashboard/${dashboardId1}`]}>
-						<DashboardBootstrapWrapper dashboardId={dashboardId1}>
+						<DashboardProvider dashboardId={dashboardId1}>
 							<TestComponent />
-						</DashboardBootstrapWrapper>
+						</DashboardProvider>
 					</MemoryRouter>
 				</QueryClientProvider>,
 			);
@@ -252,9 +243,9 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			rerender(
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter initialEntries={[`/dashboard/${dashboardId2}`]}>
-						<DashboardBootstrapWrapper dashboardId={dashboardId2}>
+						<DashboardProvider dashboardId={dashboardId2}>
 							<TestComponent />
-						</DashboardBootstrapWrapper>
+						</DashboardProvider>
 					</MemoryRouter>
 				</QueryClientProvider>,
 			);
@@ -295,9 +286,9 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			render(
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter initialEntries={[`/dashboard/${dashboardId}`]}>
-						<DashboardBootstrapWrapper dashboardId={dashboardId}>
+						<DashboardProvider dashboardId={dashboardId}>
 							<TestComponent />
-						</DashboardBootstrapWrapper>
+						</DashboardProvider>
 					</MemoryRouter>
 				</QueryClientProvider>,
 			);
@@ -374,7 +365,7 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 			// Empty URL variables - tests initialization flow
 			mockGetUrlVariables.mockReturnValue({});
 
-			renderWithDashboardBootstrap(DASHBOARD_ID);
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -430,7 +421,7 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 				.mockReturnValueOnce('development')
 				.mockReturnValueOnce(['db', 'cache']);
 
-			renderWithDashboardBootstrap(DASHBOARD_ID);
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -490,7 +481,7 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 
 			mockGetUrlVariables.mockReturnValue(urlVariables);
 
-			renderWithDashboardBootstrap(DASHBOARD_ID);
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -526,7 +517,7 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 				.mockReturnValueOnce('development')
 				.mockReturnValueOnce(['api']);
 
-			renderWithDashboardBootstrap(DASHBOARD_ID);
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				// Verify normalization was called with the specific values and variable configs
@@ -593,7 +584,7 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardBootstrap(DASHBOARD_ID);
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -635,7 +626,7 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardBootstrap(DASHBOARD_ID);
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -678,7 +669,7 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardBootstrap(DASHBOARD_ID);
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -720,7 +711,7 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardBootstrap(DASHBOARD_ID);
+			renderWithDashboardProvider(DASHBOARD_ID);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });

frontend/src/providers/Dashboard/store/slices/dashboardLayoutSlice.ts

@@ -1,51 +0,0 @@
-import type { Layout } from 'react-grid-layout';
-import type { StateCreator } from 'zustand';
-
-import type { DashboardStore } from '../useDashboardStore';
-
-export interface DashboardLayoutSlice {
-	//
-	layouts: Layout[];
-	setLayouts: (updater: Layout[] | ((prev: Layout[]) => Layout[])) => void;
-	//
-	panelMap: Record<string, { widgets: Layout[]; collapsed: boolean }>;
-	setPanelMap: (
-		updater:
-			| Record<string, { widgets: Layout[]; collapsed: boolean }>
-			| ((
-					prev: Record<string, { widgets: Layout[]; collapsed: boolean }>,
-			  ) => Record<string, { widgets: Layout[]; collapsed: boolean }>),
-	) => void;
-	// resetDashboardLayout: () => void;
-}
-
-export const initialDashboardLayoutState = {
-	layouts: [] as Layout[],
-	panelMap: {} as Record<string, { widgets: Layout[]; collapsed: boolean }>,
-};
-
-export const createDashboardLayoutSlice: StateCreator<
-	DashboardStore,
-	[['zustand/immer', never]],
-	[],
-	DashboardLayoutSlice
-> = (set) => ({
-	...initialDashboardLayoutState,
-
-	setLayouts: (updater): void =>
-		set((state) => {
-			state.layouts =
-				typeof updater === 'function' ? updater(state.layouts) : updater;
-		}),
-
-	setPanelMap: (updater): void =>
-		set((state) => {
-			state.panelMap =
-				typeof updater === 'function' ? updater(state.panelMap) : updater;
-		}),
-
-	// resetDashboardLayout: () =>
-	// 	set((state) => {
-	// 		Object.assign(state, initialDashboardLayoutState);
-	// 	}),
-});

frontend/src/providers/Dashboard/store/slices/dashboardUISlice.ts

@@ -1,57 +0,0 @@
-import type { Dashboard } from 'types/api/dashboard/getAll';
-import type { StateCreator } from 'zustand';
-
-import type { DashboardStore } from '../useDashboardStore';
-
-export type WidgetColumnWidths = {
-	[widgetId: string]: Record<string, number>;
-};
-
-export interface DashboardUISlice {
-	//
-	selectedDashboard: Dashboard | undefined;
-	setSelectedDashboard: (
-		updater:
-			| Dashboard
-			| undefined
-			| ((prev: Dashboard | undefined) => Dashboard | undefined),
-	) => void;
-	//
-	columnWidths: WidgetColumnWidths;
-	setColumnWidths: (
-		updater:
-			| WidgetColumnWidths
-			| ((prev: WidgetColumnWidths) => WidgetColumnWidths),
-	) => void;
-}
-
-export const initialDashboardUIState = {
-	selectedDashboard: undefined as Dashboard | undefined,
-	columnWidths: {} as WidgetColumnWidths,
-};
-
-export const createDashboardUISlice: StateCreator<
-	DashboardStore,
-	[['zustand/immer', never]],
-	[],
-	DashboardUISlice
-> = (set) => ({
-	...initialDashboardUIState,
-
-	setSelectedDashboard: (updater): void =>
-		set((state: DashboardUISlice): void => {
-			state.selectedDashboard =
-				typeof updater === 'function' ? updater(state.selectedDashboard) : updater;
-		}),
-
-	setColumnWidths: (updater): void =>
-		set((state: DashboardUISlice): void => {
-			state.columnWidths =
-				typeof updater === 'function' ? updater(state.columnWidths) : updater;
-		}),
-
-	resetDashboardUI: (): void =>
-		set((state: DashboardUISlice): void => {
-			Object.assign(state, initialDashboardUIState);
-		}),
-});

frontend/src/providers/Dashboard/store/useDashboardStore.ts

@@ -1,50 +0,0 @@
-import type { Layout } from 'react-grid-layout';
-import type { Dashboard } from 'types/api/dashboard/getAll';
-import { create } from 'zustand';
-import { immer } from 'zustand/middleware/immer';
-
-import {
-	createDashboardLayoutSlice,
-	DashboardLayoutSlice,
-	initialDashboardLayoutState,
-} from './slices/dashboardLayoutSlice';
-import {
-	createDashboardUISlice,
-	DashboardUISlice,
-	initialDashboardUIState,
-} from './slices/dashboardUISlice';
-
-export type DashboardStore = DashboardUISlice &
-	DashboardLayoutSlice & {
-		resetDashboardStore: () => void;
-	};
-
-/**
- * 'select*' is a redux naming convention that can be carried over to zustand.
- * It is used to select a piece of state from the store.
- * In this case, we are selecting the locked state of the selected dashboard.
- * */
-export const selectIsDashboardLocked = (s: DashboardStore): boolean =>
-	s.selectedDashboard?.locked ?? false;
-
-export const useDashboardStore = create<DashboardStore>()(
-	immer((set, get, api) => ({
-		...createDashboardUISlice(set, get, api),
-		...createDashboardLayoutSlice(set, get, api),
-
-		resetDashboardStore: (): void =>
-			set((state: DashboardStore) => {
-				Object.assign(state, initialDashboardUIState, initialDashboardLayoutState);
-			}),
-	})),
-);
-
-// Standalone imperative accessors — use these instead of calling useDashboardStore.getState() at call sites.
-export const getSelectedDashboard = (): Dashboard | undefined =>
-	useDashboardStore.getState().selectedDashboard;
-
-export const getDashboardLayouts = (): Layout[] =>
-	useDashboardStore.getState().layouts;
-
-export const resetDashboard = (): void =>
-	useDashboardStore.getState().resetDashboardStore();

frontend/src/providers/Dashboard/types.ts

@@ -0,0 +1,41 @@
+import { Layout } from 'react-grid-layout';
+import { UseQueryResult } from 'react-query';
+import dayjs from 'dayjs';
+import { SuccessResponseV2 } from 'types/api';
+import { Dashboard } from 'types/api/dashboard/getAll';
+
+export type WidgetColumnWidths = {
+	[widgetId: string]: Record<string, number>;
+};
+
+export interface IDashboardContext {
+	isDashboardLocked: boolean;
+	handleDashboardLockToggle: (value: boolean) => void;
+	dashboardResponse: UseQueryResult<SuccessResponseV2<Dashboard>, unknown>;
+	selectedDashboard: Dashboard | undefined;
+	layouts: Layout[];
+	panelMap: Record<string, { widgets: Layout[]; collapsed: boolean }>;
+	setPanelMap: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+	setLayouts: React.Dispatch<React.SetStateAction<Layout[]>>;
+	setSelectedDashboard: React.Dispatch<
+		React.SetStateAction<Dashboard | undefined>
+	>;
+	updatedTimeRef: React.MutableRefObject<dayjs.Dayjs | null>;
+	updateLocalStorageDashboardVariables: (
+		id: string,
+		selectedValue:
+			| string
+			| number
+			| boolean
+			| (string | number | boolean)[]
+			| null
+			| undefined,
+		allSelected: boolean,
+		isDynamic?: boolean,
+	) => void;
+	dashboardQueryRangeCalled: boolean;
+	setDashboardQueryRangeCalled: (value: boolean) => void;
+	isDashboardFetching: boolean;
+	columnWidths: WidgetColumnWidths;
+	setColumnWidths: React.Dispatch<React.SetStateAction<WidgetColumnWidths>>;
+}

frontend/src/providers/QueryBuilder.tsx

@@ -165,23 +165,20 @@ export function QueryBuilderProvider({
 	const prepareQueryBuilderData = useCallback(
 		(query: Query): Query => {
 			const builder: QueryBuilderData = {
-				queryData:
-					query.builder.queryData?.map((item) => ({
-						...initialQueryBuilderFormValuesMap[
-							initialDataSource || DataSource.METRICS
-						],
-						...item,
-					})) ?? [],
-				queryFormulas:
-					query.builder.queryFormulas?.map((item) => ({
-						...initialFormulaBuilderFormValues,
-						...item,
-					})) ?? [],
-				queryTraceOperator:
-					query.builder.queryTraceOperator?.map((item) => ({
-						...initialQueryBuilderFormTraceOperatorValues,
-						...item,
-					})) ?? [],
+				queryData: query.builder.queryData?.map((item) => ({
+					...initialQueryBuilderFormValuesMap[
+						initialDataSource || DataSource.METRICS
+					],
+					...item,
+				})),
+				queryFormulas: query.builder.queryFormulas?.map((item) => ({
+					...initialFormulaBuilderFormValues,
+					...item,
+				})),
+				queryTraceOperator: query.builder.queryTraceOperator?.map((item) => ({
+					...initialQueryBuilderFormTraceOperatorValues,
+					...item,
+				})),
 			};
 
 			const setupedQueryData = builder.queryData.map((item) => {
@@ -214,17 +211,15 @@ export function QueryBuilderProvider({
 				return currentElement;
 			});
 
-			const promql: IPromQLQuery[] =
-				query.promql?.map((item) => ({
-					...initialQueryPromQLData,
-					...item,
-				})) ?? [];
+			const promql: IPromQLQuery[] = query.promql.map((item) => ({
+				...initialQueryPromQLData,
+				...item,
+			}));
 
-			const clickHouse: IClickHouseQuery[] =
-				query.clickhouse_sql?.map((item) => ({
-					...initialClickHouseData,
-					...item,
-				})) ?? [];
+			const clickHouse: IClickHouseQuery[] = query.clickhouse_sql.map((item) => ({
+				...initialClickHouseData,
+				...item,
+			}));
 
 			const newQueryState: QueryState = {
 				clickhouse_sql: clickHouse,