refactor(app): own the provider tree in src/app

#### Description

- Removes the `get_meters_from_zeus` feature flag; `GET /api/v1/billing`
now always fetches usage from Zeus.


#### Additional Information

Part of SigNoz/platform-pod#3091. First of four PRs; the new FGA-gated
zeus subscription endpoints follow in the next one.

.claude/skills/signoz-page-story/SKILL.md

@@ -0,0 +1,95 @@
+---
+name: signoz-page-story
+description: Explore a SigNoz page, map the endpoints, states and query params it has, then write its Storybook page story with control-driven msw mocks that reach every state. Use when asked to create, extend or review a Storybook story for a page under frontend/src/pages, to add controls to an existing page story, or to write defineStoryMocks handlers and mock data for a page.
+---
+
+# SigNoz page stories
+
+A page story renders the real page inside the real app shell against msw, and its
+controls panel can reach every state the page has. The panel is the deliverable,
+not the story list.
+
+`frontend/src/storybook/README.md` is the API surface (providers, parameters,
+control builders, module mocks, navigation). Read it first; this skill is the
+process on top of it.
+
+## Workflow
+
+1. **Map the page**: [references/discovery.md](references/discovery.md). Produce
+   the inventory (endpoints, states, params, permissions, caps) before writing
+   code. No inventory, no story.
+2. **Skeleton first**: story + empty `defineStoryMocks`, then run it. The console
+   names the endpoints step 1 missed.
+3. **Inventory to controls**: [references/controls.md](references/controls.md).
+4. **Mock data and handlers**: builders in `__story_mockdata__`, handlers in the page's
+   mocks module.
+5. **Verify in the browser**: [references/verify.md](references/verify.md). Never
+   report the story as done without it.
+
+## Rules
+
+- **Default is the loaded page.** `export const Default: Story = {}` with no args,
+  every widget carrying data. Empty, loading and failed are variants or control
+  values, never the default.
+- **A control is a knob on a response**, resolved through `handlers`, `config` or
+  `effect`. Never a component prop, never a module mock added for one story.
+- **Every branch in the inventory is reachable from the panel.** A state that
+  needs a code edit to see is a missing control.
+- **Never re-declare what every story already has**: banner, side nav, data state
+  (loaded/loading/error), access preset, permissions, check state.
+- **A variant earns a story only when it is worth linking to**: an empty
+  workspace, a viewer, a page mid-load. Everything else stays a control.
+- **Endpoints the page owns go through `response.json`**, so the Data control
+  covers loaded, loading and failed in one declaration. Endpoints the page cannot
+  render without (ingestion detection, preferences, feature payloads) take a
+  plain resolver so the shell survives the loading and error states.
+- **Query-param state starts from `route`** (`/logs?tab=explorer`). In-page param
+  navigation works inside a story; a different pathname is blocked and reported
+  by the overlay. A control for a param is worth it only when the param is a page
+  mode someone would want to flip.
+- **File layout**: every story file for a page lives under
+  `src/pages/<Page>/stories/`: `<Page>.stories.tsx`, `<Page>.stories.mocks.tsx`,
+  payload builders in `stories/__story_mockdata__/<page>.ts`. Nothing
+  page-specific in `src/storybook/controls/`.
+- **The mocks are AI-owned and say so.** `<Page>.stories.mocks.tsx` and every file
+  under a `__story_mockdata__/` open with this banner, above the imports:
+
+  ```ts
+  /**
+   * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+   * Do not hand-edit: regenerate instead.
+   */
+  ```
+
+  The root `.gitattributes` marks both paths `linguist-generated=true`, so the
+  reviewer gets them collapsed and spends the attention on the rendered page. The
+  story file is the human surface and never carries the banner. A file with the
+  banner has to stay regenerable from the page alone: no page knowledge in
+  `src/storybook/`, and builders typed from `src/api/generated` where the endpoint
+  has types, so a contract change is a compile error instead of a mock that lies.
+- **Reuse fixtures** from `src/mocks-server/` and `src/tests/fixtures/` where they
+  exist. An endpoint jest needs too belongs in `src/mocks-server/handlers.ts`.
+- **Shared response builders live in `src/storybook/msw/__story_mockdata__/`**: typed
+  helpers like `queryRangeV5ScalarResponse` that multiple pages need. Before
+  writing a response shape inline, check if a builder exists; if not and the
+  shape will repeat, add it there. Page-specific builders stay in the page's
+  `__story_mockdata__/`.
+- **No comment is the default.** Write one only for what the code cannot show:
+  a shape the backend dictates, an app bug the mock reproduces, an ordering or
+  cap the page depends on, a workaround and the reason for it. Never restate a
+  name, a type, or what a builder plainly builds; if the sentence reads as the
+  signature in prose, delete it. Nothing addressed to a reviewer. The one
+  comment a story always gets is its own doc comment: what it shows, in the
+  page's own terms.
+
+## Done means
+
+- [ ] `Default` shows the page with data, checked in dark and light
+- [ ] the mocks module and every `__story_mockdata__` file carry the AI-owned banner
+- [ ] every control flipped once, its effect seen on screen
+- [ ] console clean: no `[storybook] no msw handler`, no 501, no msw unhandled
+      request, no React warning
+- [ ] no navigation overlay on mount
+- [ ] `pnpm tsgo --noEmit`, `pnpm exec oxlint <files>`,
+      `pnpm exec oxfmt --check <files>` all clean. The repo has no
+      prettier: `pnpm exec prettier` prints a pass while exiting 254

.claude/skills/signoz-page-story/references/controls.md

@@ -0,0 +1,165 @@
+# Turning the inventory into controls
+
+Every row of the inventory becomes a control, a global control that already
+exists, or a documented reason it cannot be one.
+
+## Imports
+
+Paths written as `src/storybook/...` in prose are repo paths, not import
+specifiers. Stories import through the `@/` alias (`@/*` → `./src/*`); modules
+inside `src/storybook/` import each other relatively.
+
+| Import | From |
+| --- | --- |
+| `toggleControl`, `countControl`, `choiceControl`, `multiChoiceControl` | `../controls/controls` |
+| `defineStoryMocks`, `storyMocks` | `../controls/defineStoryMocks` |
+| `PageStoryArgs` | `../controls/resolveStoryMocks` |
+| `MockRequest`, `MockResponse` | `../controls/types` |
+| the page's mocks, from the story | `./<Page>.stories.mocks` |
+| `queryRangeV5ScalarResponse`, `queryRangeV5RawResponse`, etc. | `@/storybook/msw/__story_mockdata__/queryRange` |
+
+## Which builder
+
+`src/storybook/controls/controls.ts`:
+
+| The state is | Builder |
+| --- | --- |
+| on or off (a signal ingesting, a feature present) | `toggleControl` |
+| how many rows a list has | `countControl` |
+| one of several modes (tab, visibility, plan, severity filter) | `choiceControl` |
+| a subset (steps skipped, columns shown, signals selected) | `multiChoiceControl` |
+
+Rules that come with them:
+
+- `countControl` `max` goes past what the page renders, so a story can show the
+  cap being hit. `0` is the empty state, which is why an empty list rarely needs
+  its own story. When the cap is in the *request* (`?limit=5`) rather than the
+  renderer, stop `max` at the limit: a longer response is a body the backend
+  cannot send.
+- `choiceControl` options come from a `const` array typed with
+  `(typeof X)[number]`, not from string literals scattered in the handlers.
+- Defaults describe the fully-populated page. The panel starts where `Default`
+  starts.
+- `group` is `'<Page> · <facet>'`, such as `'Services · lists'` or
+  `'Alerts · rules'`. Keep a page's knobs in two or three groups, not one per
+  control.
+- `description` only when the name does not carry the effect (what dismissing
+  does, what the cap is, which widget it feeds).
+
+## Which hook
+
+`defineStoryMocks` takes three, all optional:
+
+- `handlers(values, response)`: the page's endpoints. Everything the page owns
+  goes through `response.json`, so the global Data control turns the whole page
+  into loading or failed without a second declaration. An endpoint the page
+  cannot render at all without (ingestion detection, preferences, license
+  payloads) takes a plain `rest.get(...)` resolver instead, so the shell stays
+  visible while the rest hangs or fails.
+- `config(values)`: `SignozStoryConfig` for knobs no endpoint covers: `route`,
+  `appContext`, `reduxState`, `queryBuilder`, `theme`.
+- `effect(values)`: module-level state no provider exposes.
+
+One endpoint feeding several widgets stays one handler that reads the request.
+`response.json` hands the request to the builder and awaits it, so reading a
+query param, or a POST body, does not cost the Data control:
+
+```ts
+rest.get(
+	'http://localhost/api/v1/explorer/views',
+	response.json((req) =>
+		savedViews(values.savedViews, req.url.searchParams.get('sourcePage') ?? 'logs'),
+	),
+),
+```
+
+```ts
+rest.post(
+	'http://localhost/api/v5/query_range',
+	response.json(async (req) => {
+		const body = (await req.json()) as QueryRangeRequestV5;
+		const signal = body.compositeQuery?.queries?.[0]?.spec?.signal;
+
+		return countResponse(values[`${signal}Ingestion`] ? 4213 : 0);
+	}),
+),
+```
+
+Reach for a plain `rest.post(url, async (req, res, ctx) => …)` only when the
+endpoint has to keep answering while the Data control is on `loading` or
+`error`: detection calls the page cannot render without.
+
+## Mutations
+
+A control drives the response, so a write the page makes against state a control
+owns does not stick: the refetch answers with the control's value and the button
+appears to do nothing. Two honest options: leave it declarative and say so in
+the PR, or move the state into `effect` so the handler can read what the page
+wrote. Never fake the write by mutating a builder's module state without saying
+where the state lives.
+
+## Wiring it up
+
+```ts
+// src/pages/Services/stories/Services.stories.mocks.tsx
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+export const servicesMocks = defineStoryMocks({
+	controls: {
+		services: countControl('Services', { group: LISTS, value: 8, max: 12 }),
+		apdex: choiceControl<ApdexState>('Apdex', {
+			group: HEALTH,
+			options: APDEX_STATES,
+			value: 'mixed',
+		}),
+	},
+	handlers: (values, response) => [
+		rest.post(
+			'http://localhost/api/v2/services',
+			response.json(() => buildServices(values.services, values.apdex)),
+		),
+	],
+});
+```
+
+```tsx
+// src/pages/Services/stories/Services.stories.tsx
+type ServicesArgs = PageStoryArgs<typeof servicesMocks>;
+
+const meta = {
+	title: 'Pages/Services',
+	component: Services,
+	...storyMocks(servicesMocks, { route: ROUTES.APPLICATION, layout: 'app' }),
+} satisfies Meta<ServicesArgs>;
+```
+
+`PageStoryArgs` folds in the global controls, so a story's `args` can set
+`access`, `dataState` or `banner` next to the page's own knobs and stay typed.
+
+## Not a control
+
+- Anything the global controls already cover: banner, side nav, data state,
+  access preset, permissions, check state.
+- A knob whose effect nobody can see on the page. Delete it or find the widget it
+  was supposed to drive.
+- A raw payload as an object control. Controls carry intent (`5 dashboards`,
+  `viewer`), and the builder turns intent into the payload.
+- Anything that needs a module mock or a component prop to work. If the state
+  cannot be produced from a response, config or module state, say so in the PR
+  instead of faking it.
+
+## Control or story
+
+Default to a control. Write a story when the state is worth a link:
+
+- the fresh workspace, because that is what a new user sees
+- the restricted user, when permissions visibly change the page
+- a page-defining mode (a tab, a category) that has its own layout
+
+Combinations of controls do not need stories, which is what the panel is for.
+
+Each story gets one prose doc comment: what it shows, in the page's own terms.
+Everywhere else the comment rule in SKILL.md applies: write one only for what
+the code cannot show.

.claude/skills/signoz-page-story/references/discovery.md

@@ -0,0 +1,64 @@
+# Mapping a page
+
+Two passes: read the code, then let the running story correct you. Write the
+inventory down: it is what the controls are derived from, and the only
+protection against a story that renders one state and calls it a page.
+
+## Pass 1: read the page
+
+Start at `src/pages/<Page>/` and follow it outward: the containers it mounts
+(`src/container/<Feature>/`), the hooks those use, the components with their own
+fetches. Stop at leaf components that take props only.
+
+Grep recipes, run against the page's directories:
+
+| Looking for | Grep |
+| --- | --- |
+| endpoints | `useQuery\|useMutation\|useInfiniteQuery`, then the `api/` module it calls |
+| endpoint URLs | the api module's `axios.get\|post` |
+| endpoint URLs behind a generated hook | the hook lives in `src/api/generated/services/<name>/index.ts` and the URL only appears in the fetcher body: `rg 'url: \`' src/api/generated/services/<name>/` |
+| url state | `useUrlQuery\|useUrlQueryData\|useUrlSearchState\|useQueryState\|QueryParams\.` |
+| navigation | `useSafeNavigate\|history.push\|<Link` |
+| permissions | `useAuthZ\|AuthZGuard\|AuthZButton\|hasEditPermission\|routePermission` |
+| flags and prefs | `useFeatureFlag\|FeatureKeys\.\|USER_PREFERENCES\.\|userPreferences` |
+| empty and error branches | `isLoading\|isError\|isFetching\|length === 0\|!data` |
+| render caps | `slice(0,\|PAGE_SIZE\|pageSize\|limit` |
+
+`src/constants/routes.ts` has the route, `src/constants/query.ts` the param names,
+`src/lib/authz/README.md` how a permission check resolves.
+
+## The inventory
+
+One table, in the story's PR or scratch notes:
+
+| Endpoint | Feeds | States it can be in |
+| --- | --- | --- |
+| `GET /api/v1/x` | the header count | populated, zero, error |
+
+Plus four short lists:
+
+- **Query params** the page reads, and what each one switches.
+- **Permission checks** the page makes, and what disappears when each is denied.
+- **Preferences and flags** that change layout (dismissed banners, onboarding
+  checklists, opt-in views).
+- **Caps**: how many rows each list renders before it truncates or paginates.
+
+A state that appears in this inventory and not in the controls panel is a bug in
+the story.
+
+## Pass 2: let it run
+
+Write the story and an empty `defineStoryMocks({ controls: {} })`, point it at the
+route with `layout: 'app'`, then open it (see verify.md). The console is the
+oracle:
+
+- `[storybook] no msw handler` or a 501 from the catch-all: an endpoint pass 1
+  missed. Add it to the inventory.
+- an msw unhandled-request warning: a request going to an origin the handlers do
+  not answer on. handlers are declared against `http://localhost`.
+- a spinner that never resolves with the Data control on `loaded`: a handler
+  whose URL does not match what the page calls.
+- the navigation overlay on mount: the page redirects, usually because `route`
+  is wrong or a guard is failing on a permission the controls have not granted.
+
+Repeat until the console is silent. Only then start declaring controls.

.claude/skills/signoz-page-story/references/verify.md

@@ -0,0 +1,110 @@
+# Verifying a page story
+
+A story is not done because it compiles. It is done when each control has been
+seen changing the page and the console is silent.
+
+## Run it
+
+```bash
+cd frontend && pnpm storybook --ci --quiet   # :6006, background it
+```
+
+A newly added `.stories.tsx` takes a few seconds to appear in `index.json` on an
+already-running server; an empty first poll is not a broken `stories` glob.
+
+Story ids come from the meta title: `Pages/Services` → `pages-services`, plus the
+story export in kebab-case. Render one story on its own:
+
+```
+http://localhost:6006/iframe.html?id=pages-services--default&viewMode=story
+```
+
+## Flip controls from the URL
+
+Args are settable in the iframe URL, so a whole sweep runs headless without
+touching the panel. Booleans go as `!true` / `!false`, numbers bare, arrays
+indexed, several separated by `;`, and the theme through `globals`:
+
+```
+&args=services:0;apdex:poor;access:viewer;dataState:loading
+&args=signals[0]:logs;signals[1]:traces
+&globals=theme:light
+```
+
+That is the cheap way to check a control does something: load with and without
+it, diff the page text.
+
+## Drive it
+
+Playwright lives in the repo's e2e workspace, so a scratch script can use it
+directly:
+
+```js
+import pw from '<repo>/tests/e2e/node_modules/playwright/index.js';
+const { chromium } = pw;
+
+const browser = await chromium.launch();
+const page = await browser.newPage();
+const problems = [];
+page.on('console', (m) => {
+	if (m.type() === 'error' || m.type() === 'warning') problems.push(m.text());
+});
+page.on('pageerror', (e) => problems.push(e.message));
+
+await page.goto(`${story}&args=services:0`, { waitUntil: 'networkidle' });
+await page.locator('body').waitFor();
+console.log((await page.locator('body').innerText()).slice(0, 1500), problems);
+await browser.close();
+```
+
+Screenshots are worth taking for `Default` in both themes
+(`&globals=theme:light`): text extraction does not catch an unstyled page.
+
+## Gates
+
+- **Console silent.** `[storybook] no msw handler`, a 501 from the catch-all, an
+  msw unhandled-request warning, a React key or state warning: assume the story
+  is wrong first. A warning that survives is sometimes the app's. Prove it by
+  turning off the control that renders the widget and watching the warning go
+  with it, and by finding the same component elsewhere doing it right. Then
+  report the app bug in the PR. Never invent a field the API does not return to
+  silence a warning.
+- **No navigation overlay on mount.** "Navigation blocked in Storybook" on load
+  means the page is trying to leave: wrong `route`, or a guard denying on a
+  permission the controls did not grant.
+- **Every control moves something.** Sweep them one at a time from the URL and
+  diff the page text. A control with no diff is either wired to nothing or aimed
+  at a widget that is not rendering. Some only show their effect after an
+  interaction, such as a tab that has to be clicked or a select that has to be
+  opened. Drive that interaction rather than calling the control unobservable.
+- **Both themes render styled.** An unstyled page means the story is not inside
+  the provider decorator, or `<body data-theme>` was lost.
+- **Roles agree.** `<body data-signoz-story-role>` and
+  `<body data-signoz-context-role>` disagreeing means the page reads a different
+  `AppContext` than the story config fills.
+- **The page's own navigation works.** Tabs, filters and pagination that write
+  query params should re-render the page in place; only leaving the page belongs
+  in the overlay.
+
+## Then the usual
+
+```bash
+pnpm tsgo --noEmit
+pnpm exec oxlint <changed files>
+pnpm exec oxfmt --check <changed files>
+```
+
+There is no prettier in this repo. `pnpm exec prettier --check` fetches something
+else, prints `Prettier: All files formatted correctly` and exits 254: a pass that is
+not one.
+
+## Common failures
+
+| Symptom | Cause |
+| --- | --- |
+| endless spinner with Data on `loaded` | handler URL does not match the call; handlers answer on `http://localhost` |
+| page renders but empty | response shape wrong; compare against the api module's type, not a guess |
+| 501 in the console | endpoint nobody mocked; the catch-all is answering |
+| new control missing from the panel | project-level control added; the tab needs a reload |
+| control flips but nothing changes | the widget is gated by something else: a permission, a flag, a preference |
+| shell disappears in `loading` | an endpoint the shell needs went through `response.json`; give it a plain resolver |

.gitattributes

@@ -1 +1,3 @@
-*.css linguist-detectable=false
+*.css linguist-detectable=false
+*.stories.mocks.tsx linguist-generated=true
+**/__story_mockdata__/** linguist-generated=true

.github/workflows/build-enterprise.yaml

@@ -103,7 +103,6 @@ jobs:
         -X github.com/SigNoz/signoz/pkg/version.branch=${{ needs.prepare.outputs.branch }}
         -X github.com/SigNoz/signoz/ee/zeus.url=https://api.signoz.cloud
         -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.signoz.io
-        -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.signoz.io/api/v1
         -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'
       DOCKER_DOCKERFILE_PATH: ./cmd/enterprise/Dockerfile.multi-arch

.github/workflows/build-staging.yaml

@@ -109,7 +109,6 @@ jobs:
         -X github.com/SigNoz/signoz/pkg/version.branch=${{ needs.prepare.outputs.branch }}
         -X github.com/SigNoz/signoz/ee/zeus.url=https://api.staging.signoz.cloud
         -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.staging.signoz.cloud
-        -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.staging.signoz.cloud/api/v1
         -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'
       DOCKER_DOCKERFILE_PATH: ./cmd/enterprise/Dockerfile.multi-arch

.github/workflows/integrationci.yaml

@@ -50,6 +50,7 @@ jobs:
           - logspipelines
           - passwordauthn
           - preference
+          - quickfilter
           - querierlogs
           - queriertraces
           - queriermetrics
@@ -58,6 +59,7 @@ jobs:
           - querierai
           - rawexportdata
           - promqlconformance
+          - promapiconformance
           - querierauthz
           - role
           - rootuser

cmd/authz.go

@@ -96,6 +96,7 @@ func runGenerateAuthz(_ context.Context) error {
 		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                true,
 		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():           true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,

cmd/community/server.go

@@ -46,6 +46,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
@@ -103,8 +104,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing, tagModule tag.Module) dashboard.Module {
-			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, tagModule)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
+			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, tagModule, systemDashboardRegistry)
 		},
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()

cmd/enterprise/.goreleaser.yaml

@@ -31,7 +31,6 @@ builds:
       - -X github.com/SigNoz/signoz/pkg/version.branch={{ .Branch }}
       - -X github.com/SigNoz/signoz/ee/zeus.url=https://api.signoz.cloud
       - -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.signoz.io
-      - -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.signoz.io/api/v1
       - -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr
     mod_timestamp: "{{ .CommitTimestamp }}"
     tags:

cmd/enterprise/server.go

@@ -63,6 +63,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
@@ -136,8 +137,8 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 			}
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, authtypes.NewRegistry()), nil
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
-			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing, tagModule)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
+			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing, tagModule, systemDashboardRegistry)
 		},
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)

docs/contributing/prometheus.md

@@ -299,8 +299,11 @@ substituted. One subtlety makes it exact: we write stale markers at absent
 grid points. Without them, the engine's lookback would resurrect a point
 from up to `lookback` earlier. The marker encodes "absent here" the way the
 engine itself encodes it. Units evaluate concurrently. Each unit is one
-series lookup plus one grid statement. A step of 0 is an instant query: a
-single evaluation at `end`.
+grid statement: the group-key join resolves the matchers, and the samples
+primary key takes the metric name straight from the selector. Only a
+selector without a static `__name__` runs the series lookup first, to learn
+the concrete metric names. A step of 0 is an instant query: a single
+evaluation at `end`.
 
 A note on the window sliver: when the window is narrower than the step, the
 grid windows cover only `window/step` of the timeline. A sample in a gap
@@ -315,8 +318,9 @@ selectors and `last_over_time` transpile at window < step too.
 
 ## Series lookup
 
-Both paths resolve matchers the same way, once per selector
-(`selectSeries`). The series tables hold one row per (fingerprint, bucket)
+The engine path resolves matchers once per selector (`selectSeries`); the
+transpiled path builds the same conditions into its group-key join. Both
+read the same tables. The series tables hold one row per (fingerprint, bucket)
 at 1h/6h/1d/1w granularities. The shared schema package
 (`pkg/telemetryschema/metricstelemetryschema`) picks the table whose bucket
 fits the window. It rounds the window start down to the bucket boundary, so

ee/gateway/httpgateway/provider.go

@@ -108,6 +108,20 @@ func (provider *Provider) SearchIngestionKeysByName(ctx context.Context, orgID v
 	}, nil
 }
 
+func (provider *Provider) GetIngestionKey(ctx context.Context, orgID valuer.UUID, keyID string) (*gatewaytypes.IngestionKey, error) {
+	responseBody, err := provider.do(ctx, orgID, http.MethodGet, "/v1/workspaces/me/keys/"+keyID, nil, nil)
+	if err != nil {
+		return nil, err
+	}
+
+	var ingestionKey gatewaytypes.IngestionKey
+	if err := json.Unmarshal([]byte(gjson.GetBytes(responseBody, "data").String()), &ingestionKey); err != nil {
+		return nil, err
+	}
+
+	return &ingestionKey, nil
+}
+
 func (provider *Provider) CreateIngestionKey(ctx context.Context, orgID valuer.UUID, name string, tags []string, expiresAt time.Time) (*gatewaytypes.GettableCreatedIngestionKey, error) {
 	requestBody := gatewaytypes.PostableIngestionKey{
 		Name:      name,
@@ -161,7 +175,7 @@ func (provider *Provider) DeleteIngestionKey(ctx context.Context, orgID valuer.U
 }
 
 func (provider *Provider) CreateIngestionKeyLimit(ctx context.Context, orgID valuer.UUID, keyID string, signal string, limitConfig gatewaytypes.LimitConfig, tags []string) (*gatewaytypes.GettableCreatedIngestionKeyLimit, error) {
-	requestBody := gatewaytypes.PostableIngestionKeyLimit{
+	requestBody := gatewaytypes.DeprecatedPostableIngestionKeyLimit{
 		Signal: signal,
 		Config: limitConfig,
 		Tags:   tags,
@@ -184,6 +198,34 @@ func (provider *Provider) CreateIngestionKeyLimit(ctx context.Context, orgID val
 	return &createdIngestionKeyLimitResponse, nil
 }
 
+func (provider *Provider) GetIngestionKeyLimit(ctx context.Context, orgID valuer.UUID, limitID string) (*gatewaytypes.Limit, error) {
+	responseBody, err := provider.do(ctx, orgID, http.MethodGet, "/v1/workspaces/me/limits/"+limitID, nil, nil)
+	if err != nil {
+		return nil, err
+	}
+
+	var limit gatewaytypes.Limit
+	if err := json.Unmarshal([]byte(gjson.GetBytes(responseBody, "data").String()), &limit); err != nil {
+		return nil, err
+	}
+
+	return &limit, nil
+}
+
+func (provider *Provider) GetIngestionKeyLimits(ctx context.Context, orgID valuer.UUID, keyID string) ([]gatewaytypes.Limit, error) {
+	responseBody, err := provider.do(ctx, orgID, http.MethodGet, "/v1/workspaces/me/keys/"+keyID+"/limits", nil, nil)
+	if err != nil {
+		return nil, err
+	}
+
+	var limits []gatewaytypes.Limit
+	if err := json.Unmarshal([]byte(gjson.GetBytes(responseBody, "data").String()), &limits); err != nil {
+		return nil, err
+	}
+
+	return limits, nil
+}
+
 func (provider *Provider) UpdateIngestionKeyLimit(ctx context.Context, orgID valuer.UUID, limitID string, limitConfig gatewaytypes.LimitConfig, tags []string) error {
 	requestBody := gatewaytypes.UpdatableIngestionKeyLimit{
 		Config: limitConfig,

ee/licensing/httplicensing/api.go

@@ -22,89 +22,6 @@ func NewLicensingAPI(licensing licensing.Licensing) licensing.API {
 	return &licensingAPI{licensing: licensing}
 }
 
-func (api *licensingAPI) Activate(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
-		return
-	}
-
-	req := new(licensetypes.PostableLicense)
-	err = json.NewDecoder(r.Body).Decode(&req)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	err = api.licensing.Activate(r.Context(), orgID, req.Key)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusAccepted, nil)
-}
-
-func (api *licensingAPI) GetActive(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
-		return
-	}
-
-	license, err := api.licensing.GetActive(r.Context(), orgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	gettableLicense := licensetypes.NewGettableLicense(license.Data, license.Key)
-	render.Success(rw, http.StatusOK, gettableLicense)
-}
-
-func (api *licensingAPI) Refresh(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
-		return
-	}
-
-	err = api.licensing.Refresh(r.Context(), orgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusNoContent, nil)
-}
-
 func (api *licensingAPI) Checkout(rw http.ResponseWriter, r *http.Request) {
 	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
 	defer cancel()

ee/licensing/httplicensing/provider.go

@@ -95,24 +95,65 @@ func (provider *provider) Validate(ctx context.Context) error {
 	return nil
 }
 
-func (provider *provider) Activate(ctx context.Context, organizationID valuer.UUID, key string) error {
-	data, err := provider.zeus.GetLicense(ctx, key)
+func (provider *provider) Activate(ctx context.Context, organizationID valuer.UUID, key string) (*licensetypes.License, error) {
+	zeusLicense, err := provider.zeus.GetLicense(ctx, key)
 	if err != nil {
-		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "unable to fetch license data with upstream server")
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "unable to fetch license data with upstream server")
 	}
 
-	license, err := licensetypes.NewLicense(data, organizationID)
+	license, err := licensetypes.NewLicense(zeusLicense, organizationID)
 	if err != nil {
-		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to create license entity")
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to create license entity")
 	}
 
 	storableLicense := licensetypes.NewStorableLicenseFromLicense(license)
 	err = provider.store.Create(ctx, storableLicense)
+	if err != nil {
+		return nil, err
+	}
+
+	return license, nil
+}
+
+func (provider *provider) Get(ctx context.Context, organizationID valuer.UUID, licenseID valuer.UUID) (*licensetypes.License, error) {
+	storableLicense, err := provider.store.Get(ctx, organizationID, licenseID)
+	if err != nil {
+		return nil, err
+	}
+
+	return licensetypes.NewLicenseFromStorableLicense(storableLicense)
+}
+
+func (provider *provider) List(ctx context.Context, organizationID valuer.UUID) ([]*licensetypes.License, error) {
+	storableLicenses, err := provider.store.GetAll(ctx, organizationID)
+	if err != nil {
+		return nil, err
+	}
+
+	licenses := make([]*licensetypes.License, 0, len(storableLicenses))
+	for _, storableLicense := range storableLicenses {
+		license, err := licensetypes.NewLicenseFromStorableLicense(storableLicense)
+		if err != nil {
+			return nil, err
+		}
+
+		licenses = append(licenses, license)
+	}
+
+	return licenses, nil
+}
+
+func (provider *provider) Delete(ctx context.Context, organizationID valuer.UUID, licenseID valuer.UUID) error {
+	license, err := provider.Get(ctx, organizationID, licenseID)
 	if err != nil {
 		return err
 	}
 
-	return nil
+	if err := license.ErrIfCloud(); err != nil {
+		return errors.WithAdditionalf(err, "license %s cannot be deleted", licenseID.StringValue())
+	}
+
+	return provider.store.Delete(ctx, organizationID, licenseID)
 }
 
 func (provider *provider) GetActive(ctx context.Context, organizationID valuer.UUID) (*licensetypes.License, error) {
@@ -139,7 +180,7 @@ func (provider *provider) Refresh(ctx context.Context, organizationID valuer.UUI
 		return err
 	}
 
-	data, err := provider.zeus.GetLicense(ctx, activeLicense.Key)
+	zeusLicense, err := provider.zeus.GetLicense(ctx, activeLicense.Key)
 	if err != nil {
 		if time.Since(activeLicense.LastValidatedAt) > time.Duration(provider.config.FailureThreshold)*provider.config.PollInterval {
 			activeLicense.UpdateFeatures(licensetypes.BasicPlan)
@@ -154,7 +195,7 @@ func (provider *provider) Refresh(ctx context.Context, organizationID valuer.UUI
 		return err
 	}
 
-	err = activeLicense.Update(data)
+	err = activeLicense.Update(zeusLicense)
 	if err != nil {
 		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to create license entity from license data")
 	}

ee/licensing/licensingstore/sqllicensingstore/store.go

@@ -64,6 +64,22 @@ func (store *store) GetAll(ctx context.Context, organizationID valuer.UUID) ([]*
 	return storableLicenses, nil
 }
 
+func (store *store) Delete(ctx context.Context, organizationID valuer.UUID, licenseID valuer.UUID) error {
+	_, err := store.
+		sqlstore.
+		BunDB().
+		NewDelete().
+		Model(new(licensetypes.StorableLicense)).
+		Where("org_id = ?", organizationID).
+		Where("id = ?", licenseID).
+		Exec(ctx)
+	if err != nil {
+		return errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "unable to delete license with ID: %s", licenseID)
+	}
+
+	return nil
+}
+
 func (store *store) Update(ctx context.Context, organizationID valuer.UUID, storableLicense *licensetypes.StorableLicense) error {
 	_, err := store.
 		sqlstore.

ee/modules/dashboard/impldashboard/module.go

@@ -32,9 +32,9 @@ type module struct {
 	tagModule          tag.Module
 }
 
-func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
+func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module, systemDashboardRegistry dashboardtypes.SystemDashboardRegistry) dashboard.Module {
 	scopedProviderSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard")
-	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser, tagModule)
+	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser, tagModule, systemDashboardRegistry)
 
 	return &module{
 		pkgDashboardModule: pkgDashboardModule,
@@ -361,6 +361,14 @@ func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valu
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
 }
 
+func (module *module) ReconcileSystemDashboards(ctx context.Context, orgID valuer.UUID) error {
+	return module.pkgDashboardModule.ReconcileSystemDashboards(ctx, orgID)
+}
+
+func (module *module) GetSystemDashboard(ctx context.Context, orgID valuer.UUID, name string) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.GetSystemDashboard(ctx, orgID, name)
+}
+
 func (module *module) delete(ctx context.Context, orgID, id valuer.UUID) error {
 	return module.store.RunInTx(ctx, func(ctx context.Context) error {
 		if err := module.store.DeletePublic(ctx, id.String()); err != nil && !errors.Ast(err, errors.TypeNotFound) {

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

@@ -76,11 +76,6 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v1/billing", am.AdminAccess(ah.getBilling)).Methods(http.MethodGet)
 	router.HandleFunc("/api/v1/portal", am.AdminAccess(ah.LicensingAPI.Portal)).Methods(http.MethodPost)
 
-	// v3
-	router.HandleFunc("/api/v3/licenses", am.AdminAccess(ah.LicensingAPI.Activate)).Methods(http.MethodPost)
-	router.HandleFunc("/api/v3/licenses", am.AdminAccess(ah.LicensingAPI.Refresh)).Methods(http.MethodPut)
-	router.HandleFunc("/api/v3/licenses/active", am.ViewAccess(ah.LicensingAPI.GetActive)).Methods(http.MethodGet)
-
 	// v4
 	router.HandleFunc("/api/v4/query_range", am.ViewAccess(ah.queryRangeV4)).Methods(http.MethodPost)
 

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

@@ -5,12 +5,7 @@ import (
 	"fmt"
 	"net/http"
 
-	"github.com/SigNoz/signoz/ee/query-service/constants"
 	"github.com/SigNoz/signoz/ee/query-service/model"
-	"github.com/SigNoz/signoz/pkg/flagger"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/featuretypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 type DayWiseBreakdown struct {
@@ -57,11 +52,6 @@ type billingData struct {
 	SubscriptionStatus string  `json:"subscriptionStatus"`
 }
 
-type billingDetails struct {
-	Status string      `json:"status"`
-	Data   billingData `json:"data"`
-}
-
 func (ah *APIHandler) getBilling(w http.ResponseWriter, r *http.Request) {
 	licenseKey := r.URL.Query().Get("licenseKey")
 
@@ -70,53 +60,17 @@ func (ah *APIHandler) getBilling(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	claims, err := authtypes.ClaimsFromContext(r.Context())
+	data, err := ah.Signoz.Zeus.GetMeters(r.Context(), licenseKey)
 	if err != nil {
 		RespondError(w, model.InternalError(err), nil)
 		return
 	}
 
-	orgID := valuer.MustNewUUID(claims.OrgID)
-	evalCtx := featuretypes.NewFlaggerEvaluationContext(orgID)
-	useZeus := ah.Signoz.Flagger.BooleanOrEmpty(r.Context(), flagger.FeatureGetMetersFromZeus, evalCtx)
-
-	if useZeus {
-		data, err := ah.Signoz.Zeus.GetMeters(r.Context(), licenseKey)
-		if err != nil {
-			RespondError(w, model.InternalError(err), nil)
-			return
-		}
-
-		var billing billingData
-		if err := json.Unmarshal(data, &billing); err != nil {
-			RespondError(w, model.InternalError(err), nil)
-			return
-		}
-
-		ah.Respond(w, billing)
-		return
-	}
-
-	billingURL := fmt.Sprintf("%s/usage?licenseKey=%s", constants.LicenseSignozIo, licenseKey)
-
-	hClient := &http.Client{}
-	req, err := http.NewRequest("GET", billingURL, nil)
-	if err != nil {
-		RespondError(w, model.InternalError(err), nil)
-		return
-	}
-	req.Header.Add("X-SigNoz-SecretKey", constants.LicenseAPIKey)
-	billingResp, err := hClient.Do(req)
-	if err != nil {
+	var billing billingData
+	if err := json.Unmarshal(data, &billing); err != nil {
 		RespondError(w, model.InternalError(err), nil)
 		return
 	}
 
-	var billingResponse billingDetails
-	if err := json.NewDecoder(billingResp.Body).Decode(&billingResponse); err != nil {
-		RespondError(w, model.InternalError(err), nil)
-		return
-	}
-
-	ah.Respond(w, billingResponse.Data)
+	ah.Respond(w, billing)
 }

ee/query-service/constants/constants.go

@@ -4,8 +4,6 @@ import (
 	"os"
 )
 
-var LicenseSignozIo = "https://license.signoz.io/api/v1"
-var LicenseAPIKey = GetOrDefaultEnv("SIGNOZ_LICENSE_API_KEY", "")
 var SaasSegmentKey = GetOrDefaultEnv("SIGNOZ_SAAS_SEGMENT_KEY", "")
 var FetchFeatures = GetOrDefaultEnv("FETCH_FEATURES", "false")
 var ZeusFeaturesURL = GetOrDefaultEnv("ZEUS_FEATURES_URL", "ZeusFeaturesURL")

ee/zeus/httpzeus/provider.go

@@ -51,7 +51,7 @@ func New(ctx context.Context, providerSettings factory.ProviderSettings, config
 	}, nil
 }
 
-func (provider *Provider) GetLicense(ctx context.Context, key string) ([]byte, error) {
+func (provider *Provider) GetLicense(ctx context.Context, key string) (*zeustypes.License, error) {
 	response, err := provider.do(
 		ctx,
 		provider.config.URL.JoinPath("/v2/licenses/me"),
@@ -63,7 +63,12 @@ func (provider *Provider) GetLicense(ctx context.Context, key string) ([]byte, e
 		return nil, err
 	}
 
-	return []byte(gjson.GetBytes(response, "data").String()), nil
+	license := new(zeustypes.License)
+	if err := json.Unmarshal([]byte(gjson.GetBytes(response, "data").String()), license); err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInternal, zeus.ErrCodeResponseMalformed, "failed to unmarshal license data")
+	}
+
+	return license, nil
 }
 
 func (provider *Provider) GetCheckoutURL(ctx context.Context, key string, body []byte) ([]byte, error) {

frontend/.gitignore

@@ -28,4 +28,8 @@ e2e/test-plan/saved-views/
 e2e/test-plan/service-map/
 e2e/test-plan/services/
 e2e/test-plan/traces/
-e2e/test-plan/user-preferences/
+e2e/test-plan/user-preferences/
+
+# Storybook
+/storybook-static/
+debug-storybook.log

frontend/.storybook/main.ts

@@ -0,0 +1,89 @@
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import type { StorybookConfig } from '@storybook/react-vite';
+import type { Plugin, PluginOption } from 'vite';
+
+const srcPath = resolve(dirname(fileURLToPath(import.meta.url)), '../src');
+
+/**
+ * Modules replaced for every story. Same idea as `moduleNameMapper` in
+ * `jest.config.ts`: the app keeps importing its own paths, Storybook resolves
+ * them to a mock. Regexes so only exact specifiers match: `lib/history` must
+ * not catch `lib/historyUtils`.
+ *
+ * Each replacement is typed as the module it stands in for, so drift is a
+ * compile error rather than a story that fails at render. The `jest` note on
+ * each entry is where the same import lands under the other runner. The two
+ * only diverge where the runner needs them to.
+ */
+const mockAliases = [
+	{
+		// jest: not replaced, jsdom drives a real browser history.
+		find: /^(?:src\/)?lib\/history$/,
+		replacement: `${srcPath}/storybook/navigation/history.alias.ts`,
+	},
+	{
+		// jest: src/__tests__/logEventMock.ts
+		find: /^(?:src\/)?api\/common\/logEvent$/,
+		replacement: `${srcPath}/storybook/mocks/logEvent.mock.ts`,
+	},
+	{
+		// jest: __mocks__/env.ts, which leaves `baseURL` empty because jsdom already
+		// resolves a relative `/api/...` against `http://localhost`.
+		find: /^(?:src\/)?constants\/env$/,
+		replacement: `${srcPath}/storybook/mocks/env.mock.ts`,
+	},
+];
+
+/**
+ * Plugins from `vite.config.ts` that either target the app's `index.html` or
+ * only pay off in a production build.
+ */
+const EXCLUDED_PLUGINS = [
+	'vite-plugin-checker',
+	'dev-base-path',
+	'dev-boot-data',
+	'vite-plugin-image-optimizer',
+	'vite-plugin-compression',
+];
+
+const isExcluded = (plugin: PluginOption): boolean =>
+	!!plugin &&
+	typeof plugin === 'object' &&
+	'name' in plugin &&
+	EXCLUDED_PLUGINS.includes((plugin as Plugin).name);
+
+const config: StorybookConfig = {
+	framework: '@storybook/react-vite',
+	stories: ['../src/**/*.stories.@(ts|tsx)'],
+	// `../public` carries the fonts, icons and i18n bundles the app expects at
+	// the root; `./public` carries the msw worker, which must not ship in a
+	// production build.
+	staticDirs: ['../public', './public'],
+	addons: ['@storybook/addon-a11y'],
+	core: { disableTelemetry: true },
+	viteFinal: async (viteConfig) => {
+		const plugins = (viteConfig.plugins ?? [])
+			.flat(Infinity as 1)
+			.filter((plugin) => !isExcluded(plugin as PluginOption));
+
+		const existingAlias = viteConfig.resolve?.alias;
+		const normalizedAlias = Array.isArray(existingAlias)
+			? existingAlias
+			: Object.entries(existingAlias ?? {}).map(([find, replacement]) => ({
+					find,
+					replacement: replacement as string,
+				}));
+
+		return {
+			...viteConfig,
+			plugins,
+			resolve: {
+				...viteConfig.resolve,
+				alias: [...mockAliases, ...normalizedAlias],
+			},
+		};
+	},
+};
+
+export default config;

frontend/.storybook/preview-head.html

@@ -0,0 +1,24 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+	href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+	rel="stylesheet"
+/>
+<link rel="stylesheet" href="css/uPlot.min.css" />
+
+<script>
+	// i18n's language detector would pick the browser locale (e.g. `en-US`), which
+	// /public/locales does not ship; pin it to the bundled language instead.
+	window.localStorage.setItem('i18nextLng', 'en');
+
+	// The Go backend injects this at boot; every integration it enables is off in
+	// Storybook so no third-party script loads inside the iframe.
+	window.signozBootData = {
+		settings: {
+			posthog: { enabled: false, apiHost: '', key: '', uiHost: '' },
+			appcues: { enabled: false, appId: '' },
+			sentry: { enabled: false, dsn: '', tunnel: '' },
+			pylon: { enabled: false, appId: '', identitySecret: '' },
+		},
+	};
+</script>

frontend/.storybook/preview.tsx

@@ -0,0 +1,110 @@
+import type { Preview } from '@storybook/react-vite';
+import type { SetupWorker } from 'msw';
+import { setupWorker } from 'msw';
+
+import { withProviders } from '../src/storybook/decorators/withProviders';
+import { globalMocks } from '../src/storybook/globals';
+import { resetStoryHistory } from '../src/storybook/navigation/containment';
+import { clearBlockedNavigations } from '../src/storybook/navigation/blockedNavigationStore';
+import {
+	resolveStory,
+	type StoryRuntimeContext,
+} from '../src/storybook/runtime/resolveStory';
+
+import '../src/ReactI18';
+
+import '../src/styles.scss';
+
+import '../src/storybook/storybook-root.scss';
+
+interface StorybookWorkerHolder {
+	__signozStorybookWorker?: StorybookWorker;
+}
+
+const holder = window as unknown as StorybookWorkerHolder;
+
+/**
+ * One worker per page, even if this module is re-executed by HMR. Two live
+ * workers both answer the service worker and the story gets whichever replies
+ * first.
+ */
+interface StorybookWorker {
+	worker: SetupWorker;
+	ready: Promise<unknown>;
+}
+
+const { worker, ready } = (holder.__signozStorybookWorker ??=
+	((): StorybookWorker => {
+		const instance = setupWorker();
+
+		return {
+			worker: instance,
+			ready: instance.start({
+				serviceWorker: { url: './mockServiceWorker.js' },
+				// Storybook's own traffic (index.json, HMR, telemetry) goes unhandled by
+				// design; only flag the app's API calls so a missing handler is obvious.
+				onUnhandledRequest: (request, print): void => {
+					const url = new URL(request.url.href);
+					const isStaticAsset =
+						/\.(?:woff2?|ttf|otf|css|js|map|png|jpe?g|svg|webp|ico)$/.test(
+							url.pathname,
+						);
+					const isAppRequest =
+						!isStaticAsset &&
+						(url.pathname.startsWith('/api/') || url.host !== window.location.host);
+
+					if (isAppRequest) {
+						print.warning();
+					}
+				},
+			}),
+		};
+	})());
+
+const preview: Preview = {
+	parameters: {
+		layout: 'fullscreen',
+		controls: { expanded: true },
+	},
+	globalTypes: {
+		theme: {
+			description: 'SigNoz color scheme',
+			toolbar: {
+				title: 'Theme',
+				icon: 'paintbrush',
+				items: [
+					{ value: 'dark', title: 'Dark' },
+					{ value: 'light', title: 'Light' },
+				],
+				dynamicTitle: true,
+			},
+		},
+	},
+	initialGlobals: { theme: 'dark' },
+	// Controls every story carries: permissions, banners, and whether the page's
+	// own endpoints answer, hang or fail.
+	args: globalMocks.args,
+	argTypes: globalMocks.argTypes,
+	decorators: [withProviders],
+	loaders: [
+		// Runs on every render, args changes included, and ahead of the decorators:
+		// the whole story world is put in place here, so the provider tree only has
+		// to read it. Re-registering the handlers per render also means an edit to a
+		// handler module takes effect on the next render instead of leaving the
+		// worker on the set it was created with.
+		async (context): Promise<void> => {
+			const world = resolveStory(context as unknown as StoryRuntimeContext);
+
+			world.apply();
+			world.install(worker);
+
+			await ready;
+		},
+	],
+	beforeEach: () => {
+		clearBlockedNavigations();
+		resetStoryHistory();
+	},
+};
+
+export default preview;

frontend/.storybook/public/mockServiceWorker.js

@@ -0,0 +1,303 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker (1.3.2).
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: INTEGRITY_CHECKSUM,
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: true,
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+  const accept = request.headers.get('accept') || ''
+
+  // Bypass server-sent events.
+  if (accept.includes('text/event-stream')) {
+    return
+  }
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  // Generate unique request ID.
+  const requestId = Math.random().toString(16).slice(2)
+
+  event.respondWith(
+    handleRequest(event, requestId).catch((error) => {
+      if (error.name === 'NetworkError') {
+        console.warn(
+          '[MSW] Successfully emulated a network error for the "%s %s" request.',
+          request.method,
+          request.url,
+        )
+        return
+      }
+
+      // At this point, any exception indicates an issue with the original request/response.
+      console.error(
+        `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
+        request.method,
+        request.url,
+        `${error.name}: ${error.message}`,
+      )
+    }),
+  )
+})
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const clonedResponse = response.clone()
+      sendToClient(client, {
+        type: 'RESPONSE',
+        payload: {
+          requestId,
+          type: clonedResponse.type,
+          ok: clonedResponse.ok,
+          status: clonedResponse.status,
+          statusText: clonedResponse.statusText,
+          body:
+            clonedResponse.body === null ? null : await clonedResponse.text(),
+          headers: Object.fromEntries(clonedResponse.headers.entries()),
+          redirected: clonedResponse.redirected,
+        },
+      })
+    })()
+  }
+
+  return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+  const clonedRequest = request.clone()
+
+  function passthrough() {
+    // Clone the request because it might've been already used
+    // (i.e. its body has been read and sent to the client).
+    const headers = Object.fromEntries(clonedRequest.headers.entries())
+
+    // Remove MSW-specific request headers so the bypassed requests
+    // comply with the server's CORS preflight check.
+    // Operate with the headers as an object because request "Headers"
+    // are immutable.
+    delete headers['x-msw-bypass']
+
+    return fetch(clonedRequest, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Bypass requests with the explicit bypass header.
+  // Such requests can be issued by "ctx.fetch()".
+  if (request.headers.get('x-msw-bypass') === 'true') {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const clientMessage = await sendToClient(client, {
+    type: 'REQUEST',
+    payload: {
+      id: requestId,
+      url: request.url,
+      method: request.method,
+      headers: Object.fromEntries(request.headers.entries()),
+      cache: request.cache,
+      mode: request.mode,
+      credentials: request.credentials,
+      destination: request.destination,
+      integrity: request.integrity,
+      redirect: request.redirect,
+      referrer: request.referrer,
+      referrerPolicy: request.referrerPolicy,
+      body: await request.text(),
+      bodyUsed: request.bodyUsed,
+      keepalive: request.keepalive,
+    },
+  })
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'MOCK_NOT_FOUND': {
+      return passthrough()
+    }
+
+    case 'NETWORK_ERROR': {
+      const { name, message } = clientMessage.data
+      const networkError = new Error(message)
+      networkError.name = name
+
+      // Rejecting a "respondWith" promise emulates a network error.
+      throw networkError
+    }
+  }
+
+  return passthrough()
+}
+
+function sendToClient(client, message) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [channel.port2])
+  })
+}
+
+function sleep(timeMs) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeMs)
+  })
+}
+
+async function respondWithMock(response) {
+  await sleep(response.delay)
+  return new Response(response.body, response)
+}

frontend/README.md

@@ -88,6 +88,17 @@ pnpm test
 pnpm tsgo --noEmit
 ```
 
+## Storybook
+
+```bash
+pnpm storybook
+```
+
+Opens [http://localhost:6006](http://localhost:6006). Pages run against msw
+mocks with no backend; query-param navigation works inside a story, leaving the
+page is blocked. See [`src/storybook/README.md`](src/storybook/README.md) for the
+override surface.
+
 ## Linting
 
 ```bash

frontend/package.json

@@ -7,6 +7,8 @@
     "preinstall": "npx only-allow pnpm",
     "i18n:generate-hash": "node ./i18-generate-hash.cjs",
     "dev": "vite",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -o storybook-static",
     "build": "vite build",
     "preview": "vite preview",
     "prettify": "oxfmt",
@@ -158,6 +160,9 @@
     "@commitlint/config-conventional": "20.4.4",
     "@jest/globals": "30.4.1",
     "@jest/types": "30.2.0",
+    "@storybook/addon-a11y": "10.5.9",
+    "@storybook/react-vite": "10.5.9",
+    "@testing-library/dom": "8.20.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
@@ -203,6 +208,7 @@
     "redux-mock-store": "1.5.4",
     "sass": "1.97.3",
     "sharp": "0.35.0",
+    "storybook": "10.5.9",
     "stylelint": "17.7.0",
     "svgo": "4.0.2",
     "ts-jest": "29.4.9",

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

@@ -26,6 +26,75 @@
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
   "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
   "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
+  "field_jira_site": "Site URL",
+  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net. Only Jira Cloud is supported.",
+  "jira_site_invalid": "Site URL must be an https URL on an atlassian.net domain",
+  "jira_required_fields": "Site URL, email, API token, project and issue type are required",
+  "jira_service_account_tip": "Recommended: use a Jira service account so alerts aren't reported under a personal name and the channel keeps working when someone leaves.",
+  "jira_service_account_tip_link": "Learn how",
+  "field_jira_email": "Email",
+  "help_jira_email": "The Atlassian account email used for authentication.",
+  "field_jira_api_token": "API token",
+  "help_jira_api_token": "Create one at id.atlassian.com under Security → API tokens.",
+  "field_jira_project": "Project key",
+  "field_jira_issue_type": "Issue type",
+  "help_jira_issue_type": "An issue type that exists in the project, e.g. Task, Bug or Incident.",
+  "field_jira_summary": "Summary (issue title)",
+  "help_jira_summary": "Template for the Jira issue title.",
+  "field_jira_description": "Description",
+  "help_jira_description": "Template for the issue description. Rendered as rich text with a status panel and links back to SigNoz.",
+  "jira_advanced_section": "Advanced Options",
+  "field_jira_priority": "Priority",
+  "placeholder_jira_priority": "Leave empty to use the project default",
+  "help_jira_priority": "Must match a priority in the project's scheme, e.g. High.",
+  "field_jira_labels": "Labels",
+  "placeholder_jira_labels": "Type a label and press Enter",
+  "help_jira_labels": "signoz and a deduplication label are added automatically.",
+  "field_jira_resolve_transition": "Resolve transition",
+  "field_jira_reopen_transition": "Reopen transition",
+  "help_jira_resolve_transition": "When the alert resolves, SigNoz moves the Jira issue to a \"Done\" status via a workflow transition. This is auto-detected — leave it empty unless your project has more than one \"Done\" transition (e.g. Done vs. Won't Do) and you want to force a specific one by name.",
+  "help_jira_reopen_transition": "When a resolved alert fires again (within the reopen window), SigNoz moves the issue back out of \"Done\" to an active status via a workflow transition. This is auto-detected — leave it empty unless you want to force a specific one by name (e.g. To Do or Reopen).",
+  "placeholder_jira_resolve_transition": "Auto-detected, e.g. Done",
+  "placeholder_jira_reopen_transition": "Auto-detected, e.g. To Do",
+  "field_jira_wont_fix_resolution": "Won't-fix resolution",
+  "help_jira_wont_fix_resolution": "If the issue was resolved with this resolution (e.g. Won't Do), SigNoz won't reopen it when the alert fires again; a new issue is created instead. Leave empty to always reopen.",
+  "placeholder_jira_wont_fix_resolution": "e.g. Won't Do",
+  "field_jira_reopen_duration": "Reopen window",
+  "placeholder_jira_reopen_duration": "e.g. 72h",
+  "help_jira_reopen_duration": "If a resolved alert fires again within this window, the same ticket is reopened; after the window, a re-fire opens a new ticket instead. Default: 3d.",
+  "tooltip_jira_reopen_duration": "Accepted units: m (minutes), h (hours), d (days), w (weeks), y (years) — e.g. 30m, 72h or 3d. Minimum 1m.",
+  "jira_reopen_duration_invalid": "Reopen window must be a duration like 30m, 72h or 3d (minimum 1m)",
+  "jsmops_tip": "Create an API integration on your JSM team's Operations page and paste its key below.",
+  "jsmops_tip_link": "Learn how",
+  "field_jsmops_api_key": "API key",
+  "help_jsmops_api_key": "The JSM Ops integration API key, from your team's Operations → Integrations → API. Make sure the integration is turned on.",
+  "field_jsmops_message": "Message (alert title)",
+  "help_jsmops_message": "Template for the alert title. Truncated to 130 characters.",
+  "field_jsmops_description": "Description",
+  "help_jsmops_description": "Template for the alert description. Rendered as rich text; kept under 15,000 characters.",
+  "jsmops_advanced_section": "Advanced Options",
+  "field_jsmops_priority": "Priority",
+  "help_jsmops_priority": "Template resolving to one of P1–P5. Leave as-is to map from alert severity.",
+  "field_jsmops_tags": "Tags",
+  "placeholder_jsmops_tags": "Type a tag and press Enter",
+  "help_jsmops_tags": "Tags added to every alert.",
+  "incidentio_tip": "Create an HTTP alert source in incident.io (On-call \u2192 Alert routing \u2192 Sources) and paste its URL and token below.",
+  "incidentio_tip_link": "Learn how",
+  "field_incidentio_url": "Alert source URL",
+  "help_incidentio_url": "The alert events URL from the source's setup page, e.g. https://api.incident.io/v2/alert_events/http/<source_config_id>.",
+  "field_incidentio_token": "Token",
+  "help_incidentio_token": "The alert source's secret token, from the same setup page.",
+  "field_incidentio_title": "Title",
+  "help_incidentio_title": "Template for the alert title. Kept stable while the alert fires \u2014 incident.io ignores content updates on repeat events.",
+  "field_incidentio_description": "Description",
+  "help_incidentio_description": "Template for the alert description. Markdown, rendered natively by incident.io.",
+  "incidentio_required_fields": "Alert source URL and token are required",
+  "incidentio_url_invalid": "URL must be an incident.io alert events URL (https://api.incident.io/v2/alert_events/http/<source_config_id>)",
+  "field_incidentio_metadata": "Additional metadata",
+  "help_incidentio_metadata": "Key-value pairs added to every alert's metadata, on top of the alert's labels (these win on a key clash). Values may use templates, e.g. {{ .CommonLabels.severity }}.",
+  "placeholder_incidentio_metadata_key": "Key",
+  "placeholder_incidentio_metadata_value": "Value",
+  "button_incidentio_add_metadata": "Add metadata",
 
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",

frontend/public/locales/en/channels.json

@@ -26,6 +26,75 @@
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
   "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
   "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
+  "field_jira_site": "Site URL",
+  "tooltip_jira_site": "Your Jira Cloud base URL, e.g. https://your-domain.atlassian.net. Only Jira Cloud is supported.",
+  "jira_site_invalid": "Site URL must be an https URL on an atlassian.net domain",
+  "jira_required_fields": "Site URL, email, API token, project and issue type are required",
+  "jira_service_account_tip": "Recommended: use a Jira service account so alerts aren't reported under a personal name and the channel keeps working when someone leaves.",
+  "jira_service_account_tip_link": "Learn how",
+  "field_jira_email": "Email",
+  "help_jira_email": "The Atlassian account email used for authentication.",
+  "field_jira_api_token": "API token",
+  "help_jira_api_token": "Create one at id.atlassian.com under Security → API tokens.",
+  "field_jira_project": "Project key",
+  "field_jira_issue_type": "Issue type",
+  "help_jira_issue_type": "An issue type that exists in the project, e.g. Task, Bug or Incident.",
+  "field_jira_summary": "Summary (issue title)",
+  "help_jira_summary": "Template for the Jira issue title.",
+  "field_jira_description": "Description",
+  "help_jira_description": "Template for the issue description. Rendered as rich text with a status panel and links back to SigNoz.",
+  "jira_advanced_section": "Advanced Options",
+  "field_jira_priority": "Priority",
+  "placeholder_jira_priority": "Leave empty to use the project default",
+  "help_jira_priority": "Must match a priority in the project's scheme, e.g. High.",
+  "field_jira_labels": "Labels",
+  "placeholder_jira_labels": "Type a label and press Enter",
+  "help_jira_labels": "signoz and a deduplication label are added automatically.",
+  "field_jira_resolve_transition": "Resolve transition",
+  "field_jira_reopen_transition": "Reopen transition",
+  "help_jira_resolve_transition": "When the alert resolves, SigNoz moves the Jira issue to a \"Done\" status via a workflow transition. This is auto-detected — leave it empty unless your project has more than one \"Done\" transition (e.g. Done vs. Won't Do) and you want to force a specific one by name.",
+  "help_jira_reopen_transition": "When a resolved alert fires again (within the reopen window), SigNoz moves the issue back out of \"Done\" to an active status via a workflow transition. This is auto-detected — leave it empty unless you want to force a specific one by name (e.g. To Do or Reopen).",
+  "placeholder_jira_resolve_transition": "Auto-detected, e.g. Done",
+  "placeholder_jira_reopen_transition": "Auto-detected, e.g. To Do",
+  "field_jira_wont_fix_resolution": "Won't-fix resolution",
+  "help_jira_wont_fix_resolution": "If the issue was resolved with this resolution (e.g. Won't Do), SigNoz won't reopen it when the alert fires again; a new issue is created instead. Leave empty to always reopen.",
+  "placeholder_jira_wont_fix_resolution": "e.g. Won't Do",
+  "field_jira_reopen_duration": "Reopen window",
+  "placeholder_jira_reopen_duration": "e.g. 72h",
+  "help_jira_reopen_duration": "If a resolved alert fires again within this window, the same ticket is reopened; after the window, a re-fire opens a new ticket instead. Default: 3d.",
+  "tooltip_jira_reopen_duration": "Accepted units: m (minutes), h (hours), d (days), w (weeks), y (years) — e.g. 30m, 72h or 3d. Minimum 1m.",
+  "jira_reopen_duration_invalid": "Reopen window must be a duration like 30m, 72h or 3d (minimum 1m)",
+  "jsmops_tip": "Create an API integration on your JSM team's Operations page and paste its key below.",
+  "jsmops_tip_link": "Learn how",
+  "field_jsmops_api_key": "API key",
+  "help_jsmops_api_key": "The JSM Ops integration API key, from your team's Operations → Integrations → API. Make sure the integration is turned on.",
+  "field_jsmops_message": "Message (alert title)",
+  "help_jsmops_message": "Template for the alert title. Truncated to 130 characters.",
+  "field_jsmops_description": "Description",
+  "help_jsmops_description": "Template for the alert description. Rendered as rich text; kept under 15,000 characters.",
+  "jsmops_advanced_section": "Advanced Options",
+  "field_jsmops_priority": "Priority",
+  "help_jsmops_priority": "Template resolving to one of P1–P5. Leave as-is to map from alert severity.",
+  "field_jsmops_tags": "Tags",
+  "placeholder_jsmops_tags": "Type a tag and press Enter",
+  "help_jsmops_tags": "Tags added to every alert.",
+  "incidentio_tip": "Create an HTTP alert source in incident.io (On-call \u2192 Alert routing \u2192 Sources) and paste its URL and token below.",
+  "incidentio_tip_link": "Learn how",
+  "field_incidentio_url": "Alert source URL",
+  "help_incidentio_url": "The alert events URL from the source's setup page, e.g. https://api.incident.io/v2/alert_events/http/<source_config_id>.",
+  "field_incidentio_token": "Token",
+  "help_incidentio_token": "The alert source's secret token, from the same setup page.",
+  "field_incidentio_title": "Title",
+  "help_incidentio_title": "Template for the alert title. Kept stable while the alert fires \u2014 incident.io ignores content updates on repeat events.",
+  "field_incidentio_description": "Description",
+  "help_incidentio_description": "Template for the alert description. Markdown, rendered natively by incident.io.",
+  "incidentio_required_fields": "Alert source URL and token are required",
+  "incidentio_url_invalid": "URL must be an incident.io alert events URL (https://api.incident.io/v2/alert_events/http/<source_config_id>)",
+  "field_incidentio_metadata": "Additional metadata",
+  "help_incidentio_metadata": "Key-value pairs added to every alert's metadata, on top of the alert's labels (these win on a key clash). Values may use templates, e.g. {{ .CommonLabels.severity }}.",
+  "placeholder_incidentio_metadata_key": "Key",
+  "placeholder_incidentio_metadata_value": "Value",
+  "button_incidentio_add_metadata": "Add metadata",
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",
   "field_slack_description": "Description",

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -103,30 +103,30 @@ function createMockLicense(
 	overrides: Partial<LicenseResModel> = {},
 ): LicenseResModel {
 	return {
-		key: 'test-key',
-		event_queue: {
-			created_at: '0',
+		id: 'test-license-id',
+		eventQueue: {
+			createdAt: '0',
 			event: LicenseEvent.NO_EVENT,
-			scheduled_at: '0',
+			scheduledAt: '0',
 			status: '',
-			updated_at: '0',
+			updatedAt: '0',
 		},
 		state: LicenseState.ACTIVATED,
 		status: LicenseStatus.VALID,
 		platform: LicensePlatform.CLOUD,
-		created_at: '0',
+		createdAt: '0',
 		plan: {
-			created_at: '0',
+			id: '0',
+			createdAt: '0',
 			description: '',
-			is_active: true,
+			isActive: true,
 			name: '',
-			updated_at: '0',
+			updatedAt: '0',
 		},
-		plan_id: '0',
-		free_until: '0',
-		updated_at: '0',
-		valid_from: 0,
-		valid_until: 0,
+		freeUntil: '0',
+		updatedAt: '0',
+		validFrom: 0,
+		validUntil: 0,
 		...overrides,
 	};
 }
@@ -850,6 +850,22 @@ describe('PrivateRoute', () => {
 			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
 		});
 
+		it('should keep a custom role (ANONYMOUS) on workspace locked instead of bouncing to unauthorized', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.WORKSPACE_LOCKED,
+				appContext: {
+					isLoggedIn: true,
+					isFetchingActiveLicense: false,
+					activeLicense: createMockLicense({ platform: LicensePlatform.CLOUD }),
+					trialInfo: createMockTrialInfo({ workSpaceBlock: true }),
+					user: createMockUser({ role: USER_ROLES.ANONYMOUS as ROLES }),
+				},
+				isCloudUser: true,
+			});
+
+			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
+		});
+
 		it('should not redirect self-hosted users to workspace locked even when workSpaceBlock is true', () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.HOME,
@@ -1024,6 +1040,24 @@ describe('PrivateRoute', () => {
 			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
 		});
 
+		it('should keep a custom role (ANONYMOUS) on workspace suspended instead of bouncing to unauthorized', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.WORKSPACE_SUSPENDED,
+				appContext: {
+					isLoggedIn: true,
+					isFetchingActiveLicense: false,
+					activeLicense: createMockLicense({
+						platform: LicensePlatform.CLOUD,
+						state: LicenseState.DEFAULTED,
+					}),
+					user: createMockUser({ role: USER_ROLES.ANONYMOUS as ROLES }),
+				},
+				isCloudUser: true,
+			});
+
+			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
+		});
+
 		it('should not redirect self-hosted users to workspace suspended when license is defaulted', () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.HOME,
@@ -1580,6 +1614,18 @@ describe('PrivateRoute', () => {
 				path: ROUTES.SUPPORT,
 				deniedRoles: [USER_ROLES.AUTHOR as ROLES],
 			},
+			WORKSPACE_LOCKED: {
+				path: ROUTES.WORKSPACE_LOCKED,
+				deniedRoles: DENIED_ROLES,
+			},
+			WORKSPACE_SUSPENDED: {
+				path: ROUTES.WORKSPACE_SUSPENDED,
+				deniedRoles: DENIED_ROLES,
+			},
+			WORKSPACE_ACCESS_RESTRICTED: {
+				path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
+				deniedRoles: DENIED_ROLES,
+			},
 		};
 
 		const authzRouteRolePairs: [string, string, ROLES][] = Object.entries(

frontend/src/AppRoutes/index.tsx

@@ -1,11 +1,12 @@
-import { Suspense, useCallback, useEffect, useState } from 'react';
+import { ReactNode, Suspense, useCallback, useEffect, useState } from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
 import { CompatRouter } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
-import { ConfigProvider } from 'antd';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
+import AppPageProviders from 'app/AppPageProviders';
+import AppShell from 'app/AppShell';
 import AppLoading from 'components/AppLoading/AppLoading';
 import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
@@ -17,22 +18,15 @@ import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
-import { KeyboardHotkeysProvider } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useIsDarkMode, useThemeConfig } from 'hooks/useDarkMode';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { NotificationProvider } from 'hooks/useNotifications';
-import { ResourceProvider } from 'hooks/useResourceAttribute';
 import { StatusCodes } from 'http-status-codes';
 import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import posthog from 'posthog-js';
 import { useAppContext } from 'providers/App/App';
 import { IUser } from 'providers/App/types';
-import { CmdKProvider } from 'providers/cmdKProvider';
-import { ErrorModalProvider } from 'providers/ErrorModalProvider';
-import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
-import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { extractDomain } from 'utils/app';
 
@@ -44,8 +38,17 @@ import defaultRoutes, {
 	SUPPORT_ROUTE,
 } from './routes';
 
+const appRouter = (children: ReactNode): ReactNode => (
+	<Router history={history}>
+		<CompatRouter>{children}</CompatRouter>
+	</Router>
+);
+
+const appLayout = (children: ReactNode): ReactNode => (
+	<AppLayout>{children}</AppLayout>
+);
+
 function App(): JSX.Element {
-	const themeConfig = useThemeConfig();
 	const {
 		user,
 		isFetchingUser,
@@ -451,48 +454,36 @@ function App(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<ConfigProvider theme={themeConfig}>
-				<Router history={history}>
-					<CompatRouter>
-						<CmdKProvider>
-							<NotificationProvider>
-								<ErrorModalProvider>
-									{isLoggedInState && <CmdKPalette userRole={user.role} />}
-									{isLoggedInState && (
-										<ShiftHoldOverlayController userRole={user.role} />
-									)}
-									<PrivateRoute>
-										<ResourceProvider>
-											<QueryBuilderProvider>
-												<KeyboardHotkeysProvider>
-													<AppLayout>
-														<PreferenceContextProvider>
-															<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-																<Switch>
-																	{routes.map(({ path, component, exact }) => (
-																		<Route
-																			key={`${path}`}
-																			exact={exact}
-																			path={path}
-																			component={component}
-																		/>
-																	))}
-																	<Route exact path="/" component={Home} />
-																	<Route path="*" component={NotFound} />
-																</Switch>
-															</Suspense>
-														</PreferenceContextProvider>
-													</AppLayout>
-												</KeyboardHotkeysProvider>
-											</QueryBuilderProvider>
-										</ResourceProvider>
-									</PrivateRoute>
-								</ErrorModalProvider>
-							</NotificationProvider>
-						</CmdKProvider>
-					</CompatRouter>
-				</Router>
-			</ConfigProvider>
+			<AppShell
+				router={appRouter}
+				overlays={
+					isLoggedInState && (
+						<>
+							<CmdKPalette userRole={user.role} />
+							<ShiftHoldOverlayController userRole={user.role} />
+						</>
+					)
+				}
+			>
+				<PrivateRoute>
+					<AppPageProviders layout={appLayout}>
+						<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+							<Switch>
+								{routes.map(({ path, component, exact }) => (
+									<Route
+										key={`${path}`}
+										exact={exact}
+										path={path}
+										component={component}
+									/>
+								))}
+								<Route exact path="/" component={Home} />
+								<Route path="*" component={NotFound} />
+							</Switch>
+						</Suspense>
+					</AppPageProviders>
+				</PrivateRoute>
+			</AppShell>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/AppRoutes/pageComponents.ts

@@ -94,12 +94,12 @@ export const OnboardingV2 = Loadable(
 export const DashboardsListPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "DashboardsListPage" */ 'pages/DashboardsListPage'
+			/* webpackChunkName: "DashboardsListPage" */ 'pages/DashboardsListPageV2'
 		),
 );
 
 export const DashboardPage = Loadable(
-	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardPage'),
+	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardPageV2'),
 );
 
 export const DashboardWidget = Loadable(

frontend/src/api/dashboard/public/createPublicDashboard.ts

@@ -1,36 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-import { ErrorV2Resp, 	 SuccessResponseV2 } from 'types/api';
-import { CreatePublicDashboardProps } from 'types/api/dashboard/public/create';
-
-/**
- * @deprecated Use the generated `useCreatePublicDashboard` hook (or `createPublicDashboard` fetcher) from
- * `api/generated/services/dashboard` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const createPublicDashboard = async (
-	props: CreatePublicDashboardProps,
-): Promise<SuccessResponseV2<CreatePublicDashboardProps>> => {
-
-    const { dashboardId, timeRangeEnabled = false, defaultTimeRange = DEFAULT_TIME_RANGE } = props;
-
-	try {
-		const response = await axios.post(
-			`/dashboards/${dashboardId}/public`,
-			{ timeRangeEnabled, defaultTimeRange },
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default createPublicDashboard;

frontend/src/api/dashboard/public/getPublicDashboardMeta.ts

@@ -1,27 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { GetPublicDashboardMetaProps, PayloadProps,PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
-
-/**
- * @deprecated Use the generated `useGetPublicDashboard` hook (or `getPublicDashboard` fetcher) from
- * `api/generated/services/dashboard` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const getPublicDashboardMeta = async (props: GetPublicDashboardMetaProps): Promise<SuccessResponseV2<PublicDashboardMetaProps>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/dashboards/${props.id}/public`);
-        
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getPublicDashboardMeta;

frontend/src/api/dashboard/public/revokePublicDashboardAccess.ts

@@ -1,29 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps,RevokePublicDashboardAccessProps } from 'types/api/dashboard/public/delete';
-
-/**
- * @deprecated Use the generated `useDeletePublicDashboard` hook (or `deletePublicDashboard` fetcher) from
- * `api/generated/services/dashboard` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const revokePublicDashboardAccess = async (
-	props: RevokePublicDashboardAccessProps,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.delete<PayloadProps>(`/dashboards/${props.id}/public`);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default revokePublicDashboardAccess;

frontend/src/api/dashboard/public/updatePublicDashboard.ts

@@ -1,36 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-import {  ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { UpdatePublicDashboardProps } from 'types/api/dashboard/public/update';
-
-/**
- * @deprecated Use the generated `useUpdatePublicDashboard` hook (or `updatePublicDashboard` fetcher) from
- * `api/generated/services/dashboard` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const updatePublicDashboard = async (
-	props: UpdatePublicDashboardProps,
-): Promise<SuccessResponseV2<UpdatePublicDashboardProps>> => {
-
-    const { dashboardId, timeRangeEnabled = false, defaultTimeRange = DEFAULT_TIME_RANGE } = props;
-
-	try {
-		const response = await axios.put(
-			`/dashboards/${dashboardId}/public`,
-			{ timeRangeEnabled, defaultTimeRange },
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default updatePublicDashboard;

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

@@ -46,6 +46,8 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
+	GetSystemDashboard200,
+	GetSystemDashboardPathParameters,
 	ListDashboardViews200,
 	ListDashboardsForUserV2200,
 	ListDashboardsForUserV2Params,
@@ -1885,6 +1887,108 @@ export const useMigrateDashboardV2 = <
 > => {
 	return useMutation(getMigrateDashboardV2MutationOptions(options));
 };
+/**
+ * Returns a dashboard SigNoz ships and owns, addressed by its stable definition name (e.g. `ai-o11y-overview`) rather than its id. System dashboards are read-only and upgraded through releases. The dashboard's own `name` field carries a reserved prefix that the path segment must not include.
+ * @summary Get system dashboard
+ */
+export const getSystemDashboard = (
+	{ name }: GetSystemDashboardPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetSystemDashboard200>({
+		url: `/api/v2/dashboards/system/${name}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetSystemDashboardQueryKey = ({
+	name,
+}: GetSystemDashboardPathParameters) => {
+	return [`/api/v2/dashboards/system/${name}`] as const;
+};
+
+export const getGetSystemDashboardQueryOptions = <
+	TData = Awaited<ReturnType<typeof getSystemDashboard>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ name }: GetSystemDashboardPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getSystemDashboard>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetSystemDashboardQueryKey({ name });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getSystemDashboard>>
+	> = ({ signal }) => getSystemDashboard({ name }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!name,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getSystemDashboard>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetSystemDashboardQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getSystemDashboard>>
+>;
+export type GetSystemDashboardQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get system dashboard
+ */
+
+export function useGetSystemDashboard<
+	TData = Awaited<ReturnType<typeof getSystemDashboard>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ name }: GetSystemDashboardPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getSystemDashboard>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetSystemDashboardQueryOptions({ name }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get system dashboard
+ */
+export const invalidateGetSystemDashboard = async (
+	queryClient: QueryClient,
+	{ name }: GetSystemDashboardPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetSystemDashboardQueryKey({ name }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.
  * @summary Get public dashboard data (v2)

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

@@ -21,18 +21,28 @@ import type {
 	CreateIngestionKey201,
 	CreateIngestionKeyLimit201,
 	CreateIngestionKeyLimitPathParameters,
+	CreateIngestionLimit201,
 	DeleteIngestionKeyLimitPathParameters,
 	DeleteIngestionKeyPathParameters,
+	DeleteIngestionLimitPathParameters,
+	GatewaytypesDeprecatedPostableIngestionKeyLimitDTO,
 	GatewaytypesPostableIngestionKeyDTO,
 	GatewaytypesPostableIngestionKeyLimitDTO,
 	GatewaytypesUpdatableIngestionKeyLimitDTO,
+	GetIngestionKey200,
+	GetIngestionKeyLimits200,
+	GetIngestionKeyLimitsPathParameters,
+	GetIngestionKeyPathParameters,
 	GetIngestionKeys200,
 	GetIngestionKeysParams,
+	GetIngestionLimit200,
+	GetIngestionLimitPathParameters,
 	RenderErrorResponseDTO,
 	SearchIngestionKeys200,
 	SearchIngestionKeysParams,
 	UpdateIngestionKeyLimitPathParameters,
 	UpdateIngestionKeyPathParameters,
+	UpdateIngestionLimitPathParameters,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -300,6 +310,108 @@ export const useDeleteIngestionKey = <
 > => {
 	return useMutation(getDeleteIngestionKeyMutationOptions(options));
 };
+/**
+ * This endpoint returns an ingestion key for the workspace
+ * @summary Get ingestion key for workspace
+ */
+export const getIngestionKey = (
+	{ keyId }: GetIngestionKeyPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetIngestionKey200>({
+		url: `/api/v2/gateway/ingestion_keys/${keyId}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetIngestionKeyQueryKey = ({
+	keyId,
+}: GetIngestionKeyPathParameters) => {
+	return [`/api/v2/gateway/ingestion_keys/${keyId}`] as const;
+};
+
+export const getGetIngestionKeyQueryOptions = <
+	TData = Awaited<ReturnType<typeof getIngestionKey>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ keyId }: GetIngestionKeyPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKey>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetIngestionKeyQueryKey({ keyId });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getIngestionKey>>> = ({
+		signal,
+	}) => getIngestionKey({ keyId }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!keyId,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getIngestionKey>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetIngestionKeyQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getIngestionKey>>
+>;
+export type GetIngestionKeyQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get ingestion key for workspace
+ */
+
+export function useGetIngestionKey<
+	TData = Awaited<ReturnType<typeof getIngestionKey>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ keyId }: GetIngestionKeyPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKey>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetIngestionKeyQueryOptions({ keyId }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get ingestion key for workspace
+ */
+export const invalidateGetIngestionKey = async (
+	queryClient: QueryClient,
+	{ keyId }: GetIngestionKeyPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetIngestionKeyQueryKey({ keyId }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint updates an ingestion key for the workspace
  * @summary Update ingestion key for workspace
@@ -400,19 +512,122 @@ export const useUpdateIngestionKey = <
 	return useMutation(getUpdateIngestionKeyMutationOptions(options));
 };
 /**
- * This endpoint creates an ingestion key limit
+ * This endpoint returns the ingestion limits for an ingestion key
+ * @summary Get limits for the ingestion key
+ */
+export const getIngestionKeyLimits = (
+	{ keyId }: GetIngestionKeyLimitsPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetIngestionKeyLimits200>({
+		url: `/api/v2/gateway/ingestion_keys/${keyId}/limits`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetIngestionKeyLimitsQueryKey = ({
+	keyId,
+}: GetIngestionKeyLimitsPathParameters) => {
+	return [`/api/v2/gateway/ingestion_keys/${keyId}/limits`] as const;
+};
+
+export const getGetIngestionKeyLimitsQueryOptions = <
+	TData = Awaited<ReturnType<typeof getIngestionKeyLimits>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ keyId }: GetIngestionKeyLimitsPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKeyLimits>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetIngestionKeyLimitsQueryKey({ keyId });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getIngestionKeyLimits>>
+	> = ({ signal }) => getIngestionKeyLimits({ keyId }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!keyId,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getIngestionKeyLimits>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetIngestionKeyLimitsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getIngestionKeyLimits>>
+>;
+export type GetIngestionKeyLimitsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get limits for the ingestion key
+ */
+
+export function useGetIngestionKeyLimits<
+	TData = Awaited<ReturnType<typeof getIngestionKeyLimits>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ keyId }: GetIngestionKeyLimitsPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKeyLimits>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetIngestionKeyLimitsQueryOptions({ keyId }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get limits for the ingestion key
+ */
+export const invalidateGetIngestionKeyLimits = async (
+	queryClient: QueryClient,
+	{ keyId }: GetIngestionKeyLimitsPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetIngestionKeyLimitsQueryKey({ keyId }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates an ingestion key limit.
+ * @deprecated
  * @summary Create limit for the ingestion key
  */
 export const createIngestionKeyLimit = (
 	{ keyId }: CreateIngestionKeyLimitPathParameters,
-	gatewaytypesPostableIngestionKeyLimitDTO?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>,
+	gatewaytypesDeprecatedPostableIngestionKeyLimitDTO?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateIngestionKeyLimit201>({
 		url: `/api/v2/gateway/ingestion_keys/${keyId}/limits`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: gatewaytypesPostableIngestionKeyLimitDTO,
+		data: gatewaytypesDeprecatedPostableIngestionKeyLimitDTO,
 		signal,
 	});
 };
@@ -426,7 +641,7 @@ export const getCreateIngestionKeyLimitMutationOptions = <
 		TError,
 		{
 			pathParams: CreateIngestionKeyLimitPathParameters;
-			data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+			data?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>;
 		},
 		TContext
 	>;
@@ -435,7 +650,7 @@ export const getCreateIngestionKeyLimitMutationOptions = <
 	TError,
 	{
 		pathParams: CreateIngestionKeyLimitPathParameters;
-		data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+		data?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>;
 	},
 	TContext
 > => {
@@ -452,7 +667,7 @@ export const getCreateIngestionKeyLimitMutationOptions = <
 		Awaited<ReturnType<typeof createIngestionKeyLimit>>,
 		{
 			pathParams: CreateIngestionKeyLimitPathParameters;
-			data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+			data?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -467,12 +682,13 @@ export type CreateIngestionKeyLimitMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createIngestionKeyLimit>>
 >;
 export type CreateIngestionKeyLimitMutationBody =
-	| BodyType<GatewaytypesPostableIngestionKeyLimitDTO>
+	| BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>
 	| undefined;
 export type CreateIngestionKeyLimitMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Create limit for the ingestion key
  */
 export const useCreateIngestionKeyLimit = <
@@ -484,7 +700,7 @@ export const useCreateIngestionKeyLimit = <
 		TError,
 		{
 			pathParams: CreateIngestionKeyLimitPathParameters;
-			data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+			data?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>;
 		},
 		TContext
 	>;
@@ -493,7 +709,7 @@ export const useCreateIngestionKeyLimit = <
 	TError,
 	{
 		pathParams: CreateIngestionKeyLimitPathParameters;
-		data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+		data?: BodyType<GatewaytypesDeprecatedPostableIngestionKeyLimitDTO>;
 	},
 	TContext
 > => {
@@ -501,6 +717,7 @@ export const useCreateIngestionKeyLimit = <
 };
 /**
  * This endpoint deletes an ingestion key limit
+ * @deprecated
  * @summary Delete limit for the ingestion key
  */
 export const deleteIngestionKeyLimit = (
@@ -559,6 +776,7 @@ export type DeleteIngestionKeyLimitMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Delete limit for the ingestion key
  */
 export const useDeleteIngestionKeyLimit = <
@@ -580,7 +798,8 @@ export const useDeleteIngestionKeyLimit = <
 	return useMutation(getDeleteIngestionKeyLimitMutationOptions(options));
 };
 /**
- * This endpoint updates an ingestion key limit
+ * This endpoint updates an ingestion key limit.
+ * @deprecated
  * @summary Update limit for the ingestion key
  */
 export const updateIngestionKeyLimit = (
@@ -653,6 +872,7 @@ export type UpdateIngestionKeyLimitMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Update limit for the ingestion key
  */
 export const useUpdateIngestionKeyLimit = <
@@ -779,3 +999,370 @@ export const invalidateSearchIngestionKeys = async (
 
 	return queryClient;
 };
+
+/**
+ * This endpoint creates an ingestion limit for the ingestion key referenced by keyId
+ * @summary Create ingestion limit
+ */
+export const createIngestionLimit = (
+	gatewaytypesPostableIngestionKeyLimitDTO?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateIngestionLimit201>({
+		url: `/api/v2/gateway/ingestion_limits`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: gatewaytypesPostableIngestionKeyLimitDTO,
+		signal,
+	});
+};
+
+export const getCreateIngestionLimitMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createIngestionLimit>>,
+		TError,
+		{ data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createIngestionLimit>>,
+	TError,
+	{ data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO> },
+	TContext
+> => {
+	const mutationKey = ['createIngestionLimit'];
+	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 createIngestionLimit>>,
+		{ data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createIngestionLimit(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateIngestionLimitMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createIngestionLimit>>
+>;
+export type CreateIngestionLimitMutationBody =
+	| BodyType<GatewaytypesPostableIngestionKeyLimitDTO>
+	| undefined;
+export type CreateIngestionLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create ingestion limit
+ */
+export const useCreateIngestionLimit = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createIngestionLimit>>,
+		TError,
+		{ data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createIngestionLimit>>,
+	TError,
+	{ data?: BodyType<GatewaytypesPostableIngestionKeyLimitDTO> },
+	TContext
+> => {
+	return useMutation(getCreateIngestionLimitMutationOptions(options));
+};
+/**
+ * This endpoint deletes an ingestion limit
+ * @summary Delete ingestion limit
+ */
+export const deleteIngestionLimit = (
+	{ limitId }: DeleteIngestionLimitPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/gateway/ingestion_limits/${limitId}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteIngestionLimitMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteIngestionLimit>>,
+		TError,
+		{ pathParams: DeleteIngestionLimitPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteIngestionLimit>>,
+	TError,
+	{ pathParams: DeleteIngestionLimitPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteIngestionLimit'];
+	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 deleteIngestionLimit>>,
+		{ pathParams: DeleteIngestionLimitPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteIngestionLimit(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteIngestionLimitMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteIngestionLimit>>
+>;
+
+export type DeleteIngestionLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete ingestion limit
+ */
+export const useDeleteIngestionLimit = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteIngestionLimit>>,
+		TError,
+		{ pathParams: DeleteIngestionLimitPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteIngestionLimit>>,
+	TError,
+	{ pathParams: DeleteIngestionLimitPathParameters },
+	TContext
+> => {
+	return useMutation(getDeleteIngestionLimitMutationOptions(options));
+};
+/**
+ * This endpoint returns an ingestion limit
+ * @summary Get ingestion limit
+ */
+export const getIngestionLimit = (
+	{ limitId }: GetIngestionLimitPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetIngestionLimit200>({
+		url: `/api/v2/gateway/ingestion_limits/${limitId}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetIngestionLimitQueryKey = ({
+	limitId,
+}: GetIngestionLimitPathParameters) => {
+	return [`/api/v2/gateway/ingestion_limits/${limitId}`] as const;
+};
+
+export const getGetIngestionLimitQueryOptions = <
+	TData = Awaited<ReturnType<typeof getIngestionLimit>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ limitId }: GetIngestionLimitPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionLimit>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetIngestionLimitQueryKey({ limitId });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getIngestionLimit>>
+	> = ({ signal }) => getIngestionLimit({ limitId }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!limitId,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getIngestionLimit>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetIngestionLimitQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getIngestionLimit>>
+>;
+export type GetIngestionLimitQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get ingestion limit
+ */
+
+export function useGetIngestionLimit<
+	TData = Awaited<ReturnType<typeof getIngestionLimit>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ limitId }: GetIngestionLimitPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionLimit>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetIngestionLimitQueryOptions({ limitId }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get ingestion limit
+ */
+export const invalidateGetIngestionLimit = async (
+	queryClient: QueryClient,
+	{ limitId }: GetIngestionLimitPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetIngestionLimitQueryKey({ limitId }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint updates an ingestion limit
+ * @summary Update ingestion limit
+ */
+export const updateIngestionLimit = (
+	{ limitId }: UpdateIngestionLimitPathParameters,
+	gatewaytypesUpdatableIngestionKeyLimitDTO?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/gateway/ingestion_limits/${limitId}`,
+		method: 'PATCH',
+		headers: { 'Content-Type': 'application/json' },
+		data: gatewaytypesUpdatableIngestionKeyLimitDTO,
+		signal,
+	});
+};
+
+export const getUpdateIngestionLimitMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateIngestionLimit>>,
+		TError,
+		{
+			pathParams: UpdateIngestionLimitPathParameters;
+			data?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateIngestionLimit>>,
+	TError,
+	{
+		pathParams: UpdateIngestionLimitPathParameters;
+		data?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateIngestionLimit'];
+	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 updateIngestionLimit>>,
+		{
+			pathParams: UpdateIngestionLimitPathParameters;
+			data?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateIngestionLimit(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateIngestionLimitMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateIngestionLimit>>
+>;
+export type UpdateIngestionLimitMutationBody =
+	| BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>
+	| undefined;
+export type UpdateIngestionLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update ingestion limit
+ */
+export const useUpdateIngestionLimit = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateIngestionLimit>>,
+		TError,
+		{
+			pathParams: UpdateIngestionLimitPathParameters;
+			data?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateIngestionLimit>>,
+	TError,
+	{
+		pathParams: UpdateIngestionLimitPathParameters;
+		data?: BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateIngestionLimitMutationOptions(options));
+};

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

@@ -0,0 +1,702 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'pnpm generate:api'
+ * SigNoz
+ */
+import { useMutation, useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	ActivateLicense201,
+	DeleteLicensePathParameters,
+	GetActiveLicense200,
+	GetLicense200,
+	GetLicensePathParameters,
+	LicensetypesPostableLicenseDTO,
+	ListLicenses200,
+	RefreshLicensePathParameters,
+	RenderErrorResponseDTO,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
+/**
+ * This endpoint validates the license key with the upstream server and activates the license for the organization.
+ * @deprecated
+ * @summary Activate a license.
+ */
+export const activateLicenseDeprecated = (
+	licensetypesPostableLicenseDTO?: BodyType<LicensetypesPostableLicenseDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v3/licenses`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: licensetypesPostableLicenseDTO,
+		signal,
+	});
+};
+
+export const getActivateLicenseDeprecatedMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof activateLicenseDeprecated>>,
+		TError,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof activateLicenseDeprecated>>,
+	TError,
+	{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+	TContext
+> => {
+	const mutationKey = ['activateLicenseDeprecated'];
+	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 activateLicenseDeprecated>>,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return activateLicenseDeprecated(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ActivateLicenseDeprecatedMutationResult = NonNullable<
+	Awaited<ReturnType<typeof activateLicenseDeprecated>>
+>;
+export type ActivateLicenseDeprecatedMutationBody =
+	| BodyType<LicensetypesPostableLicenseDTO>
+	| undefined;
+export type ActivateLicenseDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Activate a license.
+ */
+export const useActivateLicenseDeprecated = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof activateLicenseDeprecated>>,
+		TError,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof activateLicenseDeprecated>>,
+	TError,
+	{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+	TContext
+> => {
+	return useMutation(getActivateLicenseDeprecatedMutationOptions(options));
+};
+/**
+ * This endpoint refreshes the active license of the organization from the upstream server.
+ * @deprecated
+ * @summary Refresh a license.
+ */
+export const refreshLicenseDeprecated = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v3/licenses`,
+		method: 'PUT',
+		signal,
+	});
+};
+
+export const getRefreshLicenseDeprecatedMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof refreshLicenseDeprecated>>,
+		TError,
+		void,
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof refreshLicenseDeprecated>>,
+	TError,
+	void,
+	TContext
+> => {
+	const mutationKey = ['refreshLicenseDeprecated'];
+	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 refreshLicenseDeprecated>>,
+		void
+	> = () => {
+		return refreshLicenseDeprecated();
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type RefreshLicenseDeprecatedMutationResult = NonNullable<
+	Awaited<ReturnType<typeof refreshLicenseDeprecated>>
+>;
+
+export type RefreshLicenseDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Refresh a license.
+ */
+export const useRefreshLicenseDeprecated = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof refreshLicenseDeprecated>>,
+		TError,
+		void,
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof refreshLicenseDeprecated>>,
+	TError,
+	void,
+	TContext
+> => {
+	return useMutation(getRefreshLicenseDeprecatedMutationOptions(options));
+};
+/**
+ * This endpoint lists all the licenses of the organization.
+ * @summary List licenses.
+ */
+export const listLicenses = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListLicenses200>({
+		url: `/api/v4/licenses`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListLicensesQueryKey = () => {
+	return [`/api/v4/licenses`] as const;
+};
+
+export const getListLicensesQueryOptions = <
+	TData = Awaited<ReturnType<typeof listLicenses>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listLicenses>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListLicensesQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listLicenses>>> = ({
+		signal,
+	}) => listLicenses(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listLicenses>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListLicensesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listLicenses>>
+>;
+export type ListLicensesQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List licenses.
+ */
+
+export function useListLicenses<
+	TData = Awaited<ReturnType<typeof listLicenses>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listLicenses>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListLicensesQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List licenses.
+ */
+export const invalidateListLicenses = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListLicensesQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint validates the license key with the upstream server and activates the license for the organization.
+ * @summary Activate a license.
+ */
+export const activateLicense = (
+	licensetypesPostableLicenseDTO?: BodyType<LicensetypesPostableLicenseDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ActivateLicense201>({
+		url: `/api/v4/licenses`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: licensetypesPostableLicenseDTO,
+		signal,
+	});
+};
+
+export const getActivateLicenseMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof activateLicense>>,
+		TError,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof activateLicense>>,
+	TError,
+	{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+	TContext
+> => {
+	const mutationKey = ['activateLicense'];
+	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 activateLicense>>,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return activateLicense(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ActivateLicenseMutationResult = NonNullable<
+	Awaited<ReturnType<typeof activateLicense>>
+>;
+export type ActivateLicenseMutationBody =
+	| BodyType<LicensetypesPostableLicenseDTO>
+	| undefined;
+export type ActivateLicenseMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Activate a license.
+ */
+export const useActivateLicense = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof activateLicense>>,
+		TError,
+		{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof activateLicense>>,
+	TError,
+	{ data?: BodyType<LicensetypesPostableLicenseDTO> },
+	TContext
+> => {
+	return useMutation(getActivateLicenseMutationOptions(options));
+};
+/**
+ * This endpoint deletes the license by id. Licenses managed by SigNoz Cloud cannot be deleted.
+ * @summary Delete a license.
+ */
+export const deleteLicense = (
+	{ id }: DeleteLicensePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v4/licenses/${id}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteLicenseMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteLicense>>,
+		TError,
+		{ pathParams: DeleteLicensePathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteLicense>>,
+	TError,
+	{ pathParams: DeleteLicensePathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteLicense'];
+	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 deleteLicense>>,
+		{ pathParams: DeleteLicensePathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteLicense(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteLicenseMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteLicense>>
+>;
+
+export type DeleteLicenseMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete a license.
+ */
+export const useDeleteLicense = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteLicense>>,
+		TError,
+		{ pathParams: DeleteLicensePathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteLicense>>,
+	TError,
+	{ pathParams: DeleteLicensePathParameters },
+	TContext
+> => {
+	return useMutation(getDeleteLicenseMutationOptions(options));
+};
+/**
+ * This endpoint gets the license by id.
+ * @summary Get a license.
+ */
+export const getLicense = (
+	{ id }: GetLicensePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetLicense200>({
+		url: `/api/v4/licenses/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetLicenseQueryKey = ({ id }: GetLicensePathParameters) => {
+	return [`/api/v4/licenses/${id}`] as const;
+};
+
+export const getGetLicenseQueryOptions = <
+	TData = Awaited<ReturnType<typeof getLicense>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetLicensePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getLicense>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetLicenseQueryKey({ id });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getLicense>>> = ({
+		signal,
+	}) => getLicense({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<Awaited<ReturnType<typeof getLicense>>, TError, TData> & {
+		queryKey: QueryKey;
+	};
+};
+
+export type GetLicenseQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getLicense>>
+>;
+export type GetLicenseQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get a license.
+ */
+
+export function useGetLicense<
+	TData = Awaited<ReturnType<typeof getLicense>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetLicensePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getLicense>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetLicenseQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get a license.
+ */
+export const invalidateGetLicense = async (
+	queryClient: QueryClient,
+	{ id }: GetLicensePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetLicenseQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint refreshes the active license of the organization from the upstream server.
+ * @summary Refresh a license.
+ */
+export const refreshLicense = (
+	{ id }: RefreshLicensePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v4/licenses/${id}`,
+		method: 'PUT',
+		signal,
+	});
+};
+
+export const getRefreshLicenseMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof refreshLicense>>,
+		TError,
+		{ pathParams: RefreshLicensePathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof refreshLicense>>,
+	TError,
+	{ pathParams: RefreshLicensePathParameters },
+	TContext
+> => {
+	const mutationKey = ['refreshLicense'];
+	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 refreshLicense>>,
+		{ pathParams: RefreshLicensePathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return refreshLicense(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type RefreshLicenseMutationResult = NonNullable<
+	Awaited<ReturnType<typeof refreshLicense>>
+>;
+
+export type RefreshLicenseMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Refresh a license.
+ */
+export const useRefreshLicense = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof refreshLicense>>,
+		TError,
+		{ pathParams: RefreshLicensePathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof refreshLicense>>,
+	TError,
+	{ pathParams: RefreshLicensePathParameters },
+	TContext
+> => {
+	return useMutation(getRefreshLicenseMutationOptions(options));
+};
+/**
+ * This endpoint gets the active license of the organization.
+ * @summary Get the active license.
+ */
+export const getActiveLicense = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetActiveLicense200>({
+		url: `/api/v4/licenses/active`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetActiveLicenseQueryKey = () => {
+	return [`/api/v4/licenses/active`] as const;
+};
+
+export const getGetActiveLicenseQueryOptions = <
+	TData = Awaited<ReturnType<typeof getActiveLicense>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getActiveLicense>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetActiveLicenseQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getActiveLicense>>> = ({
+		signal,
+	}) => getActiveLicense(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getActiveLicense>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetActiveLicenseQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getActiveLicense>>
+>;
+export type GetActiveLicenseQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get the active license.
+ */
+
+export function useGetActiveLicense<
+	TData = Awaited<ReturnType<typeof getActiveLicense>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getActiveLicense>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetActiveLicenseQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get the active license.
+ */
+export const invalidateGetActiveLicense = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetActiveLicenseQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -0,0 +1,396 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'pnpm generate:api'
+ * SigNoz
+ */
+import { useMutation, useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	PrometheusErrorResponseSchemaDTO,
+	PrometheusQueryParams,
+	PrometheusQueryPostParams,
+	PrometheusQueryRangeParams,
+	PrometheusQueryRangePostParams,
+	PrometheusSuccessResponseSchemaDTO,
+	RenderErrorResponseDTO,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
+/**
+ * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
+ * @summary Prometheus instant query
+ */
+export const prometheusQuery = (
+	params: PrometheusQueryParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
+		url: `/prometheus/api/v1/query`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getPrometheusQueryQueryKey = (params?: PrometheusQueryParams) => {
+	return [`/prometheus/api/v1/query`, ...(params ? [params] : [])] as const;
+};
+
+export const getPrometheusQueryQueryOptions = <
+	TData = Awaited<ReturnType<typeof prometheusQuery>>,
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+>(
+	params: PrometheusQueryParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof prometheusQuery>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getPrometheusQueryQueryKey(params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof prometheusQuery>>> = ({
+		signal,
+	}) => prometheusQuery(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof prometheusQuery>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type PrometheusQueryQueryResult = NonNullable<
+	Awaited<ReturnType<typeof prometheusQuery>>
+>;
+export type PrometheusQueryQueryError = ErrorType<
+	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
+>;
+
+/**
+ * @summary Prometheus instant query
+ */
+
+export function usePrometheusQuery<
+	TData = Awaited<ReturnType<typeof prometheusQuery>>,
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+>(
+	params: PrometheusQueryParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof prometheusQuery>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getPrometheusQueryQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Prometheus instant query
+ */
+export const invalidatePrometheusQuery = async (
+	queryClient: QueryClient,
+	params: PrometheusQueryParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getPrometheusQueryQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
+ * @summary Prometheus instant query
+ */
+export const prometheusQueryPost = (
+	params: PrometheusQueryPostParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
+		url: `/prometheus/api/v1/query`,
+		method: 'POST',
+		params,
+		signal,
+	});
+};
+
+export const getPrometheusQueryPostMutationOptions = <
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof prometheusQueryPost>>,
+		TError,
+		{ params: PrometheusQueryPostParams },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof prometheusQueryPost>>,
+	TError,
+	{ params: PrometheusQueryPostParams },
+	TContext
+> => {
+	const mutationKey = ['prometheusQueryPost'];
+	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 prometheusQueryPost>>,
+		{ params: PrometheusQueryPostParams }
+	> = (props) => {
+		const { params } = props ?? {};
+
+		return prometheusQueryPost(params);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PrometheusQueryPostMutationResult = NonNullable<
+	Awaited<ReturnType<typeof prometheusQueryPost>>
+>;
+
+export type PrometheusQueryPostMutationError = ErrorType<
+	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
+>;
+
+/**
+ * @summary Prometheus instant query
+ */
+export const usePrometheusQueryPost = <
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof prometheusQueryPost>>,
+		TError,
+		{ params: PrometheusQueryPostParams },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof prometheusQueryPost>>,
+	TError,
+	{ params: PrometheusQueryPostParams },
+	TContext
+> => {
+	return useMutation(getPrometheusQueryPostMutationOptions(options));
+};
+/**
+ * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
+ * @summary Prometheus range query
+ */
+export const prometheusQueryRange = (
+	params: PrometheusQueryRangeParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
+		url: `/prometheus/api/v1/query_range`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getPrometheusQueryRangeQueryKey = (
+	params?: PrometheusQueryRangeParams,
+) => {
+	return [
+		`/prometheus/api/v1/query_range`,
+		...(params ? [params] : []),
+	] as const;
+};
+
+export const getPrometheusQueryRangeQueryOptions = <
+	TData = Awaited<ReturnType<typeof prometheusQueryRange>>,
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+>(
+	params: PrometheusQueryRangeParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof prometheusQueryRange>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getPrometheusQueryRangeQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof prometheusQueryRange>>
+	> = ({ signal }) => prometheusQueryRange(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof prometheusQueryRange>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type PrometheusQueryRangeQueryResult = NonNullable<
+	Awaited<ReturnType<typeof prometheusQueryRange>>
+>;
+export type PrometheusQueryRangeQueryError = ErrorType<
+	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
+>;
+
+/**
+ * @summary Prometheus range query
+ */
+
+export function usePrometheusQueryRange<
+	TData = Awaited<ReturnType<typeof prometheusQueryRange>>,
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+>(
+	params: PrometheusQueryRangeParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof prometheusQueryRange>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getPrometheusQueryRangeQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Prometheus range query
+ */
+export const invalidatePrometheusQueryRange = async (
+	queryClient: QueryClient,
+	params: PrometheusQueryRangeParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getPrometheusQueryRangeQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
+ * @summary Prometheus range query
+ */
+export const prometheusQueryRangePost = (
+	params: PrometheusQueryRangePostParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PrometheusSuccessResponseSchemaDTO>({
+		url: `/prometheus/api/v1/query_range`,
+		method: 'POST',
+		params,
+		signal,
+	});
+};
+
+export const getPrometheusQueryRangePostMutationOptions = <
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof prometheusQueryRangePost>>,
+		TError,
+		{ params: PrometheusQueryRangePostParams },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof prometheusQueryRangePost>>,
+	TError,
+	{ params: PrometheusQueryRangePostParams },
+	TContext
+> => {
+	const mutationKey = ['prometheusQueryRangePost'];
+	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 prometheusQueryRangePost>>,
+		{ params: PrometheusQueryRangePostParams }
+	> = (props) => {
+		const { params } = props ?? {};
+
+		return prometheusQueryRangePost(params);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PrometheusQueryRangePostMutationResult = NonNullable<
+	Awaited<ReturnType<typeof prometheusQueryRangePost>>
+>;
+
+export type PrometheusQueryRangePostMutationError = ErrorType<
+	PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO
+>;
+
+/**
+ * @summary Prometheus range query
+ */
+export const usePrometheusQueryRangePost = <
+	TError = ErrorType<PrometheusErrorResponseSchemaDTO | RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof prometheusQueryRangePost>>,
+		TError,
+		{ params: PrometheusQueryRangePostParams },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof prometheusQueryRangePost>>,
+	TError,
+	{ params: PrometheusQueryRangePostParams },
+	TContext
+> => {
+	return useMutation(getPrometheusQueryRangePostMutationOptions(options));
+};

frontend/src/api/generated/services/quick-filter/index.ts

@@ -0,0 +1,316 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'pnpm generate:api'
+ * SigNoz
+ */
+import { useMutation, useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	GetQuickFilters200,
+	GetQuickFiltersPathParameters,
+	ListQuickFilters200,
+	QuickfiltertypesUpdatableQuickFiltersDTO,
+	RenderErrorResponseDTO,
+	UpdateQuickFiltersPathParameters,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
+/**
+ * Returns the org's quick filters for every source, each filter as a telemetry field key.
+ * @summary List quick filters
+ */
+export const listQuickFilters = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListQuickFilters200>({
+		url: `/api/v2/quick_filters`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListQuickFiltersQueryKey = () => {
+	return [`/api/v2/quick_filters`] as const;
+};
+
+export const getListQuickFiltersQueryOptions = <
+	TData = Awaited<ReturnType<typeof listQuickFilters>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listQuickFilters>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListQuickFiltersQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listQuickFilters>>> = ({
+		signal,
+	}) => listQuickFilters(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listQuickFilters>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListQuickFiltersQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listQuickFilters>>
+>;
+export type ListQuickFiltersQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List quick filters
+ */
+
+export function useListQuickFilters<
+	TData = Awaited<ReturnType<typeof listQuickFilters>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listQuickFilters>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListQuickFiltersQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List quick filters
+ */
+export const invalidateListQuickFilters = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListQuickFiltersQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Returns the org's quick filters for one source, each filter as a telemetry field key.
+ * @summary Get a source's quick filters
+ */
+export const getQuickFilters = (
+	{ source }: GetQuickFiltersPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetQuickFilters200>({
+		url: `/api/v2/quick_filters/${source}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetQuickFiltersQueryKey = ({
+	source,
+}: GetQuickFiltersPathParameters) => {
+	return [`/api/v2/quick_filters/${source}`] as const;
+};
+
+export const getGetQuickFiltersQueryOptions = <
+	TData = Awaited<ReturnType<typeof getQuickFilters>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ source }: GetQuickFiltersPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getQuickFilters>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetQuickFiltersQueryKey({ source });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getQuickFilters>>> = ({
+		signal,
+	}) => getQuickFilters({ source }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!source,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getQuickFilters>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetQuickFiltersQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getQuickFilters>>
+>;
+export type GetQuickFiltersQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get a source's quick filters
+ */
+
+export function useGetQuickFilters<
+	TData = Awaited<ReturnType<typeof getQuickFilters>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ source }: GetQuickFiltersPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getQuickFilters>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetQuickFiltersQueryOptions({ source }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get a source's quick filters
+ */
+export const invalidateGetQuickFilters = async (
+	queryClient: QueryClient,
+	{ source }: GetQuickFiltersPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetQuickFiltersQueryKey({ source }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Replaces the org's quick filters for the source named in the path.
+ * @summary Update quick filters
+ */
+export const updateQuickFilters = (
+	{ source }: UpdateQuickFiltersPathParameters,
+	quickfiltertypesUpdatableQuickFiltersDTO?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/quick_filters/${source}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: quickfiltertypesUpdatableQuickFiltersDTO,
+		signal,
+	});
+};
+
+export const getUpdateQuickFiltersMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateQuickFilters>>,
+		TError,
+		{
+			pathParams: UpdateQuickFiltersPathParameters;
+			data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateQuickFilters>>,
+	TError,
+	{
+		pathParams: UpdateQuickFiltersPathParameters;
+		data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateQuickFilters'];
+	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 updateQuickFilters>>,
+		{
+			pathParams: UpdateQuickFiltersPathParameters;
+			data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateQuickFilters(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateQuickFiltersMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateQuickFilters>>
+>;
+export type UpdateQuickFiltersMutationBody =
+	| BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>
+	| undefined;
+export type UpdateQuickFiltersMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update quick filters
+ */
+export const useUpdateQuickFilters = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateQuickFilters>>,
+		TError,
+		{
+			pathParams: UpdateQuickFiltersPathParameters;
+			data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateQuickFilters>>,
+	TError,
+	{
+		pathParams: UpdateQuickFiltersPathParameters;
+		data?: BodyType<QuickfiltertypesUpdatableQuickFiltersDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateQuickFiltersMutationOptions(options));
+};

frontend/src/api/v1/dashboards/create.ts

@@ -1,23 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/dashboard/create';
-import { Dashboard } from 'types/api/dashboard/getAll';
-
-const create = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/dashboards', {
-			...props,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default create;

frontend/src/api/v1/dashboards/getAll.ts

@@ -1,19 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { Dashboard, PayloadProps } from 'types/api/dashboard/getAll';
-
-const getAll = async (): Promise<SuccessResponseV2<Dashboard[]>> => {
-	try {
-		const response = await axios.get<PayloadProps>('/dashboards');
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getAll;

frontend/src/api/v1/dashboards/id/delete.ts

@@ -1,21 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/dashboard/delete';
-
-const deleteDashboard = async (
-	props: Props,
-): Promise<SuccessResponseV2<null>> => {
-	try {
-		const response = await axios.delete<PayloadProps>(`/dashboards/${props.id}`);
-		return {
-			httpStatusCode: response.status,
-			data: null,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default deleteDashboard;

frontend/src/api/v1/dashboards/id/lock.ts

@@ -1,23 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/dashboard/lockUnlock';
-
-const lock = async (props: Props): Promise<SuccessResponseV2<null>> => {
-	try {
-		const response = await axios.put<PayloadProps>(
-			`/dashboards/${props.id}/lock`,
-			{ lock: props.lock },
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default lock;

frontend/src/api/v3/licenses/active/get.ts

@@ -1,25 +0,0 @@
-import { ApiV3Instance as axios } from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import {
-	LicenseEventQueueResModel,
-	PayloadProps,
-} from 'types/api/licensesV3/getActive';
-
-const getActive = async (): Promise<
-	SuccessResponseV2<LicenseEventQueueResModel>
-> => {
-	try {
-		const response = await axios.get<PayloadProps>('/licenses/active');
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getActive;

frontend/src/api/v3/licenses/post.ts

@@ -1,24 +0,0 @@
-import { ApiV3Instance as axios } from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/licenses/apply';
-
-const apply = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/licenses', {
-			key: props.key,
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default apply;

frontend/src/api/v3/licenses/put.ts

@@ -1,20 +0,0 @@
-import { ApiV3Instance as axios } from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps } from 'types/api/licenses/apply';
-
-const apply = async (): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.put<PayloadProps>('/licenses');
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default apply;

frontend/src/app/AppPageProviders.tsx

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { KeyboardHotkeysProvider } from 'hooks/hotkeys/useKeyboardHotkeys';
+import { ResourceProvider } from 'hooks/useResourceAttribute';
+import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
+import {
+	QueryBuilderContext,
+	QueryBuilderProvider,
+} from 'providers/QueryBuilder';
+import { QueryBuilderContextType } from 'types/common/queryBuilder';
+
+import { AppLayer } from './types';
+
+export interface AppPageProvidersProps {
+	children: ReactNode;
+	layout: AppLayer;
+	/** When set, replaces `QueryBuilderProvider` with a fixed context value. */
+	queryBuilder?: Partial<QueryBuilderContextType>;
+}
+
+/**
+ * The layers a routed page renders in, below `PrivateRoute` and inside the app
+ * chrome. A new provider belongs here when only pages need it, or when it has to
+ * sit inside `AppLayout`.
+ *
+ * One ordering constraint: `AppLayout` calls `useKeyboardHotkeys`, so the
+ * hotkeys provider has to stay above the layout. The rest of the order is the
+ * one `AppRoutes` has, kept as-is so a story and a route render the same tree.
+ */
+function AppPageProviders({
+	children,
+	layout,
+	queryBuilder,
+}: AppPageProvidersProps): JSX.Element {
+	const hotkeys = (
+		<KeyboardHotkeysProvider>
+			<>
+				{layout(<PreferenceContextProvider>{children}</PreferenceContextProvider>)}
+			</>
+		</KeyboardHotkeysProvider>
+	);
+
+	return (
+		<ResourceProvider>
+			{queryBuilder ? (
+				<QueryBuilderContext.Provider
+					value={queryBuilder as QueryBuilderContextType}
+				>
+					{hotkeys}
+				</QueryBuilderContext.Provider>
+			) : (
+				<QueryBuilderProvider>{hotkeys}</QueryBuilderProvider>
+			)}
+		</ResourceProvider>
+	);
+}
+
+AppPageProviders.defaultProps = {
+	queryBuilder: undefined,
+};
+
+export default AppPageProviders;

frontend/src/app/AppProviders.tsx

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { HelmetProvider } from 'react-helmet-async';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+// eslint-disable-next-line no-restricted-imports
+import { Store } from 'redux';
+import { GlobalTimeStoreAdapter } from 'components/GlobalTimeStoreAdapter/GlobalTimeStoreAdapter';
+import { ThemeProvider } from 'hooks/useDarkMode';
+import TimezoneProvider from 'providers/Timezone';
+
+import { AppLayer } from './types';
+
+export interface AppProvidersProps {
+	children: ReactNode;
+	store: Store;
+	queryClient: QueryClient;
+	appContext: AppLayer;
+	searchParams: AppLayer;
+}
+
+/**
+ * The layers that exist before the app knows anything. Mounted for the whole
+ * session, including while `AppProvider` is still fetching the user and the boot
+ * spinner is on screen, and never remounted after that.
+ *
+ * A new provider belongs here only if it holds process-wide state that does not
+ * depend on the user, the license or the route. One that fetches on mount would
+ * fire unauthenticated from here; put it in `AppShell` or lower.
+ */
+function AppProviders({
+	children,
+	store,
+	queryClient,
+	appContext,
+	searchParams,
+}: AppProvidersProps): JSX.Element {
+	return (
+		<HelmetProvider>
+			{searchParams(
+				<ThemeProvider>
+					<TimezoneProvider>
+						<QueryClientProvider client={queryClient}>
+							<Provider store={store}>
+								<GlobalTimeStoreAdapter />
+								{appContext(children)}
+							</Provider>
+						</QueryClientProvider>
+					</TimezoneProvider>
+				</ThemeProvider>,
+			)}
+		</HelmetProvider>
+	);
+}
+
+export default AppProviders;

frontend/src/app/AppShell.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { ConfigProvider } from 'antd';
+import { useThemeConfig } from 'hooks/useDarkMode';
+import { NotificationProvider } from 'hooks/useNotifications';
+import { CmdKProvider } from 'providers/cmdKProvider';
+import { ErrorModalProvider } from 'providers/ErrorModalProvider';
+
+import { AppLayer } from './types';
+
+export interface AppShellProps {
+	children: ReactNode;
+	router: AppLayer;
+	/** Mounted beside the routed content: the command palette and its siblings. */
+	overlays?: ReactNode;
+}
+
+/**
+ * The layers between a resolved session and a page. Mounted once the boot
+ * fetches settle, above `PrivateRoute`, so it also covers the redirects and the
+ * not-found route, and it survives every navigation.
+ *
+ * A new provider belongs here if it needs the router or the user and has to
+ * outlive the page: a global overlay, a shortcut host, anything one route opens
+ * and the next one keeps.
+ *
+ * `ConfigProvider` reads `useThemeConfig`, which needs `ThemeProvider` above it,
+ * so the antd theme is settled here instead of by the caller.
+ */
+function AppShell({ children, router, overlays }: AppShellProps): JSX.Element {
+	const themeConfig = useThemeConfig();
+
+	return (
+		<ConfigProvider theme={themeConfig}>
+			{router(
+				<CmdKProvider>
+					<NotificationProvider>
+						<ErrorModalProvider>
+							{overlays}
+							{children}
+						</ErrorModalProvider>
+					</NotificationProvider>
+				</CmdKProvider>,
+			)}
+		</ConfigProvider>
+	);
+}
+
+AppShell.defaultProps = {
+	overlays: undefined,
+};
+
+export default AppShell;

frontend/src/app/types.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+
+export type AppLayer = (children: ReactNode) => ReactNode;

frontend/src/assets/CustomIcons/ApacheIcon.tsx

@@ -1,176 +0,0 @@
-export default function ApacheIcon(): JSX.Element {
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 14 14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M8.7112 1.05739C8.3796 1.30831 8.08524 1.60498 7.83691 1.93853L8.17977 2.58567C8.40218 2.26279 8.64677 1.95576 8.91177 1.66681C8.93063 1.64581 8.94091 1.63596 8.94091 1.63596L8.91177 1.66681C8.66003 1.95965 8.43081 2.27111 8.22606 2.59853C8.67305 2.56672 9.11808 2.51165 9.55934 2.43353C9.60936 2.25525 9.62374 2.06886 9.60168 1.88502C9.57962 1.70118 9.52154 1.52349 9.43077 1.3621C9.43077 1.3621 9.09991 0.828957 8.7112 1.05739Z"
-				fill="url(#paint0_linear_2061_4195)"
-			/>
-			<path
-				d="M7.55932 6.49365L7.42432 6.51722L7.49332 6.50651C7.51432 6.50265 7.53703 6.49837 7.55932 6.49365Z"
-				fill="#BE202E"
-			/>
-			<path
-				opacity="0.35"
-				d="M7.55932 6.49365L7.42432 6.51722L7.49332 6.50651C7.51432 6.50265 7.53703 6.49837 7.55932 6.49365Z"
-				fill="#BE202E"
-			/>
-			<path
-				d="M7.67407 5.92858L7.6955 5.92558C7.72464 5.9213 7.75336 5.91616 7.78122 5.91016L7.67493 5.92816L7.67407 5.92858Z"
-				fill="#BE202E"
-			/>
-			<path
-				opacity="0.35"
-				d="M7.67407 5.92858L7.6955 5.92558C7.72464 5.9213 7.75336 5.91616 7.78122 5.91016L7.67493 5.92816L7.67407 5.92858Z"
-				fill="#BE202E"
-			/>
-			<path
-				d="M7.16872 4.25736C7.273 4.0625 7.37858 3.87221 7.48543 3.6865C7.59629 3.49393 7.70829 3.3075 7.82143 3.12721L7.84115 3.09507C7.95315 2.91793 8.066 2.74779 8.17972 2.58464L7.83686 1.9375L7.75886 2.03393C7.65986 2.15736 7.55743 2.29107 7.452 2.43036C7.33329 2.58893 7.21115 2.75779 7.08729 2.93564C6.97286 3.09979 6.85672 3.27164 6.74058 3.44993C6.64158 3.60121 6.54258 3.75721 6.444 3.91707L6.43286 3.93507L6.879 4.8145C6.97443 4.62707 7.071 4.44136 7.16872 4.25736Z"
-				fill="url(#paint1_linear_2061_4195)"
-			/>
-			<path
-				d="M5.13606 9.22519C5.07692 9.38748 5.01763 9.55305 4.95821 9.72191L4.95563 9.72919L4.93035 9.80076C4.89049 9.91476 4.85535 10.015 4.77563 10.2503C4.92444 10.3467 5.0416 10.4847 5.11249 10.6472C5.10283 10.4581 5.01907 10.2804 4.87935 10.1526C5.16043 10.1981 5.44862 10.1654 5.71236 10.0581C5.97609 9.95074 6.20521 9.77291 6.37463 9.54405C6.40102 9.50088 6.42464 9.45607 6.44535 9.40991C6.37459 9.49741 6.28141 9.56408 6.17575 9.6028C6.07008 9.64152 5.95589 9.65084 5.84535 9.62976C6.20937 9.49539 6.51802 9.24316 6.72221 8.91319C6.76978 8.83691 6.81563 8.75376 6.86278 8.66162C6.6974 8.84328 6.48756 8.97872 6.25393 9.05463C6.02029 9.13053 5.77091 9.14426 5.53035 9.09448L5.16949 9.13391C5.15706 9.16434 5.14721 9.19476 5.13606 9.22519Z"
-				fill="url(#paint2_linear_2061_4195)"
-			/>
-			<path
-				d="M5.30448 8.417C5.38248 8.21528 5.46276 8.01157 5.54533 7.80586C5.62419 7.60871 5.70519 7.41057 5.78833 7.21143C5.87148 7.01228 5.95633 6.81228 6.0429 6.61143C6.1309 6.40828 6.22076 6.20557 6.31248 6.00328C6.40419 5.801 6.49633 5.60257 6.5889 5.408C6.62262 5.33714 6.65662 5.26643 6.6909 5.19586C6.75005 5.07414 6.80962 4.95343 6.86962 4.83371C6.87262 4.82728 6.87605 4.82086 6.87948 4.81443L6.4329 3.93457L6.41105 3.97014C6.30733 4.14157 6.20362 4.313 6.10205 4.49128C6.00048 4.66957 5.89848 4.853 5.80205 5.03814C5.7189 5.19443 5.63776 5.35157 5.55862 5.50957L5.51148 5.606C5.41419 5.80614 5.32633 5.99943 5.24705 6.18543C5.15705 6.396 5.07762 6.59686 5.00876 6.788C4.9629 6.91357 4.92305 7.03486 4.88362 7.151C4.85233 7.25043 4.82276 7.34986 4.79448 7.451C4.72762 7.68471 4.67048 7.91771 4.62305 8.15L5.07133 9.035C5.13076 8.87671 5.19162 8.71614 5.2539 8.55328L5.30448 8.417Z"
-				fill="url(#paint3_linear_2061_4195)"
-			/>
-			<path
-				d="M4.615 8.18082C4.55868 8.46014 4.51975 8.74268 4.49843 9.02682C4.49843 9.03668 4.49843 9.04653 4.49629 9.05639C4.3547 8.8778 4.1801 8.72808 3.982 8.61539C4.24526 8.95089 4.41819 9.34823 4.48429 9.76953C4.28982 9.78674 4.0942 9.75338 3.91643 9.67268C4.05057 9.80984 4.21714 9.91096 4.40072 9.96668C4.14974 10.0146 3.9168 10.1307 3.72743 10.3022C3.97375 10.178 4.25059 10.1271 4.525 10.1557C4.21858 11.024 3.91129 11.9827 3.604 13.0001C3.64664 12.988 3.6856 12.9655 3.71739 12.9346C3.74918 12.9037 3.7728 12.8654 3.78615 12.8231C3.841 12.6388 4.20443 11.4298 4.77443 9.84068L4.82372 9.70439L4.83743 9.66625C4.89772 9.49968 4.96015 9.32968 5.02472 9.15625L5.06758 9.03753V9.03539L4.62143 8.15039C4.61929 8.16025 4.61672 8.17053 4.615 8.18082Z"
-				fill="url(#paint4_linear_2061_4195)"
-			/>
-			<path
-				d="M6.94843 4.89059L6.90986 4.96987C6.87129 5.04959 6.83214 5.13102 6.79243 5.21416C6.74957 5.30416 6.70671 5.3963 6.66386 5.49059C6.64157 5.53816 6.621 5.58573 6.59743 5.63416C6.53057 5.7793 6.46286 5.92916 6.39429 6.08373C6.30857 6.27402 6.22286 6.47173 6.13714 6.67687C6.054 6.87259 5.96971 7.07516 5.88429 7.28459C5.80314 7.48459 5.721 7.68973 5.63786 7.90002C5.56386 8.08888 5.48914 8.28273 5.41371 8.48159C5.40986 8.49145 5.40643 8.50087 5.403 8.51073C5.32814 8.70873 5.25257 8.91187 5.17629 9.12016L5.17114 9.1343L5.532 9.09487L5.51057 9.09102C6.039 8.98351 6.52026 8.7126 6.88629 8.31659C7.0686 8.1182 7.22683 7.89896 7.35771 7.66345C7.47147 7.46033 7.57252 7.25036 7.66029 7.03473C7.74386 6.83245 7.824 6.61387 7.90114 6.37645C7.79448 6.43086 7.68084 6.47037 7.56343 6.49388C7.54157 6.49859 7.52057 6.50287 7.49657 6.50673C7.47257 6.51059 7.45071 6.51445 7.42757 6.51745C7.80325 6.36305 8.10458 6.06924 8.26843 5.69759C8.12155 5.79773 7.95733 5.86966 7.78414 5.90973C7.75586 5.91616 7.72757 5.92087 7.69843 5.92516L7.677 5.92816C7.80484 5.87656 7.92565 5.80903 8.03657 5.72716C8.05843 5.71087 8.07943 5.69373 8.1 5.67573C8.13129 5.64873 8.16086 5.62045 8.18914 5.59002C8.20714 5.57116 8.22471 5.55145 8.24186 5.53087C8.28293 5.48179 8.32059 5.42996 8.35457 5.37573C8.36529 5.35859 8.376 5.34145 8.38629 5.32345C8.39957 5.29773 8.41243 5.27245 8.42486 5.24716C8.481 5.13402 8.526 5.03288 8.56157 4.94459C8.57957 4.90173 8.595 4.85888 8.60829 4.82116C8.61386 4.80616 8.619 4.79116 8.62371 4.7783C8.63786 4.73545 8.64943 4.69816 8.65843 4.66473C8.66941 4.62595 8.67828 4.58661 8.685 4.54688C8.67015 4.5586 8.65454 4.56934 8.63829 4.57902C8.4822 4.66169 8.31419 4.71953 8.14029 4.75045H8.13257L8.08157 4.75859L8.09057 4.75473L6.957 4.87902L6.94843 4.89059Z"
-				fill="url(#paint5_linear_2061_4195)"
-			/>
-			<path
-				d="M8.22475 2.59871C8.12404 2.75343 8.01389 2.92914 7.89561 3.12843L7.87675 3.16014C7.77446 3.33157 7.66604 3.52114 7.55147 3.72886C7.45261 3.90771 7.34989 4.10014 7.24332 4.30614C7.15018 4.48586 7.05418 4.67671 6.95532 4.87871L8.08889 4.75443C8.33914 4.65567 8.55501 4.48583 8.70989 4.26586C8.74804 4.211 8.78618 4.15357 8.82432 4.09443C8.94089 3.91271 9.05489 3.71257 9.15689 3.51371C9.25018 3.33322 9.33429 3.14813 9.40889 2.95914C9.44758 2.86102 9.48092 2.76087 9.50875 2.65914C9.52932 2.58028 9.54561 2.50571 9.55804 2.43457C9.11675 2.51236 8.67172 2.56715 8.22475 2.59871Z"
-				fill="url(#paint6_linear_2061_4195)"
-			/>
-			<path
-				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
-				fill="#BE202E"
-			/>
-			<path
-				opacity="0.35"
-				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
-				fill="#BE202E"
-			/>
-			<path
-				d="M7.49234 6.50635C7.46963 6.5102 7.44648 6.51406 7.42334 6.51706C7.44648 6.51406 7.47134 6.5102 7.49234 6.50635Z"
-				fill="url(#paint7_linear_2061_4195)"
-			/>
-			<defs>
-				<linearGradient
-					id="paint0_linear_2061_4195"
-					x1="7.26579"
-					y1="1.16584"
-					x2="9.7782"
-					y2="0.46843"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop stopColor="#F69923" />
-					<stop offset="0.312" stopColor="#F79A23" />
-					<stop offset="0.838" stopColor="#E97826" />
-				</linearGradient>
-				<linearGradient
-					id="paint1_linear_2061_4195"
-					x1="1.76109"
-					y1="12.4382"
-					x2="6.87606"
-					y2="1.48267"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.323" stopColor="#9E2064" />
-					<stop offset="0.63" stopColor="#C92037" />
-					<stop offset="0.751" stopColor="#CD2335" />
-					<stop offset="1" stopColor="#E97826" />
-				</linearGradient>
-				<linearGradient
-					id="paint2_linear_2061_4195"
-					x1="3.47784"
-					y1="11.6287"
-					x2="6.5258"
-					y2="5.10046"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop stopColor="#282662" />
-					<stop offset="0.095" stopColor="#662E8D" />
-					<stop offset="0.788" stopColor="#9F2064" />
-					<stop offset="0.949" stopColor="#CD2032" />
-				</linearGradient>
-				<linearGradient
-					id="paint3_linear_2061_4195"
-					x1="1.94596"
-					y1="11.7748"
-					x2="7.06094"
-					y2="0.819304"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.323" stopColor="#9E2064" />
-					<stop offset="0.63" stopColor="#C92037" />
-					<stop offset="0.751" stopColor="#CD2335" />
-					<stop offset="1" stopColor="#E97826" />
-				</linearGradient>
-				<linearGradient
-					id="paint4_linear_2061_4195"
-					x1="2.46768"
-					y1="11.0455"
-					x2="5.15578"
-					y2="5.28798"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop stopColor="#282662" />
-					<stop offset="0.095" stopColor="#662E8D" />
-					<stop offset="0.788" stopColor="#9F2064" />
-					<stop offset="0.949" stopColor="#CD2032" />
-				</linearGradient>
-				<linearGradient
-					id="paint5_linear_2061_4195"
-					x1="3.08048"
-					y1="12.3044"
-					x2="8.19546"
-					y2="1.3489"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.323" stopColor="#9E2064" />
-					<stop offset="0.63" stopColor="#C92037" />
-					<stop offset="0.751" stopColor="#CD2335" />
-					<stop offset="1" stopColor="#E97826" />
-				</linearGradient>
-				<linearGradient
-					id="paint6_linear_2061_4195"
-					x1="2.70679"
-					y1="12.9581"
-					x2="7.82195"
-					y2="2.00223"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.323" stopColor="#9E2064" />
-					<stop offset="0.63" stopColor="#C92037" />
-					<stop offset="0.751" stopColor="#CD2335" />
-					<stop offset="1" stopColor="#E97826" />
-				</linearGradient>
-				<linearGradient
-					id="paint7_linear_2061_4195"
-					x1="3.41759"
-					y1="12.4619"
-					x2="8.53277"
-					y2="1.50629"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.323" stopColor="#9E2064" />
-					<stop offset="0.63" stopColor="#C92037" />
-					<stop offset="0.751" stopColor="#CD2335" />
-					<stop offset="1" stopColor="#E97826" />
-				</linearGradient>
-			</defs>
-		</svg>
-	);
-}

frontend/src/assets/CustomIcons/DockerIcon.tsx

@@ -1,28 +0,0 @@
-export default function DockerIcon(): JSX.Element {
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 14 14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<g clipPath="url(#clip0_2061_4220)">
-				<path
-					d="M13.574 5.82107C13.2652 5.60679 12.5575 5.52644 12.0042 5.63358C11.9398 5.09788 11.6439 4.62915 11.1292 4.21399L10.8332 3.99971L10.6274 4.30774C10.37 4.70951 10.2413 5.27198 10.2799 5.80768C10.2928 5.99517 10.3571 6.32998 10.5502 6.62461C10.37 6.73175 9.99686 6.86567 9.50789 6.86567H0.204685L0.17895 6.97281C0.0888774 7.5085 0.0888774 9.18254 1.14401 10.4682C1.9418 11.4458 3.12561 11.9414 4.68258 11.9414C8.05386 11.9414 10.5502 10.3209 11.7211 7.38797C12.1843 7.40136 13.1751 7.38797 13.677 6.38354C13.6898 6.35676 13.7156 6.30319 13.8056 6.10231L13.8571 5.99517L13.574 5.82107ZM7.6421 2.04443H6.22668V3.38367H7.6421V2.04443ZM7.6421 3.65151H6.22668V4.99074H7.6421V3.65151ZM5.96933 3.65151H4.5539V4.99074H5.96933V3.65151ZM4.29655 3.65151H2.88113V4.99074H4.29655V3.65151ZM2.62378 5.25859H1.20835V6.59782H2.62378V5.25859ZM4.29655 5.25859H2.88113V6.59782H4.29655V5.25859ZM5.96933 5.25859H4.5539V6.59782H5.96933V5.25859ZM7.6421 5.25859H6.22668V6.59782H7.6421V5.25859ZM9.31488 5.25859H7.89945V6.59782H9.31488V5.25859Z"
-					fill="#2396ED"
-				/>
-			</g>
-			<defs>
-				<clipPath id="clip0_2061_4220">
-					<rect
-						width="13.7143"
-						height="13.7143"
-						fill="white"
-						transform="translate(0.142822 0.143066)"
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	);
-}

frontend/src/assets/CustomIcons/ElasticSearchIcon.tsx

@@ -1,36 +0,0 @@
-export default function ElasticSearchIcon(): JSX.Element {
-	return (
-		<svg
-			width="16"
-			height="16"
-			viewBox="0 0 16 16"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M6.38041 6.94508L9.70241 8.45858L13.0524 5.52158C13.1019 5.27892 13.1255 5.03171 13.1229 4.78408C13.1236 3.9846 12.8681 3.20592 12.3941 2.56216C11.92 1.9184 11.2522 1.44339 10.4885 1.20675C9.72487 0.970101 8.9055 0.984259 8.15047 1.24714C7.39544 1.51003 6.74446 2.00782 6.29291 2.66758L5.73291 5.56008L6.38041 6.94508Z"
-				fill="#FED10A"
-			/>
-			<path
-				d="M2.943 10.4593C2.89356 10.7062 2.86994 10.9575 2.8725 11.2093C2.87361 12.012 3.13177 12.7932 3.60915 13.4385C4.08654 14.0838 4.75804 14.5592 5.52528 14.7952C6.29252 15.0311 7.11514 15.0151 7.87262 14.7495C8.63009 14.4839 9.28259 13.9827 9.7345 13.3193L10.2845 10.4398L9.55 9.02928L6.215 7.50928L2.943 10.4593Z"
-				fill="#24BBB1"
-			/>
-			<path
-				d="M2.92394 4.71302L5.19994 5.25002L5.69994 2.66552C5.39077 2.43015 5.01365 2.30134 4.62509 2.29839C4.23654 2.29544 3.8575 2.41852 3.54479 2.64916C3.23208 2.8798 3.00256 3.20559 2.89063 3.57768C2.77869 3.94978 2.79039 4.34813 2.92394 4.71302Z"
-				fill="#EF5098"
-			/>
-			<path
-				d="M2.72503 5.2583C2.23266 5.42016 1.80253 5.73058 1.49379 6.14687C1.18505 6.56317 1.01286 7.0649 1.00091 7.58305C0.988962 8.1012 1.13784 8.61033 1.42706 9.04041C1.71628 9.4705 2.13164 9.80042 2.61603 9.9848L5.81003 7.0998L5.22653 5.8498L2.72503 5.2583Z"
-				fill="#17A8E0"
-			/>
-			<path
-				d="M10.312 13.3197C10.6209 13.5543 10.9975 13.6825 11.3853 13.6851C11.7732 13.6877 12.1514 13.5646 12.4634 13.3342C12.7755 13.1038 13.0044 12.7785 13.116 12.407C13.2276 12.0356 13.2159 11.6379 13.0825 11.2737L10.812 10.7412L10.312 13.3197Z"
-				fill="#93C83E"
-			/>
-			<path
-				d="M10.7735 10.145L13.2735 10.7285C13.7666 10.5672 14.1976 10.257 14.507 9.84058C14.8165 9.42415 14.9891 8.922 15.0013 8.40333C15.0134 7.88467 14.8643 7.375 14.5747 6.94457C14.2851 6.51414 13.8691 6.18413 13.384 6L10.1135 8.8665L10.7735 10.145Z"
-				fill="#0779A1"
-			/>
-		</svg>
-	);
-}

frontend/src/assets/CustomIcons/HerokuIcon.tsx

@@ -1,27 +0,0 @@
-function HerokuIcon(): JSX.Element {
-	return (
-		<svg
-			width="16"
-			height="16"
-			viewBox="0 0 16 16"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<g clipPath="url(#clip0_2061_4245)">
-				<path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M13.6285 0H2.10787C1.31283 0 0.666748 0.644312 0.666748 1.44112V14.5602C0.666748 15.3557 1.31283 16 2.10787 16H13.6285C14.4237 16 15.0678 15.3557 15.0678 14.5602V1.44112C15.0678 0.644312 14.4237 0 13.6285 0ZM14.2677 14.5602C14.2677 14.9135 13.9815 15.1994 13.6285 15.1994H2.10787C1.75506 15.1994 1.46688 14.9135 1.46688 14.5602V1.44112C1.46688 1.08654 1.75506 0.800133 2.10787 0.800133H13.6285C13.9815 0.800133 14.2677 1.08654 14.2677 1.44112V14.5602ZM4.26699 13.6009L6.06823 12.0002L4.26699 10.3999V13.6009ZM10.7719 7.11485C10.4481 6.78927 9.8569 6.40038 8.86819 6.40038C7.78342 6.40038 6.66611 6.68302 5.86752 6.94177V2.40082H4.26704V9.33907L5.39807 8.82667C5.41688 8.81826 7.24025 8.00086 8.86819 8.00086C9.68027 8.00086 9.86022 8.44796 9.86885 8.82158V13.6009H11.4676V8.801C11.4693 8.6983 11.4592 7.81051 10.7719 7.11485ZM8.66761 5.00027H10.2681C10.9912 4.1811 11.3597 3.30903 11.4677 2.40066H9.86881C9.69063 3.30726 9.29643 4.17424 8.66761 5.00027Z"
-					fill="#6762A6"
-				/>
-			</g>
-			<defs>
-				<clipPath id="clip0_2061_4245">
-					<rect width="16" height="16" fill="white" />
-				</clipPath>
-			</defs>
-		</svg>
-	);
-}
-
-export default HerokuIcon;

frontend/src/assets/CustomIcons/MongoDBIcon.tsx

@@ -1,68 +0,0 @@
-export default function MongoDBIcon(): JSX.Element {
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 14 14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M7.26568 13.0004L6.94382 12.8937C6.94382 12.8937 6.98668 11.2651 6.39739 11.1507C6.01168 10.7015 6.45439 -8.02403 7.86439 11.0868C7.59687 11.2225 7.39217 11.4564 7.29311 11.7395C7.24001 12.1577 7.23082 12.5803 7.26568 13.0004Z"
-				fill="url(#paint0_linear_2061_4238)"
-			/>
-			<path
-				d="M7.43957 11.4272C8.29654 10.7821 8.95282 9.90701 9.33214 8.90369C9.71147 7.90037 9.79826 6.81 9.58243 5.75931C8.95243 2.98002 7.46058 2.06631 7.29986 1.71745C7.1612 1.50022 7.04284 1.27068 6.94629 1.03174L7.065 8.7756C7.065 8.7756 6.819 11.1422 7.43957 11.4272Z"
-				fill="url(#paint1_linear_2061_4238)"
-			/>
-			<path
-				d="M6.78015 11.5296C6.78015 11.5296 4.15687 9.74286 4.30858 6.58214C4.32273 5.62928 4.54121 4.69054 4.94926 3.82935C5.3573 2.96816 5.94542 2.20456 6.67387 1.59014C6.759 1.51782 6.82663 1.42715 6.87168 1.32493C6.91674 1.22272 6.93805 1.11163 6.93401 1C7.0973 1.35143 7.07072 6.247 7.08787 6.81957C7.1543 9.04686 6.96401 11.1091 6.78015 11.5296Z"
-				fill="url(#paint2_linear_2061_4238)"
-			/>
-			<defs>
-				<linearGradient
-					id="paint0_linear_2061_4238"
-					x1="5.1021"
-					y1="7.10853"
-					x2="8.80138"
-					y2="8.36386"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop offset="0.231" stopColor="#999875" />
-					<stop offset="0.563" stopColor="#9B9977" />
-					<stop offset="0.683" stopColor="#A09F7E" />
-					<stop offset="0.768" stopColor="#A9A889" />
-					<stop offset="0.837" stopColor="#B7B69A" />
-					<stop offset="0.896" stopColor="#C9C7B0" />
-					<stop offset="0.948" stopColor="#DEDDCB" />
-					<stop offset="0.994" stopColor="#F8F6EB" />
-					<stop offset="1" stopColor="#FBF9EF" />
-				</linearGradient>
-				<linearGradient
-					id="paint1_linear_2061_4238"
-					x1="6.45855"
-					y1="0.976404"
-					x2="8.09399"
-					y2="11.1888"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop stopColor="#48A547" />
-					<stop offset="1" stopColor="#3F9143" />
-				</linearGradient>
-				<linearGradient
-					id="paint2_linear_2061_4238"
-					x1="4.08293"
-					y1="6.89501"
-					x2="8.47176"
-					y2="5.42519"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop stopColor="#41A247" />
-					<stop offset="0.352" stopColor="#4BA74B" />
-					<stop offset="0.956" stopColor="#67B554" />
-					<stop offset="1" stopColor="#69B655" />
-				</linearGradient>
-			</defs>
-		</svg>
-	);
-}

frontend/src/assets/CustomIcons/NginxIcon.tsx

@@ -1,22 +0,0 @@
-function NginxIcon(): JSX.Element {
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 14 14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M6.97775 1H7.00561C7.14837 1.068 7.28743 1.14353 7.42218 1.22629C8.97332 2.11829 10.5245 3.01057 12.0756 3.90314C12.1356 3.93517 12.1846 3.9845 12.2163 4.04472C12.2479 4.10493 12.2607 4.17327 12.253 4.24086C12.2496 6.12186 12.253 8.00243 12.2509 9.88257C12.2307 9.9723 12.1759 10.0504 12.0983 10.0999C10.4489 11.0496 8.79932 11.9987 7.14961 12.9473C7.10963 12.9778 7.06144 12.9956 7.01125 12.9984C6.96106 13.0012 6.91118 12.9889 6.86803 12.9631C5.21661 12.0163 3.56675 11.0677 1.91846 10.1174C1.86489 10.0921 1.82003 10.0515 1.78952 10.0007C1.75901 9.94988 1.74423 9.89119 1.74703 9.832C1.74703 7.95143 1.74703 6.071 1.74703 4.19071C1.74299 4.13178 1.75661 4.07299 1.78616 4.02184C1.8157 3.97069 1.85983 3.92951 1.91289 3.90357C3.46203 3.01271 5.01118 2.12129 6.56032 1.22929C6.69832 1.15043 6.83375 1.06686 6.97775 1Z"
-				fill="#019639"
-			/>
-			<path
-				d="M3.90007 4.65924C3.90007 6.21039 3.90007 7.76167 3.90007 9.3131C3.89809 9.39901 3.91326 9.48446 3.94468 9.56445C3.9761 9.64444 4.02315 9.71736 4.08307 9.77896C4.19794 9.89243 4.34824 9.96309 4.5089 9.97916C4.66956 9.99522 4.83087 9.95572 4.96593 9.86724C5.05634 9.80581 5.13035 9.72321 5.18152 9.62662C5.23269 9.53003 5.25946 9.4224 5.2595 9.3131C5.2595 8.19024 5.25736 7.06739 5.2595 5.94453C6.28322 7.17024 7.30907 8.39424 8.33707 9.61653C8.4799 9.76122 8.65676 9.86772 8.85145 9.92628C9.04614 9.98484 9.25242 9.99357 9.45136 9.95167C9.59184 9.924 9.71973 9.85198 9.81624 9.74622C9.91275 9.64045 9.97278 9.50652 9.9875 9.3641C9.98979 7.78096 9.98979 6.19796 9.9875 4.6151C9.97275 4.44614 9.8952 4.28884 9.77016 4.17425C9.64512 4.05966 9.48168 3.99609 9.31207 3.99609C9.14247 3.99609 8.97902 4.05966 8.85399 4.17425C8.72895 4.28884 8.6514 4.44614 8.63665 4.6151C8.63665 5.75596 8.62979 6.89553 8.63665 8.03596C7.63122 6.85053 6.63822 5.65481 5.63665 4.4651C5.5046 4.29578 5.32979 4.16474 5.13023 4.08549C4.93067 4.00624 4.71359 3.98165 4.50136 4.01424C4.34059 4.03214 4.19154 4.10704 4.08124 4.22536C3.97093 4.34369 3.90666 4.49761 3.90007 4.65924Z"
-				fill="white"
-			/>
-		</svg>
-	);
-}
-
-export default NginxIcon;

frontend/src/assets/CustomIcons/RedisIcon.tsx

@@ -1,60 +0,0 @@
-export default function RedisIcon(): JSX.Element {
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 14 14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<g clipPath="url(#clip0_2061_4282)">
-				<path
-					d="M13.3198 10.158C12.5879 10.5395 8.79654 12.0984 7.98938 12.5192C7.18221 12.94 6.73382 12.936 6.09616 12.6312C5.45855 12.3263 1.42388 10.6966 0.697072 10.3492C0.333858 10.1756 0.142822 10.029 0.142822 9.8906V8.50438C0.142822 8.50438 5.3955 7.3609 6.24348 7.05667C7.09141 6.75244 7.38563 6.74145 8.10723 7.00578C8.82895 7.2702 13.1439 8.0487 13.8571 8.30992L13.8568 9.67653C13.8569 9.81356 13.6923 9.96388 13.3198 10.158Z"
-					fill="#912626"
-				/>
-				<path
-					d="M13.3195 8.77972C12.5877 9.16104 8.79642 10.72 7.98926 11.1407C7.18215 11.5616 6.73376 11.5575 6.09615 11.2527C5.45849 10.9481 1.42397 9.31805 0.697221 8.97086C-0.029529 8.62345 -0.0447433 8.38436 0.66915 8.10482C1.38304 7.82518 5.39544 6.25098 6.24353 5.94675C7.09145 5.64263 7.38561 5.63154 8.10722 5.89597C8.82888 6.16029 12.5975 7.66034 13.3106 7.9215C14.024 8.18298 14.0513 8.39829 13.3195 8.77972Z"
-					fill="#C6302B"
-				/>
-				<path
-					d="M13.3198 7.91483C12.5879 8.29637 8.79654 9.85519 7.98938 10.2762C7.18221 10.6968 6.73382 10.6928 6.09616 10.388C5.4585 10.0833 1.42388 8.45338 0.697072 8.10597C0.333858 7.9324 0.142822 7.78604 0.142822 7.64756V6.26119C0.142822 6.26119 5.3955 5.11776 6.24348 4.81353C7.09141 4.50929 7.38563 4.49826 8.10723 4.76263C8.829 5.02701 13.144 5.80535 13.8571 6.06661L13.8568 7.43338C13.8569 7.57036 13.6923 7.72069 13.3198 7.91483Z"
-					fill="#912626"
-				/>
-				<path
-					d="M13.3195 6.53701C12.5877 6.91844 8.79642 8.47726 7.98926 8.89817C7.18215 9.31892 6.73376 9.3148 6.09615 9.00998C5.45849 8.70537 1.42397 7.07541 0.697221 6.72816C-0.029529 6.38085 -0.0447433 6.14171 0.66915 5.86207C1.38304 5.58258 5.39549 4.00828 6.24353 3.7041C7.09145 3.39992 7.38561 3.38889 8.10722 3.65326C8.82888 3.91758 12.5975 5.41753 13.3106 5.6788C14.024 5.94023 14.0513 6.15558 13.3195 6.53701Z"
-					fill="#C6302B"
-				/>
-				<path
-					d="M13.3198 5.58855C12.5879 5.96998 8.79654 7.5289 7.98938 7.94987C7.18221 8.37062 6.73382 8.36649 6.09616 8.06167C5.4585 7.75701 1.42388 6.12705 0.697072 5.7798C0.333858 5.60607 0.142822 5.45965 0.142822 5.32133V3.9349C0.142822 3.9349 5.3955 2.79153 6.24348 2.48735C7.09141 2.18307 7.38563 2.17214 8.10723 2.43646C8.829 2.70083 13.144 3.47917 13.8571 3.74044L13.8568 5.10715C13.8569 5.24403 13.6923 5.39435 13.3198 5.58855Z"
-					fill="#912626"
-				/>
-				<path
-					d="M13.3195 4.21078C12.5876 4.59221 8.79639 6.15113 7.98923 6.57188C7.18212 6.99263 6.73373 6.98851 6.09612 6.68385C5.45852 6.37903 1.42394 4.74917 0.697248 4.40187C-0.0295558 4.05462 -0.0447165 3.81542 0.669123 3.53583C1.38302 3.2563 5.39546 1.68221 6.2435 1.37792C7.09143 1.07369 7.38559 1.06276 8.1072 1.32714C8.82886 1.59151 12.5975 3.09146 13.3106 3.35272C14.0239 3.61394 14.0513 3.82935 13.3195 4.21078Z"
-					fill="#C6302B"
-				/>
-				<path
-					d="M8.67572 2.86218L7.49661 2.9846L7.23267 3.61974L6.80635 2.91099L5.44483 2.78863L6.46076 2.42226L6.15594 1.85986L7.1071 2.23186L8.00378 1.93829L7.76142 2.51981L8.67572 2.86218ZM7.16228 5.94351L4.96172 5.03081L8.11494 4.54679L7.16228 5.94351ZM4.11138 3.21522C5.04219 3.21522 5.79674 3.50772 5.79674 3.86847C5.79674 4.22933 5.04219 4.52177 4.11138 4.52177C3.18058 4.52177 2.42603 4.22927 2.42603 3.86847C2.42603 3.50772 3.18058 3.21522 4.11138 3.21522Z"
-					fill="white"
-				/>
-				<path
-					d="M10.0693 3.0357L11.9355 3.77316L10.0709 4.50993L10.0693 3.0357Z"
-					fill="#621B1C"
-				/>
-				<path
-					d="M8.00464 3.85234L10.0693 3.03564L10.0709 4.50988L9.86844 4.58906L8.00464 3.85234Z"
-					fill="#9A2928"
-				/>
-			</g>
-			<defs>
-				<clipPath id="clip0_2061_4282">
-					<rect
-						width="13.7143"
-						height="13.7143"
-						fill="white"
-						transform="translate(0.142822 0.143066)"
-					/>
-				</clipPath>
-			</defs>
-		</svg>
-	);
-}

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -57,8 +57,8 @@ function MenuItemGenerator({
 
 			handleExplorerTabChange(currentPanelType, {
 				query,
-				name,
-				id,
+				viewName: name,
+				viewKey: id,
 			});
 		},
 		[viewData, handleExplorerTabChange],

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

@@ -1,585 +0,0 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import configureStore from 'redux-mock-store';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import VariableItem from '../../../container/DashboardContainer/DashboardVariablesSelection/VariableItem';
-
-// Mock the dashboard variables query
-jest.mock('api/dashboard/variables/dashboardVariablesQuery', () => ({
-	__esModule: true,
-	default: jest.fn(() =>
-		Promise.resolve({
-			payload: {
-				variableValues: ['option1', 'option2', 'option3', 'option4'],
-			},
-		}),
-	),
-}));
-
-// Mock scrollIntoView which isn't available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-// Constants
-const TEST_VARIABLE_NAME = 'test_variable';
-const TEST_VARIABLE_ID = 'test-var-id';
-
-// Create a mock store
-const mockStore = configureStore([])({
-	globalTime: {
-		minTime: Date.now() - 3600000, // 1 hour ago
-		maxTime: Date.now(),
-	},
-});
-
-// Test data
-const createMockVariable = (
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable => ({
-	id: TEST_VARIABLE_ID,
-	name: TEST_VARIABLE_NAME,
-	description: 'Test variable description',
-	type: 'QUERY',
-	queryValue: 'SELECT DISTINCT value FROM table',
-	customValue: '',
-	sort: 'ASC',
-	multiSelect: false,
-	showALLOption: true,
-	selectedValue: [],
-	allSelected: false,
-	...overrides,
-});
-
-function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: { retry: false },
-		},
-	});
-
-	return (
-		<Provider store={mockStore}>
-			<QueryClientProvider client={queryClient}>
-				<VirtuosoMockContext.Provider
-					value={{ viewportHeight: 300, itemHeight: 40 }}
-				>
-					{children}
-				</VirtuosoMockContext.Provider>
-			</QueryClientProvider>
-		</Provider>
-	);
-}
-
-describe('VariableItem Integration Tests', () => {
-	let user: ReturnType<typeof userEvent.setup>;
-	let mockOnValueUpdate: jest.Mock;
-
-	beforeEach(() => {
-		user = userEvent.setup();
-		mockOnValueUpdate = jest.fn();
-		jest.clearAllMocks();
-	});
-
-	// ===== 1. INTEGRATION WITH CUSTOMSELECT =====
-	describe('CustomSelect Integration (VI)', () => {
-		it('VI-01: Single select variable integration', async () => {
-			const variable = createMockVariable({
-				multiSelect: false,
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should render with CustomSelect
-			const combobox = screen.getByRole('combobox');
-			expect(combobox).toBeInTheDocument();
-
-			await user.click(combobox);
-
-			await waitFor(() => {
-				expect(screen.getByText('option1')).toBeInTheDocument();
-				expect(screen.getByText('option2')).toBeInTheDocument();
-				expect(screen.getByText('option3')).toBeInTheDocument();
-			});
-
-			// Select an option
-			const option1 = screen.getByText('option1');
-			await user.click(option1);
-
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				TEST_VARIABLE_NAME,
-				TEST_VARIABLE_ID,
-				'option1',
-				false,
-			);
-		});
-	});
-
-	// ===== 2. INTEGRATION WITH CUSTOMMULTISELECT =====
-	describe('CustomMultiSelect Integration (VI)', () => {
-		it('VI-02: Multi select variable integration', async () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3,option4',
-				showALLOption: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should render with CustomMultiSelect
-			const combobox = screen.getByRole('combobox');
-			expect(combobox).toBeInTheDocument();
-
-			await user.click(combobox);
-
-			await waitFor(() => {
-				// Should show ALL option
-				expect(screen.getByText('ALL')).toBeInTheDocument();
-			});
-
-			// Wait for Virtuoso to render the custom options
-			await waitFor(
-				() => {
-					expect(screen.getByText('option1')).toBeInTheDocument();
-					expect(screen.getByText('option2')).toBeInTheDocument();
-					expect(screen.getByText('option3')).toBeInTheDocument();
-					expect(screen.getByText('option4')).toBeInTheDocument();
-				},
-				{ timeout: 5000 },
-			);
-		});
-	});
-
-	// ===== 3. TEXTBOX VARIABLE TYPE =====
-	describe('Textbox Variable Integration', () => {
-		it('VI-03: Textbox variable handling', async () => {
-			const variable = createMockVariable({
-				type: 'TEXTBOX',
-				selectedValue: 'initial-value',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should render a regular input
-			const textInput = screen.getByDisplayValue('initial-value');
-			expect(textInput).toBeInTheDocument();
-			expect(textInput.tagName).toBe('INPUT');
-
-			// Clear and type new value
-			await user.clear(textInput);
-			await user.type(textInput, 'new-text-value');
-
-			// Blur the input to trigger the value update
-			await user.tab();
-
-			// Should call onValueUpdate after blur
-			await waitFor(
-				() => {
-					expect(mockOnValueUpdate).toHaveBeenCalledWith(
-						TEST_VARIABLE_NAME,
-						TEST_VARIABLE_ID,
-						'new-text-value',
-						false,
-					);
-				},
-				{ timeout: 1000 },
-			);
-		});
-	});
-
-	// ===== 4. VALUE PERSISTENCE AND STATE MANAGEMENT =====
-	describe('Value Persistence and State Management', () => {
-		it('VI-04: All selected state handling', () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'service1,service2,service3',
-				selectedValue: ['service1', 'service2', 'service3'],
-				allSelected: true,
-				showALLOption: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should show "ALL" instead of individual values
-			expect(screen.getByText('ALL')).toBeInTheDocument();
-		});
-
-		it('VI-05: Dropdown behavior with temporary selections', async () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'item1,item2,item3',
-				selectedValue: ['item1'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			// Wait for dropdown to open
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toBeInTheDocument();
-			});
-
-			// Verify the component renders without crashing
-			expect(combobox).toBeInTheDocument();
-		});
-	});
-
-	// ===== 6. ACCESSIBILITY AND USER EXPERIENCE =====
-	describe('Accessibility and User Experience', () => {
-		it('VI-06: Variable description tooltip', async () => {
-			const variable = createMockVariable({
-				description: 'This variable controls the service selection',
-				type: 'CUSTOM',
-				customValue: 'service1,service2',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should show info icon
-			const infoIcon = document.querySelector('.info-icon');
-			expect(infoIcon).toBeInTheDocument();
-
-			// Hover to show tooltip
-			if (infoIcon) {
-				await user.hover(infoIcon);
-			}
-
-			await waitFor(() => {
-				expect(
-					screen.getByText('This variable controls the service selection'),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('VI-07: Variable name display', () => {
-			const variable = createMockVariable({
-				name: 'service_name',
-				type: 'CUSTOM',
-				customValue: 'service1,service2',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should show variable name with $ prefix
-			expect(screen.getByText('$service_name')).toBeInTheDocument();
-		});
-
-		it('VI-08: Max tag count behavior', async () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'tag1,tag2,tag3,tag4,tag5,tag6,tag7',
-				selectedValue: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6', 'tag7'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Wait for component to render
-			await waitFor(() => {
-				const combobox = screen.getByRole('combobox');
-				expect(combobox).toBeInTheDocument();
-			});
-
-			// Should show limited number of tags with "+ X more"
-			const tags = document.querySelectorAll('.ant-select-selection-item');
-
-			// The component should render without crashing
-			expect(tags.length).toBeGreaterThanOrEqual(0);
-		});
-	});
-
-	// ===== 8. SEARCH INTERACTION TESTS =====
-	describe('Search Interaction Tests', () => {
-		it('VI-14: Search persistence across dropdown open/close', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-				multiSelect: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			await waitFor(() => {
-				expect(screen.getByText('ALL')).toBeInTheDocument();
-			});
-
-			const searchInput = document.querySelector(
-				'.ant-select-selection-search-input',
-			);
-			expect(searchInput).toBeInTheDocument();
-
-			if (searchInput) {
-				await user.type(searchInput, 'search-text');
-			}
-
-			// Verify search text is in input
-			await waitFor(() => {
-				expect(searchInput).toHaveValue('search-text');
-			});
-
-			// Press Escape to close dropdown
-			await user.keyboard('{Escape}');
-
-			// Dropdown should close and search text should be cleared
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
-				expect(searchInput).toHaveValue('');
-			});
-		});
-	});
-
-	// ===== 9. ADVANCED KEYBOARD NAVIGATION =====
-	describe('Advanced Keyboard Navigation (VI)', () => {
-		it('VI-15: Shift + Arrow + Del chip deletion in multiselect', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-				multiSelect: true,
-				selectedValue: ['option1', 'option2', 'option3'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			// Navigate to chips using arrow keys
-			await user.keyboard('{ArrowLeft}');
-
-			// Use Shift + Arrow to navigate between chips
-			await user.keyboard('{Shift>}{ArrowLeft}{/Shift}');
-
-			// Use Del to delete the active chip
-			await user.keyboard('{Delete}');
-
-			// Note: The component may not immediately call onValueUpdate
-			// This test verifies the chip deletion behavior
-			await waitFor(() => {
-				// Check if a chip was removed from the selection
-				const selectionItems = document.querySelectorAll(
-					'.ant-select-selection-item',
-				);
-				expect(selectionItems.length).toBeLessThan(3);
-			});
-		});
-	});
-
-	// ===== 11. ADVANCED UI STATES =====
-	describe('Advanced UI States (VI)', () => {
-		it('VI-19: No data with previous value selected in variable', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: '',
-				multiSelect: true,
-				selectedValue: ['previous-value'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Wait for component to initialize
-			await waitFor(() => {
-				const combobox = screen.getByRole('combobox');
-				expect(combobox).toBeInTheDocument();
-			});
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			// Should show no data message (the component may not show this exact text)
-			await waitFor(() => {
-				// Check if dropdown is empty or shows no data indication
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toBeInTheDocument();
-			});
-
-			// Verify the component renders without crashing
-			expect(combobox).toBeInTheDocument();
-		});
-
-		it('VI-20: Always editable accessibility in variable', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2',
-				multiSelect: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-
-			// Should be editable
-			expect(combobox).not.toBeDisabled();
-			await user.click(combobox);
-			expect(combobox).toHaveFocus();
-
-			// Should still be interactive
-			expect(combobox).not.toBeDisabled();
-		});
-	});
-
-	// ===== 13. DROPDOWN PERSISTENCE =====
-	describe('Dropdown Persistence (VI)', () => {
-		it('VI-24: Dropdown stays open for non-save actions in variable', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-				multiSelect: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-					/>
-				</TestWrapper>,
-			);
-
-			// Wait for component to initialize
-			await waitFor(() => {
-				const combobox = screen.getByRole('combobox');
-				expect(combobox).toBeInTheDocument();
-			});
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			await waitFor(() => {
-				expect(screen.getByText('ALL')).toBeInTheDocument();
-			});
-
-			// Navigate with arrow keys (non-save action)
-			await user.keyboard('{ArrowDown}');
-			await user.keyboard('{ArrowDown}');
-
-			// Dropdown should still be open
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toBeInTheDocument();
-			});
-
-			// Verify the component renders without crashing
-			expect(combobox).toBeInTheDocument();
-
-			// Only ESC should close the dropdown
-			await user.keyboard('{Escape}');
-
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
-			});
-		});
-	});
-});

frontend/src/components/NewSelect/utils.ts

@@ -1,11 +1,26 @@
-import { uniqueOptions } from 'container/DashboardContainer/DashboardVariablesSelection/util';
-
 import { OptionData } from './types';
 
 export const SPACEKEY = ' ';
 
 export const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
 
+/** De-duplicate options by `value`, keeping the first occurrence. */
+export const uniqueOptions = (options: OptionData[]): OptionData[] => {
+	const deduped: OptionData[] = [];
+	const seenValues = new Set<string>();
+
+	options.forEach((option) => {
+		const value = option.value || '';
+		if (seenValues.has(value)) {
+			return;
+		}
+		seenValues.add(value);
+		deduped.push(option);
+	});
+
+	return deduped;
+};
+
 export const prioritizeOrAddOptionForSingleSelect = (
 	options: OptionData[],
 	value: string,

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import refreshPaymentStatus from 'api/v3/licenses/put';
+import { refreshLicense } from 'api/generated/services/licenses';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { RefreshCcw } from '@signozhq/icons';
@@ -14,17 +14,21 @@ function RefreshPaymentStatus({
 	className?: string;
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
-	const { activeLicenseRefetch } = useAppContext();
+	const { activeLicense, activeLicenseRefetch } = useAppContext();
 
 	const [isLoading, setIsLoading] = useState(false);
 
 	const handleRefreshPaymentStatus = async (): Promise<void> => {
+		if (!activeLicense) {
+			return;
+		}
+
 		setIsLoading(true);
 
 		try {
-			await refreshPaymentStatus();
+			await refreshLicense({ id: activeLicense.id });
 
-			await Promise.all([activeLicenseRefetch()]);
+			activeLicenseRefetch();
 		} catch (e) {
 			console.error(e);
 		}

frontend/src/constants/events.ts

@@ -29,6 +29,7 @@ export enum InfraMonitoringEvents {
 	MetricsView = 'metrics',
 	Total = 'total',
 	Cluster = 'cluster',
+	Container = 'container',
 	DaemonSet = 'daemonSet',
 	Deployment = 'deployment',
 	Job = 'job',

frontend/src/constants/reactQueryKeys.ts

@@ -28,7 +28,6 @@ export const REACT_QUERY_KEY = {
 	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
 	GET_HOST_LIST: 'GET_HOST_LIST',
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
-	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
 	GET_TRACE_V4_WATERFALL: 'GET_TRACE_V4_WATERFALL',
 	GET_TRACE_AGGREGATIONS: 'GET_TRACE_AGGREGATIONS',

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

@@ -1,6 +1,11 @@
 import CreateAlertChannels from 'container/CreateAlertChannels';
 import { ChannelType } from 'container/CreateAlertChannels/config';
-import { GoogleChatInitialConfig } from 'container/CreateAlertChannels/defaults';
+import {
+	GoogleChatInitialConfig,
+	IncidentIOInitialConfig,
+	JiraInitialConfig,
+	JsmOpsInitialConfig,
+} from 'container/CreateAlertChannels/defaults';
 import {
 	googleChatDescriptionDefaultValue,
 	googleChatTitleDefaultValue,
@@ -526,6 +531,335 @@ describe('Create Alert Channel', () => {
 				});
 			});
 		});
+		describe('Jira', () => {
+			const validSite = 'https://acme.atlassian.net';
+
+			const fillRequired = async (
+				user: ReturnType<typeof userEvent.setup>,
+				site: string,
+			): Promise<void> => {
+				await user.type(screen.getByTestId('channel-name-textbox'), 'jira-channel');
+				await user.type(screen.getByTestId('jira-site-textbox'), site);
+				await user.type(screen.getByTestId('jira-email-textbox'), 'me@acme.com');
+				await user.type(screen.getByTestId('jira-api-token-textbox'), 'tok123');
+				await user.type(screen.getByTestId('jira-project-textbox'), 'KAN');
+			};
+
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.Jira} />);
+			});
+
+			it('Should check if the selected item in the type dropdown has text "Jira"', () => {
+				expect(screen.getByText('Jira')).toBeInTheDocument();
+			});
+
+			it('Should check if the Site URL field is displayed properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_jira_site',
+					testId: 'jira-site-textbox',
+				});
+			});
+
+			it('Should prefill the issue type with Task', () => {
+				expect(screen.getByTestId('jira-issue-type-textbox')).toHaveValue('Task');
+			});
+
+			it('Should show the service-account recommendation tip linking to the docs', () => {
+				expect(screen.getByTestId('jira-service-account-tip')).toBeInTheDocument();
+				expect(
+					screen.getByRole('link', { name: 'jira_service_account_tip_link' }),
+				).toHaveAttribute(
+					'href',
+					'https://signoz.io/docs/alerts-management/notification-channel/jira/#use-a-service-account-recommended',
+				);
+			});
+
+			it('Should display an error when the site is not an atlassian.net URL', async () => {
+				const user = userEvent.setup({ delay: null });
+				await fillRequired(user, 'https://example.com');
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'jira_site_invalid',
+					}),
+				);
+			}, 15000);
+
+			it('Should send a jira_configs payload with basic auth', async () => {
+				let requestBody: unknown;
+				server.use(
+					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
+						requestBody = await req.json();
+						return res(
+							ctx.status(201),
+							ctx.json({ status: 'success', data: 'channel created' }),
+						);
+					}),
+				);
+
+				const user = userEvent.setup({ delay: null });
+				await fillRequired(user, validSite);
+				await user.click(screen.getByText('jira_advanced_section'));
+				await user.type(
+					screen.getByTestId('jira-wont-fix-resolution-textbox'),
+					"Won't Do",
+				);
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(successNotification).toHaveBeenCalledWith({
+						message: 'Success',
+						description: 'channel_creation_done',
+					}),
+				);
+
+				expect(requestBody).toStrictEqual({
+					name: 'jira-channel',
+					jira_configs: [
+						{
+							site: validSite,
+							project: 'KAN',
+							issue_type: 'Task',
+							summary: JiraInitialConfig.summary,
+							description: JiraInitialConfig.description,
+							send_resolved: true,
+							wont_fix_resolution: "Won't Do",
+							http_config: {
+								basic_auth: { username: 'me@acme.com', password: 'tok123' },
+							},
+						},
+					],
+				});
+			}, 15000);
+
+			it('Should block save when the reopen window is below the 1m minimum', async () => {
+				const user = userEvent.setup({ delay: null });
+				await fillRequired(user, validSite);
+
+				await user.click(screen.getByText('jira_advanced_section'));
+				await user.type(screen.getByTestId('jira-reopen-duration-textbox'), '30s');
+
+				// the rule surfaces an inline message, not just a red border
+				await expect(
+					screen.findByText('jira_reopen_duration_invalid'),
+				).resolves.toBeInTheDocument();
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'jira_reopen_duration_invalid',
+					}),
+				);
+			}, 15000);
+		});
+		describe('JSM Ops', () => {
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.JsmOps} />);
+			});
+
+			it('Should show "Jira Service Management Ops" as the selected type', () => {
+				expect(screen.getByText('Jira Service Management Ops')).toBeInTheDocument();
+			});
+
+			it('Should display the API key field properly', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_jsmops_api_key',
+					testId: 'jsmops-api-key-textbox',
+				});
+			});
+
+			it('Should show the tip linking to the JSM Ops docs', () => {
+				expect(screen.getByTestId('jsmops-tip')).toBeInTheDocument();
+				expect(
+					screen.getByRole('link', { name: 'jsmops_tip_link' }),
+				).toHaveAttribute(
+					'href',
+					'https://signoz.io/docs/alerts-management/notification-channel/jsm-ops/',
+				);
+			});
+
+			it('Should block save when the API key is missing', async () => {
+				const user = userEvent.setup();
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'jsmops-channel',
+				);
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'api_key_required',
+					}),
+				);
+			});
+
+			it('Should send a jsmops_configs payload with prefilled defaults', async () => {
+				let requestBody: unknown;
+				server.use(
+					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
+						requestBody = await req.json();
+						return res(
+							ctx.status(201),
+							ctx.json({ status: 'success', data: 'channel created' }),
+						);
+					}),
+				);
+
+				const user = userEvent.setup();
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'jsmops-channel',
+				);
+				await user.type(screen.getByTestId('jsmops-api-key-textbox'), 'key-abc');
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(successNotification).toHaveBeenCalledWith({
+						message: 'Success',
+						description: 'channel_creation_done',
+					}),
+				);
+
+				expect(requestBody).toStrictEqual({
+					name: 'jsmops-channel',
+					jsmops_configs: [
+						{
+							api_key: 'key-abc',
+							send_resolved: true,
+							message: JsmOpsInitialConfig.message,
+							description: JsmOpsInitialConfig.description,
+							priority: JsmOpsInitialConfig.priority,
+							tags: JsmOpsInitialConfig.tags?.join(','),
+						},
+					],
+				});
+			});
+		});
+		describe('incident.io', () => {
+			const incidentIOURL =
+				'https://api.incident.io/v2/alert_events/http/01M0D1JNVBGBGVTWX053EM12XV';
+
+			beforeEach(() => {
+				render(<CreateAlertChannels preType={ChannelType.IncidentIO} />);
+			});
+
+			it('Should display the URL and token fields with the docs tip', () => {
+				testLabelInputAndHelpValue({
+					labelText: 'field_incidentio_url',
+					testId: 'incidentio-url-textbox',
+				});
+				testLabelInputAndHelpValue({
+					labelText: 'field_incidentio_token',
+					testId: 'incidentio-token-textbox',
+				});
+				expect(screen.getByTestId('incidentio-tip')).toBeInTheDocument();
+				expect(
+					screen.getByRole('link', { name: 'incidentio_tip_link' }),
+				).toHaveAttribute(
+					'href',
+					'https://signoz.io/docs/alerts-management/notification-channel/incidentio/',
+				);
+			});
+
+			it('Should block save when the URL or token is missing', async () => {
+				const user = userEvent.setup();
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'incidentio-channel',
+				);
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'incidentio_required_fields',
+					}),
+				);
+			});
+
+			it('Should display an error when the URL is not an alert events URL', async () => {
+				const user = userEvent.setup();
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'incidentio-channel',
+				);
+				await user.type(
+					screen.getByTestId('incidentio-url-textbox'),
+					'https://api.incident.io/v2/incidents',
+				);
+				await user.type(screen.getByTestId('incidentio-token-textbox'), 'tok-abc');
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(errorNotification).toHaveBeenCalledWith({
+						message: 'Error',
+						description: 'incidentio_url_invalid',
+					}),
+				);
+			}, 15000);
+
+			it('Should send an incidentio_configs payload with prefilled defaults', async () => {
+				let requestBody: unknown;
+				server.use(
+					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
+						requestBody = await req.json();
+						return res(
+							ctx.status(201),
+							ctx.json({ status: 'success', data: 'channel created' }),
+						);
+					}),
+				);
+
+				const user = userEvent.setup();
+				await user.type(
+					screen.getByTestId('channel-name-textbox'),
+					'incidentio-channel',
+				);
+				await user.type(
+					screen.getByTestId('incidentio-url-textbox'),
+					incidentIOURL,
+				);
+				await user.type(screen.getByTestId('incidentio-token-textbox'), 'tok-abc');
+
+				await user.click(screen.getByTestId('incidentio-metadata-add'));
+				await user.type(screen.getByTestId('incidentio-metadata-key-0'), 'team');
+				await user.type(screen.getByTestId('incidentio-metadata-value-0'), 'core');
+
+				await user.click(screen.getByTestId('save-channel-button'));
+
+				await waitFor(() =>
+					expect(successNotification).toHaveBeenCalledWith({
+						message: 'Success',
+						description: 'channel_creation_done',
+					}),
+				);
+
+				expect(requestBody).toStrictEqual({
+					name: 'incidentio-channel',
+					incidentio_configs: [
+						{
+							url: incidentIOURL,
+							token: 'tok-abc',
+							send_resolved: true,
+							title: IncidentIOInitialConfig.title,
+							description: IncidentIOInitialConfig.description,
+							metadata: { team: 'core' },
+						},
+					],
+				});
+			}, 15000);
+		});
 		describe('Changing the channel type', () => {
 			async function selectType(
 				user: ReturnType<typeof userEvent.setup>,

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

@@ -58,6 +58,111 @@ describe('EditAlertChannels save', () => {
 		expect(edit.calls[0].id).toBe('3');
 	});
 
+	it('blocks jira save when the reopen window is below the 1m minimum', async () => {
+		const edit = mockEditChannel();
+		const jiraInitialValue = {
+			type: 'jira',
+			name: 'jira-channel',
+			site: 'https://acme.atlassian.net',
+			username: 'user@acme.io',
+			password: 'token',
+			project: 'OPS',
+			issue_type: 'Task',
+			send_resolved: true,
+			reopen_duration: '30s',
+		};
+
+		const { unmount } = render(
+			<EditAlertChannels channelId="3" initialValue={jiraInitialValue} />,
+		);
+		const user = userEvent.setup();
+		await user.click(screen.getByTestId('save-channel-button'));
+		expect(edit.calls).toHaveLength(0);
+		unmount();
+
+		render(
+			<EditAlertChannels
+				channelId="3"
+				initialValue={{ ...jiraInitialValue, reopen_duration: '72h' }}
+			/>,
+		);
+		await user.click(screen.getByTestId('save-channel-button'));
+		await waitFor(() => expect(edit.calls).toHaveLength(1));
+	});
+
+	it('preserves the jira wont-fix resolution on save', async () => {
+		const edit = mockEditChannel();
+		render(
+			<EditAlertChannels
+				channelId="3"
+				initialValue={{
+					type: 'jira',
+					name: 'jira-channel',
+					site: 'https://acme.atlassian.net',
+					username: 'user@acme.io',
+					password: 'token',
+					project: 'OPS',
+					issue_type: 'Task',
+					send_resolved: true,
+					wont_fix_resolution: "Won't Do",
+				}}
+			/>,
+		);
+		const user = userEvent.setup();
+		await user.click(screen.getByTestId('save-channel-button'));
+
+		await waitFor(() => expect(edit.calls).toHaveLength(1));
+		expect(edit.calls[0].body).toStrictEqual({
+			name: 'jira-channel',
+			jira_configs: [
+				{
+					site: 'https://acme.atlassian.net',
+					project: 'OPS',
+					issue_type: 'Task',
+					send_resolved: true,
+					wont_fix_resolution: "Won't Do",
+					http_config: {
+						basic_auth: { username: 'user@acme.io', password: 'token' },
+					},
+				},
+			],
+		});
+	});
+
+	it('sends an incidentio_configs payload when editing an incident.io channel', async () => {
+		const edit = mockEditChannel();
+		render(
+			<EditAlertChannels
+				channelId="4"
+				initialValue={{
+					type: 'incidentio',
+					name: 'incidentio-channel',
+					url: 'https://api.incident.io/v2/alert_events/http/01M0D1JNVBGBGVTWX053EM12XV',
+					token: 'tok-abc',
+					send_resolved: true,
+					metadata: { env: 'prod' },
+				}}
+			/>,
+		);
+
+		const user = userEvent.setup();
+		await user.click(screen.getByTestId('save-channel-button'));
+
+		await waitFor(() => expect(edit.calls).toHaveLength(1));
+		expect(edit.calls[0].id).toBe('4');
+		expect(edit.calls[0].body).toStrictEqual({
+			name: 'incidentio-channel',
+			incidentio_configs: [
+				{
+					url: 'https://api.incident.io/v2/alert_events/http/01M0D1JNVBGBGVTWX053EM12XV',
+					token: 'tok-abc',
+					send_resolved: true,
+					metadata: { env: 'prod' },
+				},
+			],
+		});
+	});
+
 	it('persists send_resolved toggle in the edit request', async () => {
 		const edit = mockEditChannel();
 		render(

frontend/src/container/AppLayout/index.tsx

@@ -453,7 +453,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		if (
 			!isFetchingActiveLicense &&
 			!isNull(activeLicense) &&
-			activeLicense?.event_queue?.event === LicenseEvent.DEFAULT
+			activeLicense?.eventQueue?.event === LicenseEvent.DEFAULT
 		) {
 			setShowPaymentFailedWarning(true);
 		}
@@ -820,7 +820,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 								Your bill payment has failed. Your workspace will get suspended on{' '}
 								<span>
 									{getFormattedDateWithMinutes(
-										dayjs(activeLicense?.event_queue?.scheduled_at).unix() || Date.now(),
+										activeLicense?.eventQueue?.scheduledAt
+											? dayjs(activeLicense.eventQueue.scheduledAt).unix()
+											: dayjs().unix(),
 									)}
 									.
 								</span>

frontend/src/container/BillingContainer/BillingContainer.test.tsx

@@ -15,6 +15,11 @@ import { getFormattedDate } from 'utils/timeUtils';
 
 import BillingContainer from './BillingContainer';
 
+jest.mock('hooks/useActiveLicenseKey/useActiveLicenseKey', () => ({
+	__esModule: true,
+	default: jest.fn(() => ({ licenseKey: 'test-key', isLoading: false })),
+}));
+
 window.ResizeObserver =
 	window.ResizeObserver ||
 	jest.fn().mockImplementation(() => ({

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -30,6 +30,7 @@ import useAxiosError from 'hooks/useAxiosError';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEmpty, pick } from 'lodash-es';
+import useActiveLicenseKey from 'hooks/useActiveLicenseKey/useActiveLicenseKey';
 import { useAppContext } from 'providers/App/App';
 import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
@@ -145,6 +146,7 @@ export default function BillingContainer(): JSX.Element {
 		activeLicense,
 		activeLicenseFetchError,
 	} = useAppContext();
+	const { licenseKey } = useActiveLicenseKey();
 	const { notifications } = useNotifications();
 
 	const handleError = useAxiosError();
@@ -207,9 +209,9 @@ export default function BillingContainer(): JSX.Element {
 		isFetching: isFetchingBillingData,
 		data: billingData,
 	} = useQuery([REACT_QUERY_KEY.GET_BILLING_USAGE, user?.id], {
-		queryFn: () => getUsage(activeLicense?.key || ''),
+		queryFn: () => getUsage(licenseKey || ''),
 		onError: handleError,
-		enabled: activeLicense !== null,
+		enabled: !!licenseKey,
 		onSuccess: processUsageData,
 	});
 

frontend/src/container/CreateAlertChannels/config.ts

@@ -105,6 +105,9 @@ export enum ChannelType {
 	Opsgenie = 'opsgenie',
 	MsTeams = 'msteams',
 	GoogleChat = 'googlechat',
+	Jira = 'jira',
+	JsmOps = 'jsmops',
+	IncidentIO = 'incidentio',
 }
 
 // LabelFilterStatement will be used for preparing filter conditions / matchers
@@ -134,3 +137,58 @@ export interface GoogleChatChannel extends Channel {
 	title?: string;
 	text?: string;
 }
+
+// JiraChannel configures the Jira Cloud alert channel. Auth is basic auth
+// (Atlassian account email + API token) carried in username / password.
+export interface JiraChannel extends Channel {
+	// Jira Cloud base URL, e.g. https://acme.atlassian.net
+	site: string;
+	project: string;
+	issue_type: string;
+	// issue title template
+	summary?: string;
+	// issue body template, rendered to rich text server-side
+	description?: string;
+	// basic auth: username is the Atlassian account email, password is the API token
+	username: string;
+	password: string;
+	priority?: string;
+	labels?: string[];
+	resolve_transition?: string;
+	reopen_transition?: string;
+	// issues resolved with this resolution are never reopened; a refire
+	// creates a new issue instead
+	wont_fix_resolution?: string;
+	// duration string, e.g. 72h or 3d
+	reopen_duration?: string;
+}
+
+// IncidentIOChannel configures the incident.io alert channel, backed by an
+// incident.io HTTP alert source (Alert Events V2 API).
+export interface IncidentIOChannel extends Channel {
+	// per-source alert events URL, e.g.
+	// https://api.incident.io/v2/alert_events/http/<source_config_id>
+	url: string;
+	// the alert source's secret token
+	token: string;
+	// alert title template
+	title?: string;
+	// alert body template (markdown, rendered natively by incident.io)
+	description?: string;
+	// extra metadata pairs merged over the alert's labels (channel wins on clash)
+	metadata?: Record<string, string>;
+}
+
+// JsmOpsChannel configures the Jira Service Management Ops alert channel
+// (ex-Opsgenie alert API). Auth is the JSM integration API key.
+export interface JsmOpsChannel extends Channel {
+	api_key: string;
+	// alert title template
+	message?: string;
+	// alert body template (markdown, rendered to HTML server-side)
+	description?: string;
+	// priority template, resolves to P1-P5
+	priority?: string;
+	// tags, joined to a comma-separated string for the backend
+	tags?: string[];
+}

frontend/src/container/CreateAlertChannels/defaults.ts

@@ -2,6 +2,9 @@ import {
 	ChannelType,
 	EmailChannel,
 	GoogleChatChannel,
+	IncidentIOChannel,
+	JiraChannel,
+	JsmOpsChannel,
 	MsTeamsChannel,
 	OpsgenieChannel,
 	PagerChannel,
@@ -47,6 +50,23 @@ export const GoogleChatInitialConfig: Partial<GoogleChatChannel> = {
 {{ end }}`,
 };
 
+// mirrors DefaultJiraSummaryTemplate / DefaultJiraDescriptionTemplate in
+// pkg/types/alertmanagertypes/jira.go, which the backend applies when the
+// summary / description are left empty. The description is markdown here and is
+// wrapped in the ADF status panel + deep-links server-side.
+export const JiraInitialConfig: Partial<JiraChannel> = {
+	issue_type: 'Task',
+	summary: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
+	description: `{{ range .Alerts -}}
+**Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}
+{{ if .Annotations.summary }}
+**Summary:** {{ .Annotations.summary }}
+{{ end }}{{ if .Annotations.description }}
+**Description:** {{ .Annotations.description }}
+{{ end }}
+{{ end }}`,
+};
+
 export const PagerInitialConfig: Partial<PagerChannel> = {
 	description: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
 	{{- if gt (len .CommonLabels) (len .GroupLabels) -}}
@@ -98,6 +118,56 @@ export const OpsgenieInitialConfig: Partial<OpsgenieChannel> = {
 		'{{ if eq (index .Alerts 0).Labels.severity "critical" }}P1{{ else if eq (index .Alerts 0).Labels.severity "warning" }}P2{{ else if eq (index .Alerts 0).Labels.severity "info" }}P3{{ else }}P4{{ end }}',
 };
 
+// mirrors DefaultJSMOpsMessageTemplate / DefaultJSMOpsDescriptionTemplate in
+// pkg/types/alertmanagertypes/jsmops.go, applied by the backend when message /
+// description are left empty. send_resolved is seeded on so JSM alerts close on
+// resolve (the backend cannot default it, see jsmops.go). priority mirrors the
+// Opsgenie template mapping severity to P1-P5.
+export const JsmOpsInitialConfig: Partial<JsmOpsChannel> = {
+	send_resolved: true,
+	message: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
+	description: `{{ range .Alerts -}}
+**Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}
+
+{{ if .Annotations.summary }}**Summary:** {{ .Annotations.summary }}
+
+{{ end }}{{ if .Annotations.description }}**Description:** {{ .Annotations.description }}
+
+{{ end }}{{ if .GeneratorURL }}[View in SigNoz]({{ .GeneratorURL }})
+
+{{ end }}{{ if .Annotations.related_logs }}[View related logs]({{ .Annotations.related_logs }})
+
+{{ end }}{{ if .Annotations.related_traces }}[View related traces]({{ .Annotations.related_traces }})
+
+{{ end }}{{ end }}`,
+	priority:
+		'{{ if eq (index .Alerts 0).Labels.severity "critical" }}P1{{ else if eq (index .Alerts 0).Labels.severity "warning" }}P2{{ else if eq (index .Alerts 0).Labels.severity "info" }}P3{{ else }}P4{{ end }}',
+	tags: ['signoz-alert'],
+};
+
+// mirrors DefaultIncidentIOTitleTemplate / DefaultIncidentIODescriptionTemplate
+// in pkg/types/alertmanagertypes/incidentio.go, applied by the backend when
+// title / description are left empty. send_resolved is seeded on so incident.io
+// alerts resolve with the rule (the backend cannot default it).
+export const IncidentIOInitialConfig: Partial<IncidentIOChannel> = {
+	send_resolved: true,
+	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
+	description: `{{ range .Alerts -}}
+**Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}
+
+{{ if .Annotations.summary }}**Summary:** {{ .Annotations.summary }}
+
+{{ end }}{{ if .Annotations.description }}**Description:** {{ .Annotations.description }}
+
+{{ end }}{{ if .GeneratorURL }}[View in SigNoz]({{ .GeneratorURL }})
+
+{{ end }}{{ if .Annotations.related_logs }}[View related logs]({{ .Annotations.related_logs }})
+
+{{ end }}{{ if .Annotations.related_traces }}[View related traces]({{ .Annotations.related_traces }})
+
+{{ end }}{{ end }}`,
+};
+
 export const EmailInitialConfig: Partial<EmailChannel> = {
 	send_resolved: true,
 	html: `<!--
@@ -505,12 +575,18 @@ export const ChannelInitialConfig: Record<
 			MsTeamsChannel &
 			OpsgenieChannel &
 			EmailChannel &
-			GoogleChatChannel
+			GoogleChatChannel &
+			JiraChannel &
+			JsmOpsChannel &
+			IncidentIOChannel
 	>
 > = {
 	[ChannelType.Slack]: SlackInitialConfig,
 	[ChannelType.MsTeams]: SlackInitialConfig,
 	[ChannelType.GoogleChat]: GoogleChatInitialConfig,
+	[ChannelType.Jira]: JiraInitialConfig,
+	[ChannelType.JsmOps]: JsmOpsInitialConfig,
+	[ChannelType.IncidentIO]: IncidentIOInitialConfig,
 	[ChannelType.Pagerduty]: PagerInitialConfig,
 	[ChannelType.Opsgenie]: OpsgenieInitialConfig,
 	[ChannelType.Email]: EmailInitialConfig,

frontend/src/container/CreateAlertChannels/index.tsx

@@ -32,6 +32,9 @@ import {
 	ChannelType,
 	EmailChannel,
 	GoogleChatChannel,
+	IncidentIOChannel,
+	JiraChannel,
+	JsmOpsChannel,
 	MsTeamsChannel,
 	OpsgenieChannel,
 	PagerChannel,
@@ -43,7 +46,13 @@ import { ChannelInitialConfig } from './defaults';
 import {
 	isChannelType,
 	isValidGoogleChatWebhookURL,
+	isValidIncidentIOURL,
+	isValidJiraReopenDuration,
+	isValidJiraSiteURL,
 	prepareGoogleChatRequest,
+	prepareIncidentIORequest,
+	prepareJiraRequest,
+	prepareJsmOpsRequest,
 } from './utils';
 
 import './CreateAlertChannels.styles.scss';
@@ -69,7 +78,10 @@ function CreateAlertChannels({
 				MsTeamsChannel &
 				OpsgenieChannel &
 				EmailChannel &
-				GoogleChatChannel
+				GoogleChatChannel &
+				JiraChannel &
+				JsmOpsChannel &
+				IncidentIOChannel
 		>
 	>(() => ({
 		send_resolved: true,
@@ -434,6 +446,164 @@ function CreateAlertChannels({
 		showErrorModal,
 	]);
 
+	const validateJiraConfig = useCallback((): boolean => {
+		if (
+			!selectedConfig.site ||
+			!selectedConfig.username ||
+			!selectedConfig.password ||
+			!selectedConfig.project ||
+			!selectedConfig.issue_type
+		) {
+			notifications.error({
+				message: 'Error',
+				description: t('jira_required_fields'),
+			});
+			return false;
+		}
+
+		if (!isValidJiraSiteURL(selectedConfig.site)) {
+			notifications.error({
+				message: 'Error',
+				description: t('jira_site_invalid'),
+			});
+			return false;
+		}
+
+		if (
+			selectedConfig.reopen_duration &&
+			!isValidJiraReopenDuration(selectedConfig.reopen_duration)
+		) {
+			notifications.error({
+				message: 'Error',
+				description: t('jira_reopen_duration_invalid'),
+			});
+			return false;
+		}
+
+		return true;
+	}, [selectedConfig, notifications, t]);
+
+	const onJiraHandler = useCallback(async () => {
+		if (!validateJiraConfig()) {
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		}
+
+		setSavingState(true);
+
+		try {
+			await createChannel({ data: prepareJiraRequest(selectedConfig) });
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateJiraConfig,
+		createChannel,
+		selectedConfig,
+		notifications,
+		t,
+		showErrorModal,
+	]);
+
+	const validateJsmOpsConfig = useCallback((): boolean => {
+		if (!selectedConfig.api_key) {
+			notifications.error({
+				message: 'Error',
+				description: t('api_key_required'),
+			});
+			return false;
+		}
+		return true;
+	}, [selectedConfig.api_key, notifications, t]);
+
+	const onJsmOpsHandler = useCallback(async () => {
+		if (!validateJsmOpsConfig()) {
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		}
+
+		setSavingState(true);
+
+		try {
+			await createChannel({ data: prepareJsmOpsRequest(selectedConfig) });
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateJsmOpsConfig,
+		createChannel,
+		selectedConfig,
+		notifications,
+		t,
+		showErrorModal,
+	]);
+
+	const validateIncidentIOConfig = useCallback((): boolean => {
+		if (!selectedConfig.url || !selectedConfig.token) {
+			notifications.error({
+				message: 'Error',
+				description: t('incidentio_required_fields'),
+			});
+			return false;
+		}
+
+		if (!isValidIncidentIOURL(selectedConfig.url)) {
+			notifications.error({
+				message: 'Error',
+				description: t('incidentio_url_invalid'),
+			});
+			return false;
+		}
+
+		return true;
+	}, [selectedConfig.url, selectedConfig.token, notifications, t]);
+
+	const onIncidentIOHandler = useCallback(async () => {
+		if (!validateIncidentIOConfig()) {
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		}
+
+		setSavingState(true);
+
+		try {
+			await createChannel({ data: prepareIncidentIORequest(selectedConfig) });
+			notifications.success({
+				message: 'Success',
+				description: t('channel_creation_done'),
+			});
+			history.replace(ROUTES.ALL_CHANNELS);
+			return { status: 'success', statusMessage: t('channel_creation_done') };
+		} catch (error) {
+			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
+			return { status: 'failed', statusMessage: t('channel_creation_failed') };
+		} finally {
+			setSavingState(false);
+		}
+	}, [
+		validateIncidentIOConfig,
+		createChannel,
+		selectedConfig,
+		notifications,
+		t,
+		showErrorModal,
+	]);
+
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {
 			if (!selectedConfig.name) {
@@ -452,6 +622,9 @@ function CreateAlertChannels({
 				[ChannelType.MsTeams]: onMsTeamsHandler,
 				[ChannelType.Email]: onEmailHandler,
 				[ChannelType.GoogleChat]: onGoogleChatHandler,
+				[ChannelType.Jira]: onJiraHandler,
+				[ChannelType.JsmOps]: onJsmOpsHandler,
+				[ChannelType.IncidentIO]: onIncidentIOHandler,
 			};
 
 			if (isChannelType(value)) {
@@ -484,6 +657,9 @@ function CreateAlertChannels({
 			onMsTeamsHandler,
 			onEmailHandler,
 			onGoogleChatHandler,
+			onJiraHandler,
+			onJsmOpsHandler,
+			onIncidentIOHandler,
 			notifications,
 			t,
 		],
@@ -528,6 +704,27 @@ function CreateAlertChannels({
 						}
 						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
 						break;
+					case ChannelType.Jira:
+						if (!validateJiraConfig()) {
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareJiraRequest(selectedConfig) });
+						break;
+					case ChannelType.JsmOps:
+						if (!validateJsmOpsConfig()) {
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareJsmOpsRequest(selectedConfig) });
+						break;
+					case ChannelType.IncidentIO:
+						if (!validateIncidentIOConfig()) {
+							setTestingState(false);
+							return;
+						}
+						await testChannel({ data: prepareIncidentIORequest(selectedConfig) });
+						break;
 					default:
 						notifications.error({
 							message: 'Error',
@@ -576,6 +773,9 @@ function CreateAlertChannels({
 			prepareMsTeamsRequest,
 			prepareEmailRequest,
 			validateGoogleChatConfig,
+			validateJiraConfig,
+			validateJsmOpsConfig,
+			validateIncidentIOConfig,
 			testChannel,
 			notifications,
 		],

frontend/src/container/CreateAlertChannels/utils.ts

@@ -1,9 +1,19 @@
 import {
+	AlertmanagertypesIncidentIOReceiverConfigDTO,
+	AlertmanagertypesJiraReceiverConfigDTO,
+	AlertmanagertypesJSMOpsReceiverConfigDTO,
 	AlertmanagertypesPostableChannelDTO,
 	ConfigSecretURLDTO,
+	ModelDurationDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
-import { ChannelType, GoogleChatChannel } from './config';
+import {
+	ChannelType,
+	GoogleChatChannel,
+	IncidentIOChannel,
+	JiraChannel,
+	JsmOpsChannel,
+} from './config';
 
 export const isChannelType = (type: string): type is ChannelType =>
 	Object.values(ChannelType).includes(type as ChannelType);
@@ -37,3 +47,176 @@ export const prepareGoogleChatRequest = (
 		},
 	],
 });
+
+const JIRA_CLOUD_HOST_SUFFIX = '.atlassian.net';
+
+// the backend enforces the same rule, this is only for a nicer error experience
+export const isValidJiraSiteURL = (url: string): boolean => {
+	try {
+		const { protocol, hostname } = new URL(url);
+		return (
+			protocol === 'https:' &&
+			hostname.toLowerCase().endsWith(JIRA_CLOUD_HOST_SUFFIX)
+		);
+	} catch {
+		return false;
+	}
+};
+
+// mirrors go's prometheus model.Duration units
+const JIRA_DURATION_UNIT_MS: Record<string, number> = {
+	ms: 1,
+	s: 1_000,
+	m: 60_000,
+	h: 3_600_000,
+	d: 86_400_000,
+	w: 604_800_000,
+	y: 31_536_000_000,
+};
+const JIRA_DURATION_RE = /^(\d+(ms|s|m|h|d|w|y))+$/;
+const JIRA_DURATION_TOKEN_RE = /(\d+)(ms|s|m|h|d|w|y)/g;
+const JIRA_MIN_REOPEN_MS = 60_000;
+
+// backend requires the same format and a >= 1m minimum, this is only for a
+// nicer error experience. Empty and "0" defer to the backend default.
+export const isValidJiraReopenDuration = (value: string): boolean => {
+	if (!value || value === '0') {
+		return true;
+	}
+	if (!JIRA_DURATION_RE.test(value)) {
+		return false;
+	}
+	let totalMs = 0;
+	for (const [, amount, unit] of value.matchAll(JIRA_DURATION_TOKEN_RE)) {
+		totalMs += Number(amount) * JIRA_DURATION_UNIT_MS[unit];
+	}
+	return totalMs >= JIRA_MIN_REOPEN_MS;
+};
+
+// create, update and test all send the same body shape. Optional fields are
+// omitted when empty so the backend applies its defaults.
+export const prepareJiraRequest = (
+	config: Partial<JiraChannel>,
+): AlertmanagertypesPostableChannelDTO => {
+	const jira: AlertmanagertypesJiraReceiverConfigDTO = {
+		site: config.site || '',
+		project: config.project || '',
+		issue_type: config.issue_type || '',
+		send_resolved: config.send_resolved || false,
+		http_config: {
+			basic_auth: {
+				username: config.username || '',
+				password: config.password || '',
+			},
+		},
+	};
+
+	if (config.summary) {
+		jira.summary = config.summary;
+	}
+	if (config.description) {
+		jira.description = config.description;
+	}
+	if (config.priority) {
+		jira.priority = config.priority;
+	}
+	if (config.labels?.length) {
+		jira.labels = config.labels;
+	}
+	if (config.resolve_transition) {
+		jira.resolve_transition = config.resolve_transition;
+	}
+	if (config.reopen_transition) {
+		jira.reopen_transition = config.reopen_transition;
+	}
+	if (config.wont_fix_resolution) {
+		jira.wont_fix_resolution = config.wont_fix_resolution;
+	}
+	if (config.reopen_duration) {
+		// the generated type models go's model.Duration as a number, the api takes a
+		// duration string like "72h"
+		jira.reopen_duration = config.reopen_duration as unknown as ModelDurationDTO;
+	}
+
+	return {
+		name: config.name || '',
+		jira_configs: [jira],
+	};
+};
+
+// create, update and test all send the same body shape. Optional fields are
+// omitted when empty so the backend applies its defaults.
+export const prepareJsmOpsRequest = (
+	config: Partial<JsmOpsChannel>,
+): AlertmanagertypesPostableChannelDTO => {
+	const jsmops: AlertmanagertypesJSMOpsReceiverConfigDTO = {
+		api_key: config.api_key || '',
+		send_resolved: config.send_resolved || false,
+	};
+
+	if (config.message) {
+		jsmops.message = config.message;
+	}
+	if (config.description) {
+		jsmops.description = config.description;
+	}
+	if (config.priority) {
+		jsmops.priority = config.priority;
+	}
+	if (config.tags?.length) {
+		// the backend takes a comma-separated string and splits it back
+		jsmops.tags = config.tags.join(',');
+	}
+
+	return {
+		name: config.name || '',
+		jsmops_configs: [jsmops],
+	};
+};
+
+const INCIDENTIO_EVENTS_PATH_PREFIX = '/v2/alert_events/http/';
+
+// the backend enforces the same rule, this is only for a nicer error experience
+export const isValidIncidentIOURL = (url: string): boolean => {
+	try {
+		const { protocol, pathname } = new URL(url);
+		const idx = pathname.indexOf(INCIDENTIO_EVENTS_PATH_PREFIX);
+		return (
+			protocol === 'https:' &&
+			idx !== -1 &&
+			pathname.length > idx + INCIDENTIO_EVENTS_PATH_PREFIX.length
+		);
+	} catch {
+		return false;
+	}
+};
+
+// create, update and test all send the same body shape. Optional fields are
+// omitted when empty so the backend applies its defaults.
+export const prepareIncidentIORequest = (
+	config: Partial<IncidentIOChannel>,
+): AlertmanagertypesPostableChannelDTO => {
+	const incidentio: AlertmanagertypesIncidentIOReceiverConfigDTO = {
+		url: config.url || '',
+		token: config.token || '',
+		send_resolved: config.send_resolved || false,
+	};
+
+	if (config.title) {
+		incidentio.title = config.title;
+	}
+	if (config.description) {
+		incidentio.description = config.description;
+	}
+	const metadata = Object.fromEntries(
+		Object.entries(config.metadata || {}).filter(([key]) => key.trim() !== ''),
+	);
+	if (Object.keys(metadata).length > 0) {
+		incidentio.metadata = metadata;
+	}
+
+	return {
+		name: config.name || '',
+		incidentio_configs: [incidentio],
+	};
+};

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

@@ -1,440 +0,0 @@
-.dashboard-description-container {
-	box-shadow: none;
-	border: none;
-	background: unset;
-	box-shadow: none;
-	color: var(--l2-foreground);
-
-	.ant-card-body {
-		padding: 0px;
-	}
-
-	.dashboard-details {
-		display: flex;
-		justify-content: space-between;
-		gap: 8px;
-		padding: 16px 16px 0px 16px;
-		align-items: flex-start;
-
-		.left-section {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			width: 45%;
-
-			.dashboard-img {
-				height: 16px;
-				width: 16px;
-			}
-
-			.dashboard-title {
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 16px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 24px; /* 150% */
-				letter-spacing: -0.08px;
-				max-width: 80%;
-
-				display: -webkit-box;
-				-webkit-line-clamp: 1;
-				-webkit-box-orient: vertical;
-				overflow: hidden;
-			}
-
-			.public-dashboard-icon {
-				margin-right: 4px;
-			}
-		}
-
-		.right-section {
-			display: flex;
-			width: 55%;
-			justify-content: flex-end;
-			flex-wrap: wrap;
-			align-items: center;
-			gap: 14px;
-
-			.icons {
-				display: flex;
-				align-items: center;
-				width: 32px;
-				height: 34px;
-				padding: 6px;
-				justify-content: center;
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 10px; /* 83.333% */
-				letter-spacing: 0.12px;
-			}
-
-			.icons:hover {
-				background-color: unset;
-			}
-			.configure-button {
-				display: flex;
-				align-items: center;
-				width: 93px;
-				height: 34px;
-				padding: 6px;
-				justify-content: center;
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 10px; /* 83.333% */
-				letter-spacing: 0.12px;
-			}
-
-			.add-panel-btn {
-				display: flex;
-				width: 119px;
-				height: 34px;
-				padding: 5.937px 11.875px;
-				justify-content: center;
-				align-items: center;
-				color: var(--primary-foreground);
-				background: var(--primary-background);
-				font-family: Inter;
-				font-size: 11.875px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 17.812px; /* 150% */
-			}
-		}
-	}
-
-	.dashboard-tags {
-		display: flex;
-		gap: 6px;
-		padding: 16px 16px 0px 16px;
-		flex-wrap: wrap;
-
-		.tag {
-			display: flex;
-			padding: 4px 8px;
-			justify-content: center;
-			align-items: center;
-			border-radius: 20px;
-			border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-			background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-			color: var(--bg-sienna-400);
-			text-align: center;
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-			margin-inline-end: 0px;
-		}
-	}
-	.dashboard-description-section {
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 22px; /* 157.143% */
-		letter-spacing: -0.07px;
-		padding: 20px 16px 0px 16px;
-		/* Preserve author-entered line breaks in the description. */
-		white-space: pre-wrap;
-		overflow-wrap: anywhere;
-
-		a {
-			color: var(--accent-primary);
-			text-decoration: underline;
-
-			&:hover {
-				text-decoration: none;
-			}
-		}
-	}
-
-	.dashboard-variables {
-		padding: 16px 16px 18px 16px;
-	}
-}
-
-.dashboard-description {
-	display: -webkit-box;
-	-webkit-line-clamp: 2; /* Show up to 2 lines */
-	-webkit-box-orient: vertical;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.dashboard-settings {
-	width: 191px;
-	height: 302px;
-	flex-shrink: 0;
-
-	.ant-popover-inner {
-		padding: 0px;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 80%, transparent) 0%,
-			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		) !important;
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-	}
-
-	.menu-content {
-		display: flex;
-		flex-direction: column;
-
-		section {
-			display: flex;
-			flex-direction: column;
-			align-items: start;
-
-			.ant-btn {
-				display: flex;
-				width: 100%;
-				height: unset;
-				padding: 8px;
-				align-items: center;
-				gap: 12px;
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-				letter-spacing: 0.14px;
-				border-top: none;
-
-				.ant-btn-icon {
-					margin-inline-end: 0px;
-				}
-			}
-		}
-
-		.section-1,
-		.section-2 {
-			border-bottom: 1px solid var(--l1-border);
-		}
-
-		.delete-dashboard .ant-btn {
-			color: var(--bg-cherry-400) !important;
-		}
-	}
-}
-
-.rename-dashboard {
-	.ant-modal-content {
-		width: 384px;
-		flex-shrink: 0;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		padding: 0px;
-
-		.ant-modal-header {
-			height: 52px;
-			padding: 16px;
-			background: var(--l2-background);
-			border-bottom: 1px solid var(--l1-border);
-			margin-bottom: 0px;
-			.ant-modal-title {
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				width: 349px;
-				height: 20px;
-			}
-		}
-
-		.ant-modal-body {
-			padding: 16px;
-
-			.dashboard-content {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-
-				.name-text {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 500;
-					line-height: 20px; /* 142.857% */
-				}
-
-				.dashboard-name-input {
-					display: flex;
-					padding: 6px 6px 6px 8px;
-					align-items: center;
-					gap: 4px;
-					align-self: stretch;
-					border-radius: 0px 2px 2px 0px;
-					border: 1px solid var(--l1-border);
-					background: var(--l3-background);
-				}
-			}
-		}
-
-		.ant-modal-footer {
-			padding: 16px;
-			margin-top: 0px;
-			.dashboard-rename {
-				display: flex;
-				flex-direction: row-reverse;
-				gap: 12px;
-
-				.cancel-btn {
-					display: flex;
-					padding: 4px 8px;
-					justify-content: center;
-					align-items: center;
-					gap: 4px;
-					border-radius: 2px;
-					background: var(--l1-border);
-
-					.ant-btn-icon {
-						margin-inline-end: 0px;
-					}
-				}
-
-				.rename-btn {
-					display: flex;
-					align-items: center;
-					display: flex;
-					width: 169px;
-					padding: 4px 8px;
-					justify-content: center;
-					align-items: center;
-					gap: 4px;
-					border-radius: 2px;
-					background: var(--primary-background);
-
-					.ant-btn-icon {
-						margin-inline-end: 0px;
-					}
-				}
-			}
-		}
-	}
-}
-
-.section-naming {
-	.ant-modal-content {
-		width: 384px;
-		flex-shrink: 0;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		padding: 0px;
-
-		.ant-modal-header {
-			height: 52px;
-			padding: 16px;
-			background: var(--l2-background);
-			border-bottom: 1px solid var(--l1-border);
-			margin-bottom: 0px;
-			.ant-modal-title {
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				width: 349px;
-				height: 20px;
-			}
-		}
-
-		.ant-modal-body {
-			padding: 16px;
-
-			.section-naming-content {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-
-				.name-text {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 500;
-					line-height: 20px; /* 142.857% */
-				}
-
-				.section-name-input {
-					display: flex;
-					width: 320px;
-					padding: 6px 6px 6px 8px;
-					align-items: center;
-					gap: 4px;
-					align-self: stretch;
-					border-radius: 0px 2px 2px 0px;
-					border: 1px solid var(--l1-border);
-					background: var(--l3-background);
-				}
-			}
-		}
-
-		.ant-modal-footer {
-			padding: 16px;
-			margin-top: 0px;
-			.dashboard-rename {
-				display: flex;
-				flex-direction: row-reverse;
-				gap: 12px;
-
-				.cancel-btn {
-					display: flex;
-					padding: 4px 8px;
-					justify-content: center;
-					align-items: center;
-					gap: 4px;
-					border-radius: 2px;
-					background: var(--l1-border);
-
-					.ant-btn-icon {
-						margin-inline-end: 0px;
-					}
-				}
-
-				.rename-btn {
-					display: flex;
-					align-items: center;
-					display: flex;
-					width: 140px;
-					padding: 4px 8px;
-					justify-content: center;
-					align-items: center;
-					gap: 4px;
-					border-radius: 2px;
-					background: var(--primary-background);
-
-					.ant-btn-icon {
-						margin-inline-end: 0px;
-					}
-				}
-			}
-		}
-	}
-}

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

@@ -1,43 +0,0 @@
-.settings-container-root {
-	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-		.ant-drawer-header {
-			height: 48px;
-			border-bottom: 1px solid var(--l1-border);
-			padding: 14px 14px 14px 11px;
-
-			.ant-drawer-header-title {
-				gap: 16px;
-
-				.ant-drawer-title {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-					padding-left: 16px;
-					border-left: 1px solid var(--l1-border);
-				}
-
-				.ant-drawer-close {
-					height: 16px;
-					width: 16px;
-					margin-inline-end: 0px !important;
-				}
-			}
-		}
-
-		.ant-drawer-body {
-			padding: 16px;
-
-			&::-webkit-scrollbar {
-				width: 0.1rem;
-			}
-		}
-	}
-}

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

@@ -1,34 +0,0 @@
-import { memo, PropsWithChildren, ReactElement } from 'react';
-import { Drawer } from 'antd';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-
-import './SettingsDrawer.styles.scss';
-
-type SettingsDrawerProps = PropsWithChildren<{
-	drawerTitle: string;
-	isOpen: boolean;
-	onClose: () => void;
-}>;
-
-function SettingsDrawer({
-	children,
-	drawerTitle,
-	isOpen,
-	onClose,
-}: SettingsDrawerProps): JSX.Element {
-	return (
-		<Drawer
-			title={drawerTitle}
-			placement="right"
-			width="50%"
-			onClose={onClose}
-			open={isOpen}
-			rootClassName="settings-container-root"
-		>
-			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
-			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
-		</Drawer>
-	);
-}
-
-export default memo(SettingsDrawer);

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

@@ -1,235 +0,0 @@
-import { ReactNode } from 'react';
-import { MemoryRouter, useLocation } from 'react-router-dom';
-import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
-import {
-	getDashboardById,
-	getNonIntegrationDashboardById,
-} from 'mocks-server/__mockdata__/dashboards';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import {
-	resetDashboard,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
-import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
-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>;
-}
-
-const DASHBOARD_TEST_ID = 'dashboard-title';
-const DASHBOARD_TITLE_TEXT = 'thor';
-const DASHBOARD_PATH = '/dashboard/4';
-
-const mockSafeNavigate = jest.fn();
-
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: jest.fn(),
-}));
-
-jest.mock(
-	'container/TopNav/DateTimeSelectionV2/index.tsx',
-	() =>
-		function MockDateTimeSelection(): JSX.Element {
-			return <div>MockDateTimeSelection</div>;
-		},
-);
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): MockSafeNavigateReturn => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-describe('Dashboard landing page actions header tests', () => {
-	beforeEach(() => {
-		mockSafeNavigate.mockClear();
-		sessionStorage.clear();
-		resetDashboard();
-	});
-
-	it('unlock dashboard should be disabled for integrations created dashboards', async () => {
-		const mockLocation = {
-			pathname: `${process.env.FRONTEND_API_ENDPOINT}${DASHBOARD_PATH}`,
-			search: '',
-		};
-		(useLocation as jest.Mock).mockReturnValue(mockLocation);
-		const { getByTestId } = render(
-			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardBootstrapWrapper dashboardId="4">
-					<DashboardDescription
-						handle={{
-							active: false,
-							enter: (): Promise<void> => Promise.resolve(),
-							exit: (): Promise<void> => Promise.resolve(),
-							node: { current: null },
-						}}
-					/>
-				</DashboardBootstrapWrapper>
-			</MemoryRouter>,
-		);
-
-		await waitFor(() =>
-			expect(getByTestId(DASHBOARD_TEST_ID)).toHaveTextContent(
-				DASHBOARD_TITLE_TEXT,
-			),
-		);
-
-		const dashboardSettingsTrigger = getByTestId('options');
-
-		await fireEvent.click(dashboardSettingsTrigger);
-
-		const lockUnlockButton = screen.getByTestId('lock-unlock-dashboard');
-
-		await waitFor(() => expect(lockUnlockButton).toBeDisabled());
-	});
-
-	it('unlock dashboard should not be disabled for non integration created dashboards', async () => {
-		const mockLocation = {
-			pathname: `${process.env.FRONTEND_API_ENDPOINT}${DASHBOARD_PATH}`,
-			search: '',
-		};
-		(useLocation as jest.Mock).mockReturnValue(mockLocation);
-		server.use(
-			rest.get('http://localhost/api/v1/dashboards/4', (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(getNonIntegrationDashboardById)),
-			),
-		);
-		const { getByTestId } = render(
-			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardBootstrapWrapper dashboardId="4">
-					<DashboardDescription
-						handle={{
-							active: false,
-							enter: (): Promise<void> => Promise.resolve(),
-							exit: (): Promise<void> => Promise.resolve(),
-							node: { current: null },
-						}}
-					/>
-				</DashboardBootstrapWrapper>
-			</MemoryRouter>,
-		);
-
-		await waitFor(() =>
-			expect(getByTestId(DASHBOARD_TEST_ID)).toHaveTextContent(
-				DASHBOARD_TITLE_TEXT,
-			),
-		);
-
-		const dashboardSettingsTrigger = getByTestId('options');
-
-		await fireEvent.click(dashboardSettingsTrigger);
-
-		const lockUnlockButton = screen.getByTestId('lock-unlock-dashboard');
-
-		await waitFor(() => expect(lockUnlockButton).not.toBeDisabled());
-	});
-
-	it('should navigate to base dashboard list URL when no saved params exist', async () => {
-		const user = userEvent.setup();
-		const mockLocation = {
-			pathname: DASHBOARD_PATH,
-			search: '',
-		};
-
-		(useLocation as jest.Mock).mockReturnValue(mockLocation);
-
-		const { getByText } = render(
-			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardBootstrapWrapper dashboardId="4">
-					<DashboardDescription
-						handle={{
-							active: false,
-							enter: (): Promise<void> => Promise.resolve(),
-							exit: (): Promise<void> => Promise.resolve(),
-							node: { current: null },
-						}}
-					/>
-				</DashboardBootstrapWrapper>
-			</MemoryRouter>,
-		);
-
-		await waitFor(() =>
-			expect(screen.getByTestId(DASHBOARD_TEST_ID)).toHaveTextContent(
-				DASHBOARD_TITLE_TEXT,
-			),
-		);
-
-		const dashboardButton = getByText('Dashboard /');
-		await user.click(dashboardButton);
-
-		expect(mockSafeNavigate).toHaveBeenCalledWith('/dashboard');
-	});
-
-	it('should navigate to dashboard list with saved query params when present', async () => {
-		const user = userEvent.setup();
-		const savedParams = 'columnKey=createdAt&order=ascend&page=2&search=foo';
-		sessionStorage.setItem('dashboardsListQueryParams', savedParams);
-
-		const mockLocation = {
-			pathname: DASHBOARD_PATH,
-			search: '',
-		};
-
-		(useLocation as jest.Mock).mockReturnValue(mockLocation);
-
-		useDashboardStore.setState({
-			dashboardData: getDashboardById.data as unknown as Dashboard,
-			layouts: [],
-			panelMap: {},
-			setPanelMap: jest.fn(),
-			setLayouts: jest.fn(),
-			setDashboardData: jest.fn(),
-			columnWidths: {},
-		});
-
-		const { getByText } = render(
-			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardDescription
-					handle={{
-						active: false,
-						enter: (): Promise<void> => Promise.resolve(),
-						exit: (): Promise<void> => Promise.resolve(),
-						node: { current: null },
-					}}
-				/>
-			</MemoryRouter>,
-		);
-
-		await waitFor(() =>
-			expect(screen.getByTestId(DASHBOARD_TEST_ID)).toHaveTextContent(
-				DASHBOARD_TITLE_TEXT,
-			),
-		);
-
-		const dashboardButton = getByText('Dashboard /');
-		await user.click(dashboardButton);
-
-		expect(mockSafeNavigate).toHaveBeenCalledWith({
-			pathname: '/dashboard',
-			search: `?${savedParams}`,
-		});
-	});
-});

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

@@ -1,621 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { FullScreenHandle } from 'react-full-screen';
-import { Layout } from 'react-grid-layout';
-import { useTranslation } from 'react-i18next';
-import { useCopyToClipboard } from 'react-use';
-import {
-	Check,
-	ClipboardCopy,
-	Ellipsis,
-	FileJson,
-	FolderKanban,
-	Fullscreen,
-	Globe,
-	LockKeyhole,
-	PenLine,
-	Plus,
-	X,
-} from '@signozhq/icons';
-import { Button, Card, Modal, Popover, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { Input } from '@signozhq/ui/input';
-import logEvent from 'api/common/logEvent';
-import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
-import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
-import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
-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';
-import { useNotifications } from 'hooks/useNotifications';
-import { isEmpty } from 'lodash-es';
-import { useAppContext } from 'providers/App/App';
-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';
-import { ROLES, USER_ROLES } from 'types/roles';
-import { linkifyText } from 'utils/linkifyText';
-import { ComponentTypes } from 'utils/permission';
-import { v4 as uuid } from 'uuid';
-
-import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
-import DashboardSettings from '../DashboardSettings';
-import { Base64Icons } from '../DashboardSettings/General/utils';
-import DashboardVariableSelection from '../DashboardVariablesSelection';
-import PanelTypeSelectionModal from '../PanelTypeSelectionModal';
-import SettingsDrawer from './SettingsDrawer';
-import { VariablesSettingsTab } from './types';
-import {
-	DEFAULT_ROW_NAME,
-	downloadObjectAsJson,
-	sanitizeDashboardData,
-} from './utils';
-
-import './Description.styles.scss';
-
-interface DashboardDescriptionProps {
-	handle: FullScreenHandle;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
-	const { handle } = props;
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
-	const {
-		dashboardData,
-		panelMap,
-		setPanelMap,
-		layouts,
-		setLayouts,
-		setDashboardData,
-	} = useDashboardStore();
-
-	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
-	const handleDashboardLockToggle = useLockDashboard();
-
-	const variablesSettingsTabHandle = useRef<VariablesSettingsTab>(null);
-	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
-		useState<boolean>(false);
-
-	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
-
-	const isPublicDashboardEnabled = isCloudUser || isEnterpriseSelfHostedUser;
-
-	const selectedData = dashboardData
-		? {
-				...dashboardData.data,
-				uuid: dashboardData.id,
-			}
-		: ({} as DashboardData);
-	const { dashboardVariables } = useDashboardVariables();
-
-	const {
-		title = '',
-		description,
-		tags,
-		image = Base64Icons[0],
-	} = selectedData || {};
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-
-	const [sectionName, setSectionName] = useState<string>(DEFAULT_ROW_NAME);
-
-	const updateDashboardMutation = useUpdateDashboard();
-
-	const { user } = useAppContext();
-	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
-	const [isDashboardSettingsOpen, setIsDashbordSettingsOpen] =
-		useState<boolean>(false);
-
-	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
-		useState<boolean>(false);
-
-	const [isPanelNameModalOpen, setIsPanelNameModalOpen] =
-		useState<boolean>(false);
-
-	const [isPublicDashboard, setIsPublicDashboard] = useState<boolean>(false);
-
-	let isAuthor = false;
-
-	if (dashboardData && user && user.email) {
-		isAuthor = dashboardData?.createdBy === user?.email;
-	}
-
-	let permissions: ComponentTypes[] = ['add_panel'];
-
-	if (isDashboardLocked) {
-		permissions = ['add_panel_locked_dashboard'];
-	}
-
-	const { notifications } = useNotifications();
-
-	const userRole: ROLES | null =
-		dashboardData?.createdBy === user?.email
-			? (USER_ROLES.AUTHOR as ROLES)
-			: user.role;
-
-	const [addPanelPermission] = useComponentPermission(permissions, userRole);
-
-	const onEmptyWidgetHandler = useCallback(() => {
-		setIsPanelTypeSelectionModalOpen(true);
-		logEvent('Dashboard Detail: Add new panel clicked', {
-			dashboardId: dashboardData?.id,
-			dashboardName: dashboardData?.data.title,
-			numberOfPanels: dashboardData?.data.widgets?.length,
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [setIsPanelTypeSelectionModalOpen]);
-
-	const handleLockDashboardToggle = (): void => {
-		setIsDashbordSettingsOpen(false);
-		handleDashboardLockToggle(!isDashboardLocked);
-	};
-
-	const onNameChangeHandler = (): void => {
-		if (!dashboardData) {
-			return;
-		}
-		const updatedDashboard: Props = {
-			id: dashboardData.id,
-
-			data: {
-				...dashboardData.data,
-				title: updatedTitle,
-			},
-		};
-		updateDashboardMutation.mutate(updatedDashboard, {
-			onSuccess: (updatedDashboard) => {
-				notifications.success({
-					message: 'Dashboard renamed successfully',
-				});
-				setIsRenameDashboardOpen(false);
-				if (updatedDashboard.data) {
-					setDashboardData(updatedDashboard.data);
-				}
-			},
-			onError: () => {
-				setIsRenameDashboardOpen(true);
-			},
-		});
-	};
-
-	const [state, setCopy] = useCopyToClipboard();
-
-	const { t } = useTranslation(['dashboard', 'common']);
-
-	// used to set the initial value for the updatedTitle
-	// the context value is sometimes not available during the initial render
-	// due to which the updatedTitle is set to some previous value
-	useEffect(() => {
-		if (dashboardData) {
-			setUpdatedTitle(dashboardData.data.title);
-		}
-	}, [dashboardData]);
-
-	useEffect(() => {
-		if (state.error) {
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-		}
-
-		if (state.value) {
-			notifications.success({
-				message: t('success', {
-					ns: 'common',
-				}),
-			});
-		}
-	}, [state.error, state.value, t, notifications]);
-
-	function handleAddRow(): void {
-		if (!dashboardData) {
-			return;
-		}
-		const id = uuid();
-
-		const newRowWidgetMap: { widgets: Layout[]; collapsed: boolean } = {
-			widgets: [],
-			collapsed: false,
-		};
-		const currentRowIdx = 0;
-		for (let j = currentRowIdx; j < layouts.length; j++) {
-			if (!panelMap[layouts[j].i]) {
-				newRowWidgetMap.widgets.push(layouts[j]);
-			} else {
-				break;
-			}
-		}
-
-		const updatedDashboard: Props = {
-			id: dashboardData.id,
-
-			data: {
-				...dashboardData.data,
-				layout: [
-					{
-						i: id,
-						w: 12,
-						minW: 12,
-						minH: 1,
-						maxH: 1,
-						x: 0,
-						h: 1,
-						y: 0,
-					},
-					...layouts.filter((e) => e.i !== PANEL_TYPES.EMPTY_WIDGET),
-				],
-				panelMap: { ...panelMap, [id]: newRowWidgetMap },
-				widgets: [
-					...(dashboardData.data.widgets || []),
-					{
-						id,
-						title: sectionName,
-						description: '',
-						panelTypes: PANEL_GROUP_TYPES.ROW,
-					},
-				],
-			},
-		};
-
-		updateDashboardMutation.mutate(updatedDashboard, {
-			onSuccess: (updatedDashboard) => {
-				if (updatedDashboard.data) {
-					if (updatedDashboard.data.data.layout) {
-						setLayouts(sortLayout(updatedDashboard.data.data.layout));
-					}
-					setDashboardData(updatedDashboard.data);
-					setPanelMap(updatedDashboard.data?.data?.panelMap || {});
-				}
-
-				setIsPanelNameModalOpen(false);
-				setSectionName(DEFAULT_ROW_NAME);
-			},
-		});
-	}
-
-	const {
-		data: publicDashboardResponse,
-		isLoading: isLoadingPublicDashboardData,
-		isFetching: isFetchingPublicDashboardData,
-		error: errorPublicDashboardData,
-		isError: isErrorPublicDashboardData,
-	} = useGetPublicDashboardMeta(
-		dashboardData?.id || '',
-		!!dashboardData?.id && isPublicDashboardEnabled,
-	);
-
-	useEffect(() => {
-		if (!isLoadingPublicDashboardData && !isFetchingPublicDashboardData) {
-			if (isErrorPublicDashboardData) {
-				const errorDetails = errorPublicDashboardData?.getErrorDetails();
-
-				if (errorDetails?.error?.code === 'public_dashboard_not_found') {
-					setIsPublicDashboard(false);
-				}
-			} else {
-				const publicDashboardData = publicDashboardResponse?.data;
-				if (publicDashboardData?.publicPath) {
-					setIsPublicDashboard(true);
-				}
-			}
-		}
-	}, [
-		isLoadingPublicDashboardData,
-		isFetchingPublicDashboardData,
-		isErrorPublicDashboardData,
-		errorPublicDashboardData,
-		publicDashboardResponse?.data,
-	]);
-
-	const onConfigureClick = useCallback((): void => {
-		setIsSettingsDrawerOpen(true);
-	}, []);
-
-	const onSettingsDrawerClose = useCallback((): void => {
-		setIsSettingsDrawerOpen(false);
-		// good use case for a state library like Jotai
-		if (variablesSettingsTabHandle.current) {
-			variablesSettingsTabHandle.current.resetState();
-		}
-	}, []);
-
-	return (
-		<Card className="dashboard-description-container">
-			<DashboardHeader />
-			<section className="dashboard-details">
-				<div className="left-section">
-					<img src={image} alt="dashboard-img" className="dashboard-img" />
-					<Tooltip title={title.length > 30 ? title : ''}>
-						<Typography.Text
-							className="dashboard-title"
-							data-testid="dashboard-title"
-						>
-							{title}
-						</Typography.Text>
-					</Tooltip>
-
-					{isPublicDashboard && (
-						<Tooltip title="This dashboard is publicly accessible">
-							<Globe size={14} className="public-dashboard-icon" />
-						</Tooltip>
-					)}
-
-					{isDashboardLocked && (
-						<Tooltip title="This dashboard is locked">
-							<LockKeyhole size={14} className="lock-dashboard-icon" />
-						</Tooltip>
-					)}
-				</div>
-				<div className="right-section">
-					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-					<Popover
-						open={isDashboardSettingsOpen}
-						arrow={false}
-						onOpenChange={(visible): void => setIsDashbordSettingsOpen(visible)}
-						rootClassName="dashboard-settings"
-						content={
-							<div className="menu-content">
-								<section className="section-1">
-									{(isAuthor || user.role === USER_ROLES.ADMIN) && (
-										<Tooltip
-											title={
-												dashboardData?.createdBy === 'integration' &&
-												'Dashboards created by integrations cannot be unlocked'
-											}
-										>
-											<Button
-												type="text"
-												icon={<LockKeyhole size={14} />}
-												disabled={dashboardData?.createdBy === 'integration'}
-												onClick={handleLockDashboardToggle}
-												data-testid="lock-unlock-dashboard"
-											>
-												{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
-											</Button>
-										</Tooltip>
-									)}
-
-									{!isDashboardLocked && editDashboard && (
-										<Button
-											type="text"
-											icon={<PenLine size={14} />}
-											onClick={(): void => {
-												setIsRenameDashboardOpen(true);
-												setIsDashbordSettingsOpen(false);
-											}}
-										>
-											Rename
-										</Button>
-									)}
-
-									<Button
-										type="text"
-										icon={<Fullscreen size={14} />}
-										onClick={handle.enter}
-									>
-										Full screen
-									</Button>
-								</section>
-								<section className="section-2">
-									{!isDashboardLocked && addPanelPermission && (
-										<Button
-											type="text"
-											icon={<FolderKanban size={14} />}
-											onClick={(): void => {
-												setIsPanelNameModalOpen(true);
-												setIsDashbordSettingsOpen(false);
-											}}
-										>
-											New section
-										</Button>
-									)}
-
-									<Button
-										type="text"
-										icon={<FileJson size={14} />}
-										onClick={(): void => {
-											downloadObjectAsJson(
-												sanitizeDashboardData(selectedData),
-												selectedData.title,
-											);
-											setIsDashbordSettingsOpen(false);
-										}}
-									>
-										Export JSON
-									</Button>
-									<Button
-										type="text"
-										icon={<ClipboardCopy size={14} />}
-										onClick={(): void => {
-											setCopy(
-												JSON.stringify(sanitizeDashboardData(selectedData), null, 2),
-											);
-											setIsDashbordSettingsOpen(false);
-										}}
-									>
-										Copy as JSON
-									</Button>
-								</section>
-								<section className="delete-dashboard">
-									<DeleteButton
-										createdBy={dashboardData?.createdBy || ''}
-										name={dashboardData?.data.title || ''}
-										id={String(dashboardData?.id) || ''}
-										isLocked={isDashboardLocked}
-										routeToListPage
-									/>
-								</section>
-							</div>
-						}
-						trigger="click"
-						placement="bottomRight"
-					>
-						<Button
-							icon={<Ellipsis size={14} />}
-							type="text"
-							className="icons"
-							data-testid="options"
-						/>
-					</Popover>
-					{!isDashboardLocked && editDashboard && (
-						<>
-							<Button
-								type="text"
-								className="configure-button"
-								icon={<ConfigureIcon />}
-								data-testid="show-drawer"
-								onClick={onConfigureClick}
-							>
-								Configure
-							</Button>
-							<SettingsDrawer
-								drawerTitle="Dashboard Configuration"
-								isOpen={isSettingsDrawerOpen}
-								onClose={onSettingsDrawerClose}
-							>
-								<DashboardSettings
-									variablesSettingsTabHandle={variablesSettingsTabHandle}
-								/>
-							</SettingsDrawer>
-						</>
-					)}
-					{!isDashboardLocked && addPanelPermission && (
-						<Button
-							className="add-panel-btn"
-							onClick={onEmptyWidgetHandler}
-							icon={<Plus size="md" />}
-							type="primary"
-							data-testid="add-panel-header"
-						>
-							New Panel
-						</Button>
-					)}
-				</div>
-			</section>
-			{(tags?.length || 0) > 0 && (
-				<div className="dashboard-tags">
-					{tags?.map((tag) => (
-						<Badge key={tag} className="tag" color="vanilla">
-							{tag}
-						</Badge>
-					))}
-				</div>
-			)}
-			{!isEmpty(description) && (
-				<section className="dashboard-description-section">
-					{linkifyText(description ?? '')}
-				</section>
-			)}
-
-			{!isEmpty(dashboardVariables) && (
-				<section className="dashboard-variables">
-					<DashboardVariableSelection />
-				</section>
-			)}
-			<PanelTypeSelectionModal />
-
-			<Modal
-				open={isRenameDashboardOpen}
-				title="Rename Dashboard"
-				onOk={(): void => {
-					// handle update dashboard here
-				}}
-				onCancel={(): void => {
-					setIsRenameDashboardOpen(false);
-				}}
-				rootClassName="rename-dashboard"
-				footer={
-					<div className="dashboard-rename">
-						<Button
-							type="primary"
-							icon={<Check size={14} />}
-							className="rename-btn"
-							onClick={onNameChangeHandler}
-							disabled={updateDashboardMutation.isLoading}
-						>
-							Rename Dashboard
-						</Button>
-						<Button
-							type="text"
-							icon={<X size={14} />}
-							className="cancel-btn"
-							onClick={(): void => setIsRenameDashboardOpen(false)}
-						>
-							Cancel
-						</Button>
-					</div>
-				}
-			>
-				<div className="dashboard-content">
-					<Typography.Text className="name-text">Enter a new name</Typography.Text>
-					<Input
-						data-testid="dashboard-name"
-						className="dashboard-name-input"
-						value={updatedTitle}
-						onChange={(e): void => setUpdatedTitle(e.target.value)}
-					/>
-				</div>
-			</Modal>
-			<Modal
-				open={isPanelNameModalOpen}
-				title="New Section"
-				rootClassName="section-naming"
-				onOk={(): void => handleAddRow()}
-				onCancel={(): void => {
-					setIsPanelNameModalOpen(false);
-					setSectionName(DEFAULT_ROW_NAME);
-				}}
-				footer={
-					<div className="dashboard-rename">
-						<Button
-							type="primary"
-							icon={<Check size={14} />}
-							className="rename-btn"
-							onClick={(): void => handleAddRow()}
-							disabled={updateDashboardMutation.isLoading}
-						>
-							Create Section
-						</Button>
-						<Button
-							type="text"
-							icon={<X size={14} />}
-							className="cancel-btn"
-							onClick={(): void => {
-								setIsPanelNameModalOpen(false);
-								setSectionName(DEFAULT_ROW_NAME);
-							}}
-						>
-							Cancel
-						</Button>
-					</div>
-				}
-			>
-				<div className="section-naming-content">
-					<Typography.Text className="name-text">Enter Section name</Typography.Text>
-					<Input
-						data-testid="section-name"
-						className="section-name-input"
-						value={sectionName}
-						onChange={(e): void => setSectionName(e.target.value)}
-					/>
-				</div>
-			</Modal>
-		</Card>
-	);
-}
-
-export default DashboardDescription;

frontend/src/container/DashboardContainer/DashboardDescription/types.ts

@@ -1,8 +0,0 @@
-import { MutableRefObject } from 'react';
-
-export interface VariablesSettingsTab {
-	resetState: () => void;
-}
-
-export type VariablesSettingsTabHandle =
-	MutableRefObject<VariablesSettingsTab | null>;

frontend/src/container/DashboardContainer/DashboardDescription/utils.ts

@@ -1,40 +0,0 @@
-import { DashboardData, IDashboardVariable } from 'types/api/dashboard/getAll';
-
-export function sanitizeDashboardData(
-	selectedData: DashboardData,
-): DashboardData {
-	if (!selectedData?.variables) {
-		return selectedData;
-	}
-
-	const updatedVariables = Object.entries(selectedData.variables).reduce(
-		(acc, [key, value]) => {
-			const { selectedValue: _selectedValue, ...rest } = value;
-			acc[key] = rest;
-			return acc;
-		},
-		{} as Record<string, IDashboardVariable>,
-	);
-
-	return {
-		...selectedData,
-		variables: updatedVariables,
-	};
-}
-
-export function downloadObjectAsJson(
-	exportObj: unknown,
-	exportName: string,
-): void {
-	const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(
-		JSON.stringify(exportObj),
-	)}`;
-	const downloadAnchorNode = document.createElement('a');
-	downloadAnchorNode.setAttribute('href', dataStr);
-	downloadAnchorNode.setAttribute('download', `${exportName}.json`);
-	document.body.appendChild(downloadAnchorNode); // required for firefox
-	downloadAnchorNode.click();
-	downloadAnchorNode.remove();
-}
-
-export const DEFAULT_ROW_NAME = 'Sample Row';

frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettings.styles.scss

@@ -1,123 +0,0 @@
-.delete-variable-name {
-	font-weight: 700;
-	color: rgb(207, 19, 34);
-	font-style: italic;
-}
-
-.apply-to-all-variable-name {
-	font-weight: 700;
-	color: var(--bg-robin-400);
-	font-style: italic;
-}
-
-.dashboard-variable-settings-table {
-	.variable-name-drag {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-
-		.ant-table-cell {
-			padding: 0px !important;
-			border: none !important;
-			color: var(--bg-robin-400);
-			font-family: 'Space Mono';
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 128.571% */
-			letter-spacing: -0.07px;
-		}
-	}
-
-	.variable-description-actions {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		flex: 1 0 0;
-
-		.variable-description {
-			color: var(--bg-sienna-400);
-			font-family: 'Space Mono';
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 128.571% */
-			letter-spacing: -0.07px;
-		}
-
-		.actions-btns {
-			position: absolute;
-			right: 10px;
-			display: none;
-
-			&:hover {
-				display: inline-flex;
-			}
-
-			.edit-variable-button {
-				width: 26px;
-				height: 22px;
-				border-radius: 2px;
-				display: flex;
-				padding: 4px 6px;
-				align-items: center;
-				gap: 3px;
-				background: var(--l1-border);
-			}
-
-			.delete-variable-button {
-				width: 26px;
-				height: 22px;
-				border-radius: 2px;
-				background: color-mix(in srgb, var(--danger-background) 10%, transparent);
-				display: flex;
-				padding: 4px 6px;
-				align-items: center;
-				gap: 3px;
-				color: red;
-			}
-
-			.apply-to-all-button {
-				width: min-content;
-				height: 22px;
-				border-radius: 2px;
-				display: flex;
-				padding: 0px 6px;
-				align-items: center;
-				gap: 3px;
-				background: var(--l1-border);
-			}
-		}
-	}
-
-	.ant-table-cell-row-hover {
-		.actions-btns {
-			display: inline-flex;
-		}
-	}
-
-	.ant-table-thead {
-		.ant-table-cell {
-			padding: 8px 12px;
-			border: 1px solid var(--l1-border);
-			background: unset;
-		}
-
-		.ant-table-cell::before {
-			display: none;
-		}
-	}
-
-	.ant-table-tbody {
-		.ant-table-cell {
-			padding: 14px;
-			border: 1px solid var(--l1-border);
-		}
-	}
-
-	.ant-table-row {
-		.ant-table-cell:nth-child(even) {
-			background: color-mix(in srgb, var(--l1-border) 40%, transparent);
-		}
-	}
-}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss

@@ -1,62 +0,0 @@
-.settings-tabs {
-	.ant-tabs-nav-list {
-		height: 32px;
-		flex-shrink: 0;
-		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		transition: opacity 0.1s !important;
-
-		.ant-tabs-tab + .ant-tabs-tab {
-			margin: 0px;
-		}
-
-		.ant-tabs-tab:not(:last-child) {
-			border-right: 1px solid var(--l1-border) !important;
-		}
-
-		.overview-btn {
-			width: 114px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		.variables-btn {
-			width: 114px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		.public-dashboard-btn {
-			width: 150px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			&.disabled-btn {
-				opacity: 0.5;
-				cursor: not-allowed;
-			}
-		}
-
-		.ant-tabs-ink-bar {
-			display: none;
-		}
-
-		.ant-tabs-tab-active {
-			.overview-btn,
-			.variables-btn,
-			.public-dashboard-btn {
-				color: var(--primary-background);
-				background: var(--l1-border);
-			}
-		}
-	}
-
-	.ant-tabs-nav::before {
-		border-bottom: none;
-	}
-}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable.styles.scss

@@ -1,31 +0,0 @@
-.dynamic-variable-container {
-	margin: 24px 0;
-
-	.dynamic-variable-config-container {
-		display: grid;
-		grid-template-columns: 1fr 32px 16px 200px;
-		gap: 16px;
-		align-items: center;
-		width: 100%;
-
-		.ant-select {
-			.ant-select-selector {
-				border-radius: 4px;
-				border: 1px solid var(--l1-border);
-			}
-		}
-
-		.ant-input {
-			border-radius: 4px;
-			border: 1px solid var(--l1-border);
-			max-width: 300px;
-		}
-
-		.dynamic-variable-from-text {
-			font-family: 'Space Mono';
-			font-size: 13px;
-			font-weight: 500;
-			white-space: nowrap;
-		}
-	}
-}

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

@@ -1,230 +0,0 @@
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Select } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import CustomSelect from 'components/NewSelect/CustomSelect';
-import TextToolTip from 'components/TextToolTip';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import useDebounce from 'hooks/useDebounce';
-import { Info } from '@signozhq/icons';
-import { FieldKey } from 'types/api/dynamicVariables/getFieldKeys';
-import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
-
-import './DynamicVariable.styles.scss';
-
-enum AttributeSource {
-	ALL_TELEMETRY = 'All telemetry',
-	LOGS = 'Logs',
-	METRICS = 'Metrics',
-	TRACES = 'Traces',
-}
-
-function DynamicVariable({
-	setDynamicVariablesSelectedValue,
-	dynamicVariablesSelectedValue,
-	errorAttributeKeyMessage,
-}: {
-	setDynamicVariablesSelectedValue: Dispatch<
-		SetStateAction<
-			| {
-					name: string;
-					value: string;
-			  }
-			| undefined
-		>
-	>;
-	dynamicVariablesSelectedValue:
-		| {
-				name: string;
-				value: string;
-		  }
-		| undefined;
-	errorAttributeKeyMessage?: string;
-}): JSX.Element {
-	const sources = [
-		AttributeSource.ALL_TELEMETRY,
-		AttributeSource.LOGS,
-		AttributeSource.TRACES,
-		AttributeSource.METRICS,
-	];
-
-	const [attributeSource, setAttributeSource] = useState<AttributeSource>();
-	const [attributes, setAttributes] = useState<Record<string, FieldKey[]>>({});
-	const [selectedAttribute, setSelectedAttribute] = useState<string>();
-	const [apiSearchText, setApiSearchText] = useState<string>('');
-	const [errorMessage, setErrorMessage] = useState<string>();
-	const [isRetryableError, setIsRetryableError] = useState<boolean>(true);
-	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
-
-	const [filteredAttributes, setFilteredAttributes] = useState<
-		Record<string, FieldKey[]>
-	>({});
-
-	useEffect(() => {
-		if (dynamicVariablesSelectedValue?.name) {
-			setSelectedAttribute(dynamicVariablesSelectedValue.name);
-		}
-
-		if (dynamicVariablesSelectedValue?.value) {
-			setAttributeSource(dynamicVariablesSelectedValue.value as AttributeSource);
-		}
-	}, [
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-	]);
-
-	const { data, error, isLoading, refetch } = useGetFieldKeys({
-		signal:
-			attributeSource === AttributeSource.ALL_TELEMETRY
-				? undefined
-				: (attributeSource?.toLowerCase() as 'traces' | 'logs' | 'metrics'),
-		name: debouncedApiSearchText,
-	});
-
-	const isComplete = useMemo(() => data?.data?.complete === true, [data]);
-
-	useEffect(() => {
-		if (data) {
-			const newAttributes = data.data?.keys ?? {};
-			setAttributes(newAttributes);
-			setFilteredAttributes(newAttributes);
-		}
-	}, [data]);
-
-	// Handle error from useGetFieldKeys
-	useEffect(() => {
-		if (error) {
-			// Check if error is retryable (5xx) or not (4xx)
-			const isRetryable = checkIfRetryableError(error);
-			setIsRetryableError(isRetryable);
-		}
-	}, [error]);
-
-	// refetch when attributeSource changes
-	useEffect(() => {
-		if (attributeSource) {
-			refetch();
-		}
-	}, [attributeSource, refetch, debouncedApiSearchText]);
-
-	// Handle search based on whether we have complete data or not
-	const handleSearch = useCallback(
-		(text: string) => {
-			if (isComplete) {
-				// If complete is true, do client-side filtering
-				if (!text) {
-					setFilteredAttributes(attributes);
-					return;
-				}
-
-				const filtered: Record<string, FieldKey[]> = {};
-				Object.keys(attributes).forEach((key) => {
-					if (key.toLowerCase().includes(text.toLowerCase())) {
-						filtered[key] = attributes[key];
-					}
-				});
-				setFilteredAttributes(filtered);
-			} else {
-				// If complete is false, debounce the API call
-				setApiSearchText(text);
-			}
-		},
-		[attributes, isComplete],
-	);
-
-	// update setDynamicVariablesSelectedValue with debounce when attribute and source is selected
-	useEffect(() => {
-		if (selectedAttribute || attributeSource) {
-			setDynamicVariablesSelectedValue({
-				name: selectedAttribute || dynamicVariablesSelectedValue?.name || '',
-				value:
-					attributeSource ||
-					dynamicVariablesSelectedValue?.value ||
-					AttributeSource.ALL_TELEMETRY,
-			});
-		}
-	}, [
-		selectedAttribute,
-		attributeSource,
-		setDynamicVariablesSelectedValue,
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-	]);
-
-	const isDarkMode = useIsDarkMode();
-	const errorText = (error as any)?.message || errorMessage;
-	return (
-		<div className="dynamic-variable-container">
-			<div className="dynamic-variable-config-container">
-				<CustomSelect
-					placeholder="Select a field"
-					options={Object.keys(filteredAttributes).map((key) => ({
-						label: key,
-						value: key,
-					}))}
-					loading={isLoading}
-					status={errorText ? 'error' : undefined}
-					onChange={(value): void => {
-						setSelectedAttribute(value);
-					}}
-					showSearch
-					errorMessage={errorText as any}
-					value={selectedAttribute || dynamicVariablesSelectedValue?.name}
-					onSearch={handleSearch}
-					onRetry={(): void => {
-						// reset error message
-						setErrorMessage(undefined);
-						setIsRetryableError(true);
-						refetch();
-					}}
-					showRetryButton={isRetryableError}
-				/>
-				<Typography className="dynamic-variable-from-text">from</Typography>
-				<span style={{ display: 'inline-flex', alignItems: 'center' }}>
-					<TextToolTip
-						text="By default, this searches across logs, traces, and metrics, which can be slow. Selecting a single source improves performance. Many fields share the same values across different signals (for example, `k8s.pod.name` is identical in logs, traces and metrics) making one source enough. Only use `All telemetry` when you need fields that have different values in different signal types."
-						useFilledIcon={false}
-						outlinedIcon={
-							<Info
-								size={14}
-								style={{
-									color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-									marginTop: 1,
-								}}
-							/>
-						}
-					/>
-				</span>
-				<Select
-					placeholder="Source"
-					defaultValue={AttributeSource.ALL_TELEMETRY}
-					options={sources.map((source) => ({ label: source, value: source }))}
-					onChange={(value): void => setAttributeSource(value as AttributeSource)}
-					value={attributeSource || dynamicVariablesSelectedValue?.value}
-				/>
-			</div>
-			{errorAttributeKeyMessage && (
-				<div>
-					<Typography.Text color="warning">
-						{errorAttributeKeyMessage}
-					</Typography.Text>
-				</div>
-			)}
-		</div>
-	);
-}
-
-DynamicVariable.defaultProps = {
-	errorAttributeKeyMessage: '',
-};
-
-export default DynamicVariable;

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/__test__/DynamicVariable.test.tsx

@@ -1,382 +0,0 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
-
-import DynamicVariable from '../DynamicVariable';
-
-// Mock scrollIntoView since it's not available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-// Mock dependencies
-jest.mock('hooks/dynamicVariables/useGetFieldKeys', () => ({
-	useGetFieldKeys: jest.fn(),
-}));
-
-jest.mock('hooks/useDebounce', () => ({
-	__esModule: true,
-	default: (value: any): any => value, // Return the same value without debouncing for testing
-}));
-
-describe('DynamicVariable Component', () => {
-	const mockSetDynamicVariablesSelectedValue = jest.fn();
-	const ATTRIBUTE_PLACEHOLDER = 'Select a field';
-	const LOADING_TEXT = 'Refreshing values...';
-	const DEFAULT_PROPS = {
-		setDynamicVariablesSelectedValue: mockSetDynamicVariablesSelectedValue,
-		dynamicVariablesSelectedValue: undefined,
-		errorAttributeKeyMessage: '',
-	};
-
-	const mockFieldKeysResponse = {
-		data: {
-			keys: {
-				'service.name': [],
-				'http.status_code': [],
-				duration: [],
-			},
-			complete: true,
-		},
-		httpStatusCode: 200,
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		// Default mock implementation
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: jest.fn(),
-		});
-	});
-
-	// Helper function to get the attribute select element
-	const getAttributeSelect = (): HTMLElement =>
-		screen.getAllByRole('combobox')[0];
-
-	// Helper function to get the source select element
-	const getSourceSelect = (): HTMLElement => screen.getAllByRole('combobox')[1];
-
-	it('renders with default state', () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Check for main components
-		expect(screen.getByText(ATTRIBUTE_PLACEHOLDER)).toBeInTheDocument();
-		expect(screen.getByText('All telemetry')).toBeInTheDocument();
-		expect(screen.getByText('from')).toBeInTheDocument();
-	});
-
-	it('uses existing values from dynamicVariablesSelectedValue prop', () => {
-		const selectedValue = {
-			name: 'service.name',
-			value: 'Logs',
-		};
-
-		render(
-			<DynamicVariable
-				setDynamicVariablesSelectedValue={mockSetDynamicVariablesSelectedValue}
-				dynamicVariablesSelectedValue={selectedValue}
-			/>,
-		);
-
-		// Verify values are set
-		expect(screen.getByText('service.name')).toBeInTheDocument();
-		expect(screen.getByText('Logs')).toBeInTheDocument();
-	});
-
-	it('shows loading state when fetching data', () => {
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: null,
-			isLoading: true,
-			refetch: jest.fn(),
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Should show loading state
-		expect(screen.getByText(LOADING_TEXT)).toBeInTheDocument();
-	});
-
-	it('shows error message when API fails', () => {
-		const errorMessage = 'Failed to fetch field keys';
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: { message: errorMessage },
-			isLoading: false,
-			refetch: jest.fn(),
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Should show error message
-		expect(screen.getByText(errorMessage)).toBeInTheDocument();
-	});
-
-	it('updates filteredAttributes when data is loaded', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Wait for options to appear in the dropdown
-		await waitFor(() => {
-			// Looking for option-content elements inside the CustomSelect dropdown
-			const options = document.querySelectorAll('.option-content');
-			expect(options.length).toBeGreaterThan(0);
-
-			// Check if all expected options are present
-			let foundServiceName = false;
-			let foundHttpStatusCode = false;
-			let foundDuration = false;
-
-			options.forEach((option) => {
-				const text = option.textContent?.trim();
-				if (text === 'service.name') {
-					foundServiceName = true;
-				}
-				if (text === 'http.status_code') {
-					foundHttpStatusCode = true;
-				}
-				if (text === 'duration') {
-					foundDuration = true;
-				}
-			});
-
-			expect(foundServiceName).toBe(true);
-			expect(foundHttpStatusCode).toBe(true);
-			expect(foundDuration).toBe(true);
-		});
-	});
-
-	it('calls setDynamicVariablesSelectedValue when attribute is selected', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Wait for options to appear, then click on service.name
-		await waitFor(() => {
-			// Need to find the option-item containing service.name
-			const serviceNameOption = screen.getByText('service.name');
-			expect(serviceNameOption).not.toBeNull();
-			expect(serviceNameOption?.textContent).toBe('service.name');
-
-			// Click on the option-item that contains service.name
-			const optionElement = serviceNameOption?.closest('.option-item');
-			if (optionElement) {
-				fireEvent.click(optionElement);
-			}
-		});
-
-		// Check if the setter was called with the correct value
-		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith({
-			name: 'service.name',
-			value: 'All telemetry',
-		});
-	});
-
-	it('calls setDynamicVariablesSelectedValue when source is selected', () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Get the Select component
-		const select = screen
-			.getByText('All telemetry')
-			.closest('div[class*="ant-select"]');
-		expect(select).toBeInTheDocument();
-
-		// Directly call the onChange handler by simulating the Select's onChange
-		// Find the props.onChange of the Select component and call it directly
-		fireEvent.mouseDown(select as HTMLElement);
-
-		// Use a more specific selector to find the "Logs" option
-		const optionsContainer = document.querySelector(
-			'.rc-virtual-list-holder-inner',
-		);
-		expect(optionsContainer).not.toBeNull();
-
-		// Find the option with Logs text content
-		const logsOption = Array.from(
-			optionsContainer?.querySelectorAll('.ant-select-item-option-content') || [],
-		)
-			.find((element) => element.textContent === 'Logs')
-			?.closest('.ant-select-item-option');
-
-		expect(logsOption).not.toBeNull();
-
-		// Click on it
-		if (logsOption) {
-			fireEvent.click(logsOption);
-		}
-
-		// Check if the setter was called with the correct value
-		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith(
-			expect.objectContaining({
-				value: 'Logs',
-			}),
-		);
-	});
-
-	it('filters attributes locally when complete is true', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Mock the filter function behavior
-		const attributeKeys = Object.keys(mockFieldKeysResponse.data.keys);
-
-		// Only "http.status_code" should match the filter
-		const expectedFilteredKeys = attributeKeys.filter((key) =>
-			key.includes('http'),
-		);
-
-		// Verify our expected filtering logic
-		expect(expectedFilteredKeys).toContain('http.status_code');
-		expect(expectedFilteredKeys).not.toContain('service.name');
-		expect(expectedFilteredKeys).not.toContain('duration');
-
-		// Now verify the component's filtering ability by inputting the search text
-		const inputElement = screen
-			.getAllByRole('combobox')[0]
-			.querySelector('input');
-		if (inputElement) {
-			fireEvent.change(inputElement, { target: { value: 'http' } });
-		}
-	});
-
-	it('triggers API call when complete is false and search text changes', async () => {
-		const mockRefetch = jest.fn();
-
-		// Set up the mock to indicate that data is not complete
-		// and needs to be fetched from the server
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: {
-				data: {
-					keys: {
-						'http.status_code': [],
-					},
-					complete: false, // This indicates server-side filtering is needed
-				},
-				httpStatusCode: 200,
-			},
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		// Render with Logs as the initial source
-		render(
-			<DynamicVariable
-				{...DEFAULT_PROPS}
-				dynamicVariablesSelectedValue={{
-					name: '',
-					value: 'Logs',
-				}}
-			/>,
-		);
-
-		// Clear any initial calls
-		mockRefetch.mockClear();
-
-		// Now test the search functionality
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Find the input element and simulate typing
-		const inputElement = document.querySelector(
-			'.ant-select-selection-search-input',
-		);
-
-		if (inputElement) {
-			// Simulate typing in the search input
-			fireEvent.change(inputElement, { target: { value: 'http' } });
-
-			// Verify that the input has the correct value
-			expect((inputElement as HTMLInputElement).value).toBe('http');
-
-			// Wait for the effect to run and verify refetch was called
-			await waitFor(
-				() => {
-					expect(mockRefetch).toHaveBeenCalled();
-				},
-				{ timeout: 3000 },
-			); // Increase timeout to give more time for the effect to run
-		}
-	});
-
-	it('triggers refetch when attributeSource changes', async () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Clear any initial calls
-		mockRefetch.mockClear();
-
-		// Find and click on the source select to open dropdown
-		const sourceSelectElement = getSourceSelect();
-		fireEvent.mouseDown(sourceSelectElement);
-
-		// Find and click on the "Metrics" option
-		const metricsOption = screen.getByText('Metrics');
-		fireEvent.click(metricsOption);
-
-		// Wait for the effect to run
-		await waitFor(() => {
-			// Verify that refetch was called after source selection
-			expect(mockRefetch).toHaveBeenCalled();
-		});
-	});
-
-	it('shows retry button when error occurs', () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: { message: 'Failed to fetch field keys' },
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Find and click reload icon (retry button)
-		const reloadIcon = screen.getByTestId('retry-button');
-		fireEvent.click(reloadIcon);
-
-		// Should trigger refetch
-		expect(mockRefetch).toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -1,420 +0,0 @@
-.query-container {
-	display: flex;
-	flex-flow: row wrap;
-	min-width: 0;
-	gap: 1rem;
-	margin-bottom: 1rem;
-	flex-direction: column;
-}
-
-.variable-item-container {
-	display: flex;
-	flex-direction: column;
-	border-radius: 3px;
-	border: 1px solid var(--l1-border);
-
-	.all-variables {
-		display: flex;
-		padding: 10px 16px;
-		align-items: center;
-		gap: 8px;
-		border-bottom: 1px solid var(--l1-border);
-		.all-variables-btn {
-			display: flex;
-			align-items: center;
-			height: 24px;
-			padding: 0px;
-			color: var(--muted-foreground);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 128.571% */
-		}
-
-		.all-variables-btn:hover {
-			background-color: unset !important;
-		}
-	}
-
-	.variable-item-content {
-		padding: 12px 16px 20px 16px;
-		display: flex;
-		flex-direction: column;
-		gap: 20px;
-
-		.variable-name-section {
-			flex-direction: column;
-			gap: 8px;
-
-			.typography-variables {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-			}
-
-			.name-input {
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-				padding: 6px 6px 6px 8px;
-			}
-		}
-		.variable-description-section {
-			flex-direction: column;
-			gap: 8px;
-
-			.typography-variables {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-			}
-
-			.description-input {
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-				padding: 6px 6px 6px 8px;
-			}
-		}
-
-		.variable-type-section {
-			justify-content: space-between;
-			margin-bottom: 0px;
-			align-items: center;
-
-			.variable-type-label-container {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-			}
-
-			.typography-variables {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-			}
-
-			.variable-type-btn-group {
-				display: grid;
-				grid-template-columns: max-content max-content max-content max-content;
-				height: 32px;
-				flex-shrink: 0;
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l2-background);
-				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-
-				.ant-btn {
-					width: 114px;
-					height: 32px;
-					flex-shrink: 0;
-					border-radius: 2px 0px 0px 2px;
-					width: 100%;
-				}
-
-				.variable-type-btn {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					gap: 4px;
-
-					.sidenav-beta-tag {
-						margin-left: 4px;
-					}
-
-					div {
-						display: flex;
-						align-items: center;
-					}
-				}
-
-				.variable-type-btn + .variable-type-btn {
-					border-left: 1px solid var(--l1-border);
-				}
-				.selected {
-					background: var(--l1-border);
-				}
-			}
-		}
-
-		.sort-values-section {
-			justify-content: space-between;
-			margin-bottom: 0;
-
-			.typography-variables {
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-
-			.typography-sort {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 166.667% */
-				letter-spacing: -0.06px;
-			}
-
-			.sort-input {
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-
-				.ant-select-selector {
-					width: 192px;
-					height: 32px;
-					padding: 6px 6px 6px 8px;
-					background: var(--l3-background);
-				}
-			}
-		}
-
-		.multiple-values-section {
-			justify-content: space-between;
-			align-items: flex-start;
-			margin-bottom: 0;
-
-			.typography-variables {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-				width: 339px;
-			}
-		}
-
-		.all-option-section {
-			justify-content: space-between;
-			align-items: flex-start;
-			margin-bottom: 0;
-
-			.typography-variables {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-				width: 339px;
-			}
-		}
-
-		.default-value-section {
-			display: grid;
-			grid-template-columns: max-content 1fr;
-
-			.typography-variables {
-				display: block;
-			}
-
-			.default-value-description {
-				display: block;
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px;
-				letter-spacing: -0.06px;
-			}
-		}
-
-		.dynamic-variable-section {
-			justify-content: space-between;
-			margin-bottom: 0;
-
-			.typography-variables {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-				width: 339px;
-			}
-		}
-
-		.variable-textbox-section {
-			justify-content: space-between;
-			margin-bottom: 0;
-			align-items: center;
-
-			.typography-variables {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-			}
-
-			.default-input {
-				display: flex;
-				height: 32px;
-				padding: 6px 6px 6px 8px;
-				align-items: flex-start;
-				gap: 4px;
-				flex: 1 0 0;
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-				width: 342px;
-			}
-		}
-
-		.variable-custom-section {
-			margin-bottom: 0px;
-			.custom-collapse {
-				width: 100%;
-				border-radius: 3px 3px 0px 0px;
-				border: 1px solid var(--l1-border);
-
-				.ant-collapse-item {
-					border-bottom: none;
-				}
-
-				.ant-collapse-header {
-					height: 38px;
-					border-radius: 3px 3px 0px 0px;
-					background: var(--l3-background);
-					align-items: center;
-					padding: 12px;
-					gap: 8px;
-
-					.ant-collapse-expand-icon {
-						padding-inline-end: 0px;
-					}
-
-					.ant-collapse-header-text {
-						color: var(--bg-robin-400);
-						font-family: 'Space Mono';
-						font-size: 14px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: 18px; /* 128.571% */
-						display: flex;
-						padding: 1px 2px;
-						align-items: center;
-						gap: 10px;
-						border-radius: 2px;
-						background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
-					}
-				}
-
-				.ant-collapse-content {
-					border-top: none;
-
-					.ant-collapse-content-box {
-						padding: 0px;
-					}
-
-					.comma-input {
-						height: 109px;
-						border: none;
-					}
-				}
-			}
-		}
-
-		.variables-preview-section {
-			display: flex;
-			flex-direction: column;
-			margin-bottom: 0px;
-			border-radius: 0px 0px 3px 3px;
-			border: 1px solid var(--l1-border);
-			height: 108px;
-			margin-top: -20px;
-			border-collapse: collapse;
-			gap: 5px;
-			flex-flow: column;
-
-			.typography-variables {
-				color: var(--bg-robin-400);
-				font-family: 'Space Mono';
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 128.571% */
-				display: inline-flex;
-				padding: 1px 2px;
-				align-items: center;
-				gap: 10px;
-				border-radius: 0px 0px 2px 0px;
-				background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
-			}
-
-			.preview-values {
-				padding: 4.5px 11px;
-				display: flex;
-				overflow-y: auto;
-				flex-flow: wrap;
-				gap: 8px;
-
-				[data-slot='badge'] {
-					height: 30px;
-					color: var(--l1-foreground);
-					font-family: 'Space Mono';
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px;
-					display: inline-flex;
-					letter-spacing: -0.07px;
-					align-items: center;
-					border-radius: 2px;
-					border: 1px solid var(--l1-border);
-					margin-inline-end: 0px;
-				}
-			}
-		}
-	}
-}
-
-.variable-item-footer {
-	margin-top: 12px;
-	display: flex;
-	flex-direction: row-reverse;
-
-	.footer-btn-discard {
-		display: flex;
-		align-items: center;
-		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-border);
-		height: 34px;
-		padding: 4px 8px 4px 10px;
-		box-shadow: none;
-	}
-
-	.footer-btn-save {
-		display: flex;
-		align-items: center;
-		border-radius: 2px;
-		border: 1px solid var(--primary-background);
-		background: var(--primary-background);
-		width: 123px;
-		height: 34px;
-		padding: 4px 8px 4px 10px;
-		box-shadow: none;
-	}
-}

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

@@ -1,828 +0,0 @@
-import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
-import {
-	IDashboardVariable,
-	TSortVariableValuesType,
-	VariableSortTypeArr,
-} from 'types/api/dashboard/getAll';
-
-import VariableItem from './VariableItem';
-
-// Mock modules
-jest.mock('api/dashboard/variables/dashboardVariablesQuery', () => ({
-	__esModule: true,
-	default: jest.fn().mockResolvedValue({
-		payload: {
-			variableValues: ['value1', 'value2', 'value3'],
-		},
-	}),
-}));
-
-jest.mock('uuid', () => ({
-	v4: jest.fn().mockReturnValue('test-uuid'),
-}));
-
-// Mock functions
-const onCancel = jest.fn();
-const onSave = jest.fn();
-const validateName = jest.fn(() => true);
-const validateAttributeKey = jest.fn(() => true);
-
-// Mode constant
-const VARIABLE_MODE = 'ADD';
-
-// Common text constants
-const TEXT = {
-	INCLUDE_ALL_VALUES: 'Include an option for ALL values',
-	ENABLE_MULTI_VALUES: 'Enable multiple values to be checked',
-	VARIABLE_EXISTS: 'Variable name already exists',
-	VARIABLE_WHITESPACE: 'Variable name cannot contain whitespaces',
-	ATTRIBUTE_KEY_EXISTS: 'A variable with this attribute key already exists',
-	SORT_VALUES: 'Sort Values',
-	DEFAULT_VALUE: 'Default Value',
-	ALL_VARIABLES: 'All variables',
-	DISCARD: 'Discard',
-	OPTIONS: 'Options',
-	QUERY: 'Query',
-	TEXTBOX: 'Textbox',
-	CUSTOM: 'Custom',
-	DYNAMIC: 'Dynamic',
-};
-
-// Common test constants
-const VARIABLE_DEFAULTS = {
-	sort: VariableSortTypeArr[0] as TSortVariableValuesType,
-	multiSelect: false,
-	showALLOption: false,
-};
-
-// Common variable properties
-const TEST_VAR_NAMES = {
-	VAR1: 'variable1',
-	VAR2: 'variable2',
-	VAR3: 'variable3',
-};
-
-const TEST_VAR_IDS = {
-	VAR1: 'var1',
-	VAR2: 'var2',
-	VAR3: 'var3',
-};
-
-const TEST_VAR_DESCRIPTIONS = {
-	VAR1: 'Variable 1',
-	VAR2: 'Variable 2',
-	VAR3: 'Variable 3',
-};
-
-// Common UI elements
-const SAVE_BUTTON_TEXT = 'Save Variable';
-const UNIQUE_NAME_PLACEHOLDER = 'Unique name of the variable';
-
-// Basic variable data for testing
-const basicVariableData: IDashboardVariable = {
-	id: TEST_VAR_IDS.VAR1,
-	name: TEST_VAR_NAMES.VAR1,
-	description: 'Test Variable 1',
-	type: 'QUERY',
-	queryValue: 'SELECT * FROM test',
-	...VARIABLE_DEFAULTS,
-	order: 0,
-};
-
-// Helper function to render VariableItem with common props
-const renderVariableItem = (
-	variableData: IDashboardVariable = basicVariableData,
-	existingVariables: Record<string, IDashboardVariable> = {},
-	validateNameFn = validateName,
-	validateAttributeKeyFn = validateAttributeKey,
-): void => {
-	render(
-		<VariableItem
-			variableData={variableData}
-			existingVariables={existingVariables}
-			onCancel={onCancel}
-			onSave={onSave}
-			validateName={validateNameFn}
-			validateAttributeKey={validateAttributeKeyFn}
-			mode={VARIABLE_MODE}
-		/>,
-	);
-};
-
-// Helper function to find button by text within its span
-const findButtonByText = (text: string): HTMLElement | null => {
-	const buttons = screen.getAllByRole('button');
-	return buttons.find((button) => button.textContent?.includes(text)) || null;
-};
-
-describe('VariableItem Component', () => {
-	// Test SQL query patterns
-	const SQL_PATTERN_DOT = 'SELECT * FROM test WHERE env = {{.variable2}}';
-	const SQL_PATTERN_DOLLAR = 'SELECT * FROM test WHERE env = $variable2';
-	const SQL_PATTERN_BRACKET = 'SELECT * FROM test WHERE service = [[variable3]]';
-	const SQL_PATTERN_BRACES = 'SELECT * FROM test WHERE app = {{variable1}}';
-	const SQL_PATTERN_NO_VARS = 'SELECT * FROM test WHERE env = "prod"';
-	const SQL_PATTERN_DOT_VAR1 =
-		'SELECT * FROM test WHERE service = {{.variable1}}';
-
-	// Error message text constant
-	const CIRCULAR_DEPENDENCY_ERROR = /Cannot save: Circular dependency detected/;
-
-	// Test functions and utilities
-	const createVariable = (
-		id: string,
-		name: string,
-		description: string,
-		queryValue: string,
-		order: number,
-	): IDashboardVariable => ({
-		id,
-		name,
-		description,
-		type: 'QUERY',
-		queryValue,
-		...VARIABLE_DEFAULTS,
-		order,
-	});
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders without crashing', () => {
-		renderVariableItem();
-
-		expect(screen.getByText(TEXT.ALL_VARIABLES)).toBeInTheDocument();
-		expect(screen.getByText('Name')).toBeInTheDocument();
-		expect(screen.getByText('Description')).toBeInTheDocument();
-		expect(screen.getByText('Variable Type')).toBeInTheDocument();
-	});
-
-	describe('Variable Name Validation', () => {
-		it('shows error when variable name already exists', () => {
-			// Set validateName to return false (name exists)
-			const mockValidateName = jest.fn().mockReturnValue(false);
-
-			renderVariableItem({ ...basicVariableData, name: '' }, {}, mockValidateName);
-
-			// Enter a name that already exists
-			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
-			fireEvent.change(nameInput, { target: { value: 'existingVariable' } });
-
-			// Error message should be displayed
-			expect(screen.getByText(TEXT.VARIABLE_EXISTS)).toBeInTheDocument();
-
-			// We won't check for button disabled state as it might be inconsistent in tests
-		});
-
-		it('allows save when current variable name is used', () => {
-			// Mock validate to return false for all other names but true for own name
-			const mockValidateName = jest
-				.fn()
-				.mockImplementation((name) => name === TEST_VAR_NAMES.VAR1);
-
-			renderVariableItem(basicVariableData, {}, mockValidateName);
-
-			// Enter the current variable name
-			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
-			fireEvent.change(nameInput, { target: { value: TEST_VAR_NAMES.VAR1 } });
-
-			// Error should not be visible
-			expect(screen.queryByText(TEXT.VARIABLE_EXISTS)).not.toBeInTheDocument();
-		});
-
-		it('shows error when variable name contains whitespace', () => {
-			renderVariableItem({ ...basicVariableData, name: '' });
-
-			// Enter a name with whitespace
-			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
-			fireEvent.change(nameInput, { target: { value: 'variable name' } });
-
-			// Error message should be displayed
-			expect(screen.getByText(TEXT.VARIABLE_WHITESPACE)).toBeInTheDocument();
-
-			// Save button should be disabled
-			const saveButton = screen.getByRole('button', { name: /save variable/i });
-			expect(saveButton).toBeDisabled();
-		});
-
-		it('allows variable name without whitespace', () => {
-			renderVariableItem({ ...basicVariableData, name: '' });
-
-			// Enter a valid name without whitespace
-			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
-			fireEvent.change(nameInput, { target: { value: 'variable.name' } });
-
-			// Error should not be visible
-			expect(screen.queryByText(TEXT.VARIABLE_WHITESPACE)).not.toBeInTheDocument();
-		});
-
-		it('validates whitespace in auto-generated name for dynamic variables', () => {
-			// Create a dynamic variable with empty name
-			const dynamicVariable: IDashboardVariable = {
-				...basicVariableData,
-				name: '',
-				type: 'DYNAMIC',
-				dynamicVariablesAttribute: 'service name', // Contains whitespace
-				dynamicVariablesSource: 'All telemetry',
-			};
-
-			renderVariableItem(dynamicVariable);
-
-			// Error message should be displayed for auto-generated name
-			expect(screen.getByText(TEXT.VARIABLE_WHITESPACE)).toBeInTheDocument();
-		});
-	});
-
-	describe('Dynamic Variable Attribute Key Validation', () => {
-		it('shows error when attribute key already exists', async () => {
-			// Mock validateAttributeKey to return false (attribute key exists)
-			const mockValidateAttributeKey = jest.fn().mockReturnValue(false);
-
-			// Create a dynamic variable
-			const dynamicVariable: IDashboardVariable = {
-				...basicVariableData,
-				name: 'test-variable',
-				type: 'DYNAMIC',
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'All telemetry',
-			};
-
-			renderVariableItem(
-				dynamicVariable,
-				{},
-				validateName,
-				mockValidateAttributeKey,
-			);
-
-			// Switch to Dynamic type to trigger the validation
-			const dynamicButton = findButtonByText(TEXT.DYNAMIC);
-			if (dynamicButton) {
-				fireEvent.click(dynamicButton);
-			}
-
-			// Error message should be displayed
-			await waitFor(() => {
-				expect(screen.getByText(TEXT.ATTRIBUTE_KEY_EXISTS)).toBeInTheDocument();
-			});
-
-			// Save button should be disabled
-			const saveButton = screen.getByRole('button', { name: /save variable/i });
-			expect(saveButton).toBeDisabled();
-		});
-
-		it('allows saving when attribute key is unique', async () => {
-			// Mock validateAttributeKey to return true (attribute key is unique)
-			const mockValidateAttributeKey = jest.fn().mockReturnValue(true);
-
-			// Create a dynamic variable
-			const dynamicVariable: IDashboardVariable = {
-				...basicVariableData,
-				name: 'test-variable',
-				type: 'DYNAMIC',
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'All telemetry',
-			};
-
-			renderVariableItem(
-				dynamicVariable,
-				{},
-				validateName,
-				mockValidateAttributeKey,
-			);
-
-			// Switch to Dynamic type
-			const dynamicButton = findButtonByText(TEXT.DYNAMIC);
-			if (dynamicButton) {
-				fireEvent.click(dynamicButton);
-			}
-
-			// Error should not be visible
-			await waitFor(() => {
-				expect(
-					screen.queryByText(TEXT.ATTRIBUTE_KEY_EXISTS),
-				).not.toBeInTheDocument();
-			});
-
-			// Save button should not be disabled due to attribute key error
-			const saveButton = screen.getByRole('button', { name: /save variable/i });
-			expect(saveButton).not.toBeDisabled();
-		});
-
-		it('allows same attribute key for current variable being edited', async () => {
-			// Mock validateAttributeKey to return true for same variable
-			const mockValidateAttributeKey = jest.fn().mockImplementation(
-				(attributeKey, currentVariableId) =>
-					// Allow if it's the same variable ID
-					currentVariableId === TEST_VAR_IDS.VAR1,
-			);
-
-			// Create a dynamic variable
-			const dynamicVariable: IDashboardVariable = {
-				...basicVariableData,
-				id: TEST_VAR_IDS.VAR1,
-				name: 'test-variable',
-				type: 'DYNAMIC',
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'All telemetry',
-			};
-
-			renderVariableItem(
-				dynamicVariable,
-				{},
-				validateName,
-				mockValidateAttributeKey,
-			);
-
-			// Error should not be visible
-			await waitFor(() => {
-				expect(
-					screen.queryByText(TEXT.ATTRIBUTE_KEY_EXISTS),
-				).not.toBeInTheDocument();
-			});
-		});
-
-		it('does not validate attribute key for non-dynamic variables', async () => {
-			// Mock validateAttributeKey to return false (would show error for dynamic)
-			const mockValidateAttributeKey = jest.fn().mockReturnValue(false);
-
-			// Create a non-dynamic variable
-			const queryVariable: IDashboardVariable = {
-				...basicVariableData,
-				name: 'test-variable',
-				type: 'QUERY',
-			};
-
-			renderVariableItem(
-				queryVariable,
-				{},
-				validateName,
-				mockValidateAttributeKey,
-			);
-
-			// No error should be displayed for query variables
-			expect(
-				screen.queryByText(TEXT.ATTRIBUTE_KEY_EXISTS),
-			).not.toBeInTheDocument();
-
-			// validateAttributeKey should not be called for non-dynamic variables
-			expect(mockValidateAttributeKey).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('Variable Type Switching', () => {
-		it('switches to CUSTOM variable type correctly', () => {
-			renderVariableItem();
-
-			// Find the Query button
-			const queryButton = findButtonByText(TEXT.QUERY);
-			expect(queryButton).toBeInTheDocument();
-			expect(queryButton).toHaveClass('selected');
-
-			// Find and click Custom button
-			const customButton = findButtonByText(TEXT.CUSTOM);
-			expect(customButton).toBeInTheDocument();
-
-			if (customButton) {
-				fireEvent.click(customButton);
-			}
-
-			// Custom button should now be selected
-			expect(customButton).toHaveClass('selected');
-			expect(queryButton).not.toHaveClass('selected');
-
-			// Custom options input should appear
-			expect(screen.getByText(TEXT.OPTIONS)).toBeInTheDocument();
-		});
-
-		it('switches to TEXTBOX variable type correctly', () => {
-			renderVariableItem();
-
-			// Find and click Textbox button
-			const textboxButton = findButtonByText(TEXT.TEXTBOX);
-			expect(textboxButton).toBeInTheDocument();
-
-			if (textboxButton) {
-				fireEvent.click(textboxButton);
-			}
-
-			// Textbox button should now be selected
-			expect(textboxButton).toHaveClass('selected');
-
-			// Default Value input should appear
-			expect(screen.getByText(TEXT.DEFAULT_VALUE)).toBeInTheDocument();
-			expect(
-				screen.getByPlaceholderText('Enter a default value (if any)...'),
-			).toBeInTheDocument();
-		});
-	});
-
-	describe('MultiSelect and ALL Option', () => {
-		it('enables ALL option only when multiSelect is enabled', async () => {
-			renderVariableItem();
-
-			// Initially, ALL option should not be visible
-			expect(screen.queryByText(TEXT.INCLUDE_ALL_VALUES)).not.toBeInTheDocument();
-
-			// Enable multiple values
-			const multipleValuesSwitch = screen
-				.getByText(TEXT.ENABLE_MULTI_VALUES)
-				.closest('.multiple-values-section')
-				?.querySelector('button');
-
-			expect(multipleValuesSwitch).toBeInTheDocument();
-			if (multipleValuesSwitch) {
-				fireEvent.click(multipleValuesSwitch);
-			}
-
-			// Now ALL option should be visible
-			await waitFor(() => {
-				expect(screen.getByText(TEXT.INCLUDE_ALL_VALUES)).toBeInTheDocument();
-			});
-
-			// Disable multiple values
-			if (multipleValuesSwitch) {
-				fireEvent.click(multipleValuesSwitch);
-			}
-
-			// ALL option should be hidden again
-			await waitFor(() => {
-				expect(screen.queryByText(TEXT.INCLUDE_ALL_VALUES)).not.toBeInTheDocument();
-			});
-		});
-
-		it('disables ALL option when multiSelect is disabled', async () => {
-			// Create variable with multiSelect and showALLOption both enabled
-			const variable: IDashboardVariable = {
-				...basicVariableData,
-				multiSelect: true,
-				showALLOption: true,
-			};
-
-			renderVariableItem(variable);
-
-			// ALL option should be visible initially
-			expect(screen.getByText(TEXT.INCLUDE_ALL_VALUES)).toBeInTheDocument();
-
-			// Disable multiple values
-			const multipleValuesSwitch = screen
-				.getByText(TEXT.ENABLE_MULTI_VALUES)
-				.closest('.multiple-values-section')
-				?.querySelector('button');
-
-			if (multipleValuesSwitch) {
-				fireEvent.click(multipleValuesSwitch);
-			}
-
-			// ALL option should be hidden
-			await waitFor(() => {
-				expect(screen.queryByText(TEXT.INCLUDE_ALL_VALUES)).not.toBeInTheDocument();
-			});
-
-			// Check that when saving, showALLOption is set to false
-			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
-			fireEvent.click(saveButton);
-
-			expect(onSave).toHaveBeenCalledWith(
-				expect.anything(),
-				expect.objectContaining({
-					multiSelect: false,
-					showALLOption: false,
-				}),
-				expect.anything(), // widgetIds prop
-			);
-		});
-	});
-
-	describe('Cancel and Navigation', () => {
-		it('calls onCancel when clicking All Variables button', () => {
-			renderVariableItem();
-
-			// Click All variables button
-			const allVariablesButton = screen.getByText(TEXT.ALL_VARIABLES);
-			fireEvent.click(allVariablesButton);
-
-			expect(onCancel).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onCancel when clicking Discard button', () => {
-			renderVariableItem();
-
-			// Click Discard button
-			const discardButton = screen.getByText(TEXT.DISCARD);
-			fireEvent.click(discardButton);
-
-			expect(onCancel).toHaveBeenCalledTimes(1);
-		});
-	});
-
-	describe('Cyclic Dependency Detection', () => {
-		// Common function to render the component with variables and click save
-		const renderAndSave = async (
-			variableData: IDashboardVariable,
-			existingVariables: Record<string, IDashboardVariable>,
-		): Promise<void> => {
-			renderVariableItem(variableData, existingVariables);
-
-			// Fill in the variable name if it's not already populated
-			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
-			if (nameInput.getAttribute('value') === '') {
-				fireEvent.change(nameInput, { target: { value: variableData.name || '' } });
-			}
-
-			// Click save button to trigger the dependency check
-			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
-			fireEvent.click(saveButton);
-		};
-
-		// Common expectations for finding circular dependency error
-		const expectCircularDependencyError = async (): Promise<void> => {
-			await waitFor(() => {
-				expect(screen.getByText(CIRCULAR_DEPENDENCY_ERROR)).toBeInTheDocument();
-				expect(onSave).not.toHaveBeenCalled();
-			});
-		};
-
-		// Test for cyclic dependency detection
-		it('detects circular dependency and shows error message', async () => {
-			// Create variables with circular dependency
-			const variable1 = createVariable(
-				TEST_VAR_IDS.VAR1,
-				TEST_VAR_NAMES.VAR1,
-				TEST_VAR_DESCRIPTIONS.VAR1,
-				SQL_PATTERN_DOT,
-				0,
-			);
-
-			const variable2 = createVariable(
-				TEST_VAR_IDS.VAR2,
-				TEST_VAR_NAMES.VAR2,
-				TEST_VAR_DESCRIPTIONS.VAR2,
-				SQL_PATTERN_DOT_VAR1,
-				1,
-			);
-
-			const existingVariables = {
-				[TEST_VAR_IDS.VAR2]: variable2,
-			};
-
-			await renderAndSave(variable1, existingVariables);
-			await expectCircularDependencyError();
-		});
-
-		// Test for saving with no circular dependency
-		it('allows saving when no circular dependency exists', async () => {
-			// Create variables without circular dependency
-			const variable1 = createVariable(
-				TEST_VAR_IDS.VAR1,
-				TEST_VAR_NAMES.VAR1,
-				TEST_VAR_DESCRIPTIONS.VAR1,
-				SQL_PATTERN_NO_VARS,
-				0,
-			);
-
-			const variable2 = createVariable(
-				TEST_VAR_IDS.VAR2,
-				TEST_VAR_NAMES.VAR2,
-				TEST_VAR_DESCRIPTIONS.VAR2,
-				SQL_PATTERN_DOT_VAR1,
-				1,
-			);
-
-			const existingVariables = {
-				[TEST_VAR_IDS.VAR2]: variable2,
-			};
-
-			await renderAndSave(variable1, existingVariables);
-
-			// Verify the onSave function was called
-			await waitFor(() => {
-				expect(onSave).toHaveBeenCalled();
-			});
-		});
-
-		// Test with multiple variable formats in query
-		it('detects circular dependency with different variable formats', async () => {
-			// Create variables with circular dependency using different formats
-			const variable1 = createVariable(
-				TEST_VAR_IDS.VAR1,
-				TEST_VAR_NAMES.VAR1,
-				TEST_VAR_DESCRIPTIONS.VAR1,
-				SQL_PATTERN_DOLLAR,
-				0,
-			);
-
-			const variable2 = createVariable(
-				TEST_VAR_IDS.VAR2,
-				TEST_VAR_NAMES.VAR2,
-				TEST_VAR_DESCRIPTIONS.VAR2,
-				SQL_PATTERN_BRACKET,
-				1,
-			);
-
-			const variable3 = createVariable(
-				TEST_VAR_IDS.VAR3,
-				TEST_VAR_NAMES.VAR3,
-				TEST_VAR_DESCRIPTIONS.VAR3,
-				SQL_PATTERN_BRACES,
-				2,
-			);
-
-			const existingVariables = {
-				[TEST_VAR_IDS.VAR2]: variable2,
-				[TEST_VAR_IDS.VAR3]: variable3,
-			};
-
-			await renderAndSave(variable1, existingVariables);
-			await expectCircularDependencyError();
-		});
-	});
-
-	describe('Textbox Variable Default Value Handling', () => {
-		it('saves textbox variable with defaultValue and selectedValue set to textboxValue', async () => {
-			const user = userEvent.setup();
-			const textboxVariable: IDashboardVariable = {
-				id: TEST_VAR_IDS.VAR1,
-				name: TEST_VAR_NAMES.VAR1,
-				description: 'Test Textbox Variable',
-				type: 'TEXTBOX',
-				textboxValue: 'my-default-value',
-				...VARIABLE_DEFAULTS,
-				order: 0,
-			};
-
-			renderVariableItem(textboxVariable);
-
-			// Click save button
-			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
-			await user.click(saveButton);
-
-			// Verify that onSave was called with defaultValue and selectedValue equal to textboxValue
-			expect(onSave).toHaveBeenCalledWith(
-				expect.anything(),
-				expect.objectContaining({
-					type: 'TEXTBOX',
-					textboxValue: 'my-default-value',
-					defaultValue: 'my-default-value',
-					selectedValue: 'my-default-value',
-				}),
-				expect.anything(),
-			);
-		});
-
-		it('saves textbox variable with empty values when textboxValue is empty', async () => {
-			const user = userEvent.setup();
-			const textboxVariable: IDashboardVariable = {
-				id: TEST_VAR_IDS.VAR1,
-				name: TEST_VAR_NAMES.VAR1,
-				description: 'Test Textbox Variable',
-				type: 'TEXTBOX',
-				textboxValue: '',
-				...VARIABLE_DEFAULTS,
-				order: 0,
-			};
-
-			renderVariableItem(textboxVariable);
-
-			// Click save button
-			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
-			await user.click(saveButton);
-
-			// Verify that onSave was called with empty defaultValue and selectedValue
-			expect(onSave).toHaveBeenCalledWith(
-				expect.anything(),
-				expect.objectContaining({
-					type: 'TEXTBOX',
-					textboxValue: '',
-					defaultValue: '',
-					selectedValue: '',
-				}),
-				expect.anything(),
-			);
-		});
-
-		it('updates textbox defaultValue and selectedValue when user changes textboxValue input', async () => {
-			const user = userEvent.setup();
-			const textboxVariable: IDashboardVariable = {
-				id: TEST_VAR_IDS.VAR1,
-				name: TEST_VAR_NAMES.VAR1,
-				description: 'Test Textbox Variable',
-				type: 'TEXTBOX',
-				textboxValue: 'initial-value',
-				...VARIABLE_DEFAULTS,
-				order: 0,
-			};
-
-			renderVariableItem(textboxVariable);
-
-			// Change the textbox value
-			const textboxInput = screen.getByPlaceholderText(
-				'Enter a default value (if any)...',
-			);
-			await user.clear(textboxInput);
-			await user.type(textboxInput, 'updated-value');
-
-			// Click save button
-			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
-			await user.click(saveButton);
-
-			// Verify that onSave was called with the updated defaultValue and selectedValue
-			expect(onSave).toHaveBeenCalledWith(
-				expect.anything(),
-				expect.objectContaining({
-					type: 'TEXTBOX',
-					textboxValue: 'updated-value',
-					defaultValue: 'updated-value',
-					selectedValue: 'updated-value',
-				}),
-				expect.anything(),
-			);
-		});
-
-		it('non-textbox variables use variableDefaultValue instead of textboxValue', async () => {
-			const user = userEvent.setup();
-			const queryVariable: IDashboardVariable = {
-				id: TEST_VAR_IDS.VAR1,
-				name: TEST_VAR_NAMES.VAR1,
-				description: 'Test Query Variable',
-				type: 'QUERY',
-				queryValue: 'SELECT * FROM test',
-				textboxValue: 'should-not-be-used',
-				defaultValue: 'query-default-value',
-				...VARIABLE_DEFAULTS,
-				order: 0,
-			};
-
-			renderVariableItem(queryVariable);
-
-			// Click save button
-			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
-			await user.click(saveButton);
-
-			// Verify that onSave was called with defaultValue not being textboxValue
-			expect(onSave).toHaveBeenCalledWith(
-				expect.anything(),
-				expect.objectContaining({
-					type: 'QUERY',
-					defaultValue: 'query-default-value',
-				}),
-				expect.anything(),
-			);
-
-			// Verify that defaultValue is NOT the textboxValue
-			const savedVariable = onSave.mock.calls[0][1];
-			expect(savedVariable.defaultValue).not.toBe('should-not-be-used');
-		});
-
-		it('switching to textbox type sets defaultValue and selectedValue correctly on save', async () => {
-			const user = userEvent.setup();
-			// Start with a QUERY variable
-			const queryVariable: IDashboardVariable = {
-				id: TEST_VAR_IDS.VAR1,
-				name: TEST_VAR_NAMES.VAR1,
-				description: 'Test Variable',
-				type: 'QUERY',
-				queryValue: 'SELECT * FROM test',
-				...VARIABLE_DEFAULTS,
-				order: 0,
-			};
-
-			renderVariableItem(queryVariable);
-
-			// Switch to TEXTBOX type
-			const textboxButton = findButtonByText(TEXT.TEXTBOX);
-			expect(textboxButton).toBeInTheDocument();
-			if (textboxButton) {
-				await user.click(textboxButton);
-			}
-
-			// Enter a default value in the textbox input
-			const textboxInput = screen.getByPlaceholderText(
-				'Enter a default value (if any)...',
-			);
-			await user.type(textboxInput, 'new-textbox-default');
-
-			// Click save button
-			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
-			await user.click(saveButton);
-
-			// Verify that onSave was called with type TEXTBOX and correct defaultValue and selectedValue
-			expect(onSave).toHaveBeenCalledWith(
-				expect.anything(),
-				expect.objectContaining({
-					type: 'TEXTBOX',
-					textboxValue: 'new-textbox-default',
-					defaultValue: 'new-textbox-default',
-					selectedValue: 'new-textbox-default',
-				}),
-				expect.anything(),
-			);
-		});
-	});
-});

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

@@ -1,851 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { orange } from '@ant-design/colors';
-import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Input, Select } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Switch } from '@signozhq/ui/switch';
-import { Typography } from '@signozhq/ui/typography';
-import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import cx from 'classnames';
-import Editor from 'components/Editor';
-import { CustomSelect } from 'components/NewSelect';
-import TextToolTip from 'components/TextToolTip';
-import { PANEL_GROUP_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useWidgetsByDynamicVariableId } from 'hooks/dashboard/useWidgetsByDynamicVariableId';
-import { getWidgetsHavingDynamicVariableAttribute } from 'hooks/dashboard/utils';
-import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
-import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import { isEmpty, map } from 'lodash-es';
-import {
-	ArrowLeft,
-	Check,
-	ClipboardType,
-	DatabaseZap,
-	Info,
-	LayoutList,
-	Pyramid,
-	X,
-} from '@signozhq/icons';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
-import { AppState } from 'store/reducers';
-import {
-	IDashboardVariable,
-	TSortVariableValuesType,
-	TVariableQueryType,
-	VariableSortTypeArr,
-	Widgets,
-} from 'types/api/dashboard/getAll';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { v4 as generateUUID } from 'uuid';
-
-import {
-	buildDependencies,
-	buildDependencyGraph,
-} from '../../../DashboardVariablesSelection/util';
-import { variablePropsToPayloadVariables } from '../../../utils';
-import { TVariableMode } from '../types';
-import DynamicVariable from './DynamicVariable/DynamicVariable';
-import { LabelContainer, VariableItemRow } from './styles';
-import { WidgetSelector } from './WidgetSelector';
-
-import './VariableItem.styles.scss';
-
-const { Option } = Select;
-
-interface VariableItemProps {
-	variableData: IDashboardVariable;
-	existingVariables: Record<string, IDashboardVariable>;
-	onCancel: () => void;
-	onSave: (
-		mode: TVariableMode,
-		variableData: IDashboardVariable,
-		widgetIds?: string[],
-	) => void;
-	validateName: (arg0: string) => boolean;
-	validateAttributeKey: (
-		attributeKey: string,
-		currentVariableId?: string,
-	) => boolean;
-	mode: TVariableMode;
-}
-function VariableItem({
-	variableData,
-	existingVariables,
-	onCancel,
-	onSave,
-	validateName,
-	validateAttributeKey,
-	mode,
-}: VariableItemProps): JSX.Element {
-	const [variableName, setVariableName] = useState<string>(
-		variableData.name || '',
-	);
-	const [hasUserManuallyChangedName, setHasUserManuallyChangedName] =
-		useState<boolean>(false);
-	const [variableDescription, setVariableDescription] = useState<string>(
-		variableData.description || '',
-	);
-	const [queryType, setQueryType] = useState<TVariableQueryType>(
-		variableData.type || 'DYNAMIC',
-	);
-	const [variableQueryValue, setVariableQueryValue] = useState<string>(
-		variableData.queryValue || '',
-	);
-	const [variableCustomValue, setVariableCustomValue] = useState<string>(
-		variableData.customValue || '',
-	);
-	const [variableTextboxValue, setVariableTextboxValue] = useState<string>(
-		variableData.textboxValue || '',
-	);
-	const [variableSortType, setVariableSortType] =
-		useState<TSortVariableValuesType>(
-			variableData.sort || VariableSortTypeArr[0],
-		);
-	const [variableMultiSelect, setVariableMultiSelect] = useState<boolean>(
-		variableData.multiSelect || false,
-	);
-	const [variableShowALLOption, setVariableShowALLOption] = useState<boolean>(
-		variableData.showALLOption || false,
-	);
-	const [previewValues, setPreviewValues] = useState<string[]>([]);
-	const [variableDefaultValue, setVariableDefaultValue] = useState<string>(
-		(variableData.defaultValue as string) || '',
-	);
-
-	const isDarkMode = useIsDarkMode();
-
-	const [dynamicVariablesSelectedValue, setDynamicVariablesSelectedValue] =
-		useState<{ name: string; value: string }>();
-
-	// Error messages
-	const [errorName, setErrorName] = useState<boolean>(false);
-	const [errorNameMessage, setErrorNameMessage] = useState<string>('');
-	const [errorAttributeKey, setErrorAttributeKey] = useState<boolean>(false);
-	const [errorAttributeKeyMessage, setErrorAttributeKeyMessage] =
-		useState<string>('');
-	const [errorPreview, setErrorPreview] = useState<string | null>(null);
-
-	useEffect(() => {
-		if (
-			variableData.dynamicVariablesAttribute &&
-			variableData.dynamicVariablesSource
-		) {
-			setDynamicVariablesSelectedValue({
-				name: variableData.dynamicVariablesAttribute,
-				value: variableData.dynamicVariablesSource,
-			});
-		}
-	}, [
-		variableData.dynamicVariablesAttribute,
-		variableData.dynamicVariablesSource,
-	]);
-
-	// Validate attribute key uniqueness for dynamic variables
-	useEffect(() => {
-		if (queryType === 'DYNAMIC' && dynamicVariablesSelectedValue?.name) {
-			if (
-				!validateAttributeKey(dynamicVariablesSelectedValue.name, variableData.id)
-			) {
-				setErrorAttributeKey(true);
-				setErrorAttributeKeyMessage(
-					'A variable with this attribute key already exists',
-				);
-			} else {
-				setErrorAttributeKey(false);
-				setErrorAttributeKeyMessage('');
-			}
-		} else {
-			setErrorAttributeKey(false);
-			setErrorAttributeKeyMessage('');
-		}
-	}, [
-		queryType,
-		dynamicVariablesSelectedValue?.name,
-		validateAttributeKey,
-		variableData.id,
-	]);
-
-	// Auto-set variable name to selected attribute name in creation mode when user hasn't manually changed it
-	useEffect(() => {
-		if (
-			mode === 'ADD' && // Only in creation mode
-			queryType === 'DYNAMIC' && // Only for dynamic variables
-			dynamicVariablesSelectedValue?.name && // Attribute is selected
-			!hasUserManuallyChangedName // User hasn't manually changed the name
-		) {
-			const newName = dynamicVariablesSelectedValue.name;
-			setVariableName(newName);
-
-			// Trigger validation for the auto-set name
-			if (/\s/.test(newName)) {
-				setErrorName(true);
-				setErrorNameMessage('Variable name cannot contain whitespaces');
-			} else if (!validateName(newName)) {
-				setErrorName(true);
-				setErrorNameMessage('Variable name already exists');
-			} else {
-				setErrorName(false);
-				setErrorNameMessage('');
-			}
-		}
-	}, [
-		mode,
-		queryType,
-		dynamicVariablesSelectedValue?.name,
-		hasUserManuallyChangedName,
-		validateName,
-	]);
-
-	const REQUIRED_NAME_MESSAGE = 'Variable name is required';
-
-	// Initialize error state for empty name
-	useEffect(() => {
-		if (!variableName.trim()) {
-			setErrorName(true);
-		}
-	}, [variableName]);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const { data: fieldValues } = useGetFieldValues({
-		signal:
-			dynamicVariablesSelectedValue?.value === 'All telemetry'
-				? undefined
-				: (dynamicVariablesSelectedValue?.value?.toLowerCase() as
-						| 'traces'
-						| 'logs'
-						| 'metrics'),
-		name: dynamicVariablesSelectedValue?.name || '',
-		enabled:
-			!!dynamicVariablesSelectedValue?.name &&
-			!!dynamicVariablesSelectedValue?.value,
-		startUnixMilli: minTime,
-		endUnixMilli: maxTime,
-	});
-
-	const [selectedWidgets, setSelectedWidgets] = useState<string[]>([]);
-
-	const { dashboardData } = useDashboardStore();
-	const widgetsByDynamicVariableId = useWidgetsByDynamicVariableId();
-
-	useEffect(() => {
-		if (variableData?.id && variableData.id in widgetsByDynamicVariableId) {
-			setSelectedWidgets(widgetsByDynamicVariableId[variableData.id] || []);
-		} else if (dynamicVariablesSelectedValue?.name) {
-			const widgets = getWidgetsHavingDynamicVariableAttribute(
-				dynamicVariablesSelectedValue?.name,
-				(dashboardData?.data?.widgets?.filter(
-					(widget) => widget.panelTypes !== PANEL_GROUP_TYPES.ROW,
-				) || []) as Widgets[],
-				variableData.name,
-			);
-			setSelectedWidgets(widgets || []);
-		}
-	}, [
-		dynamicVariablesSelectedValue?.name,
-		dashboardData,
-		variableData.id,
-		variableData.name,
-		widgetsByDynamicVariableId,
-	]);
-
-	useEffect(() => {
-		if (queryType === 'CUSTOM') {
-			setPreviewValues(
-				sortValues(
-					commaValuesParser(variableCustomValue),
-					variableSortType,
-				) as never,
-			);
-		}
-		if (queryType === 'QUERY') {
-			setPreviewValues((prev) => sortValues(prev, variableSortType) as never);
-		}
-	}, [
-		queryType,
-		variableCustomValue,
-		variableData.customValue,
-		variableData.type,
-		variableSortType,
-	]);
-
-	useEffect(() => {
-		if (
-			queryType === 'DYNAMIC' &&
-			fieldValues &&
-			dynamicVariablesSelectedValue?.name &&
-			dynamicVariablesSelectedValue?.value
-		) {
-			setPreviewValues(
-				sortValues(
-					fieldValues.data?.normalizedValues || [],
-					variableSortType,
-				) as never,
-			);
-		}
-	}, [
-		fieldValues,
-		variableSortType,
-		queryType,
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-	]);
-
-	const variableValue = useMemo(() => {
-		if (queryType === 'TEXTBOX') {
-			return variableTextboxValue;
-		}
-
-		if (variableMultiSelect) {
-			let value = variableData.selectedValue;
-			if (isEmpty(value)) {
-				if (variableData.showALLOption) {
-					if (variableDefaultValue) {
-						value = variableDefaultValue;
-					} else {
-						value = previewValues;
-					}
-				} else if (variableDefaultValue) {
-					value = variableDefaultValue;
-				} else {
-					value = previewValues?.[0];
-				}
-			}
-
-			return value;
-		}
-
-		if (isEmpty(variableData.selectedValue)) {
-			if (variableDefaultValue) {
-				return variableDefaultValue;
-			}
-			return previewValues?.[0]?.toString();
-		}
-
-		return variableData.selectedValue || variableDefaultValue;
-	}, [
-		variableMultiSelect,
-		variableData.selectedValue,
-		variableData.showALLOption,
-		variableDefaultValue,
-		variableTextboxValue,
-		queryType,
-		previewValues,
-	]);
-
-	const handleSave = (): void => {
-		// Check for cyclic dependencies
-		const newVariable = {
-			name: variableName,
-			description: variableDescription,
-			type: queryType,
-			queryValue: variableQueryValue,
-			customValue: variableCustomValue,
-			textboxValue: variableTextboxValue,
-			multiSelect: variableMultiSelect,
-			showALLOption: queryType === 'DYNAMIC' ? true : variableShowALLOption,
-			sort: variableSortType,
-			// the reason we need to do this is because defaultValues are treated differently in case of textbox type
-			// They are the exact same and not like the other types where defaultValue is a separate field
-			defaultValue:
-				queryType === 'TEXTBOX' ? variableTextboxValue : variableDefaultValue,
-			modificationUUID: generateUUID(),
-			id: variableData.id || generateUUID(),
-			order: variableData.order,
-			...(queryType === 'DYNAMIC' && {
-				dynamicVariablesAttribute: dynamicVariablesSelectedValue?.name,
-				dynamicVariablesSource: dynamicVariablesSelectedValue?.value,
-			}),
-			selectedValue: variableValue,
-			allSelected: variableData.allSelected,
-		};
-
-		const allVariables = [...Object.values(existingVariables), newVariable];
-
-		const dependencies = buildDependencies(allVariables);
-		const { hasCycle, cycleNodes } = buildDependencyGraph(dependencies);
-
-		if (hasCycle) {
-			setErrorPreview(
-				`Cannot save: Circular dependency detected between variables: ${cycleNodes?.join(
-					' → ',
-				)}`,
-			);
-			return;
-		}
-
-		onSave(mode, newVariable, selectedWidgets);
-	};
-
-	// Fetches the preview values for the SQL variable query
-	const handleQueryResult = (response: any): void => {
-		if (response?.payload?.variableValues) {
-			setPreviewValues(
-				sortValues(
-					response.payload?.variableValues || [],
-					variableSortType,
-				) as never,
-			);
-		} else {
-			setPreviewValues([]);
-		}
-	};
-
-	const { isFetching: previewLoading, refetch: runQuery } = useQuery(
-		[REACT_QUERY_KEY.DASHBOARD_BY_ID, variableData.name, variableName],
-		{
-			enabled: false,
-			queryFn: () =>
-				dashboardVariablesQuery({
-					query: variableQueryValue || '',
-					variables: variablePropsToPayloadVariables(existingVariables),
-				}),
-			refetchOnWindowFocus: false,
-			onSuccess: (response) => {
-				setErrorPreview(null);
-				handleQueryResult(response);
-			},
-			onError: (error: {
-				details: {
-					error: string;
-				};
-			}) => {
-				const { details } = error;
-
-				if (details.error) {
-					let message = details.error;
-					if ((details.error ?? '').toString().includes('Syntax error:')) {
-						message =
-							'Please make sure query is valid and dependent variables are selected';
-					}
-					setErrorPreview(message);
-				}
-			},
-		},
-	);
-
-	const handleTestRunQuery = useCallback(() => {
-		runQuery();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	return (
-		<>
-			<div className="variable-item-container">
-				<div className="all-variables">
-					<Button
-						type="text"
-						className="all-variables-btn"
-						icon={<ArrowLeft size={14} />}
-						onClick={onCancel}
-					>
-						All variables
-					</Button>
-				</div>
-				<div className="variable-item-content">
-					<VariableItemRow className="variable-name-section">
-						<LabelContainer>
-							<Typography className="typography-variables">Name</Typography>
-						</LabelContainer>
-						<div>
-							<Input
-								placeholder="Unique name of the variable"
-								value={variableName}
-								className="name-input"
-								onChange={({ target: { value } }): void => {
-									setVariableName(value);
-									setHasUserManuallyChangedName(true); // Mark that user has manually changed the name
-
-									// Check for empty name
-									if (!value.trim()) {
-										setErrorName(true);
-										setErrorNameMessage(REQUIRED_NAME_MESSAGE);
-									}
-									// Check for whitespace in name
-									else if (/\s/.test(value)) {
-										setErrorName(true);
-										setErrorNameMessage('Variable name cannot contain whitespaces');
-									}
-									// Check for duplicate name
-									else if (!validateName(value) && value !== variableData.name) {
-										setErrorName(true);
-										setErrorNameMessage('Variable name already exists');
-									}
-									// No errors
-									else {
-										setErrorName(false);
-										setErrorNameMessage('');
-									}
-								}}
-							/>
-							<div>
-								<Typography.Text color="warning">{errorNameMessage}</Typography.Text>
-							</div>
-						</div>
-					</VariableItemRow>
-					<VariableItemRow className="variable-description-section">
-						<LabelContainer>
-							<Typography className="typography-variables">Description</Typography>
-						</LabelContainer>
-
-						<Input.TextArea
-							value={variableDescription}
-							placeholder="Enter a description for the variable"
-							className="description-input"
-							rows={3}
-							onChange={(e): void => setVariableDescription(e.target.value)}
-						/>
-					</VariableItemRow>
-					<VariableItemRow className="variable-type-section">
-						<LabelContainer className="variable-type-label-container">
-							<Typography className="typography-variables">Variable Type</Typography>
-							<TextToolTip
-								text="Learn more about supported variable types"
-								url="https://signoz.io/docs/userguide/manage-variables/#supported-variable-types"
-								urlText="here"
-								useFilledIcon={false}
-								outlinedIcon={
-									<Info
-										size={14}
-										style={{
-											color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-										}}
-									/>
-								}
-							/>
-						</LabelContainer>
-
-						<div className="variable-type-btn-group">
-							<Button
-								type="text"
-								icon={<Pyramid size={14} />}
-								className={cx(
-									'variable-type-btn',
-									queryType === 'DYNAMIC' ? 'selected' : '',
-								)}
-								onClick={(): void => {
-									setQueryType('DYNAMIC');
-									setPreviewValues([]);
-									// Reset manual change flag if no name is entered
-									if (!variableName.trim()) {
-										setHasUserManuallyChangedName(false);
-									}
-								}}
-							>
-								Dynamic
-								<Badge color="robin" className="sidenav-beta-tag">
-									Beta
-								</Badge>
-							</Button>
-							<Button
-								type="text"
-								icon={<ClipboardType size={14} />}
-								className={cx(
-									'variable-type-btn',
-									queryType === 'TEXTBOX' ? 'selected' : '',
-								)}
-								onClick={(): void => {
-									setQueryType('TEXTBOX');
-									setPreviewValues([]);
-									// Reset manual change flag if no name is entered
-									if (!variableName.trim()) {
-										setHasUserManuallyChangedName(false);
-									}
-								}}
-							>
-								Textbox
-							</Button>
-							<Button
-								type="text"
-								icon={<LayoutList size={14} />}
-								className={cx(
-									'variable-type-btn',
-									queryType === 'CUSTOM' ? 'selected' : '',
-								)}
-								onClick={(): void => {
-									setQueryType('CUSTOM');
-									setPreviewValues([]);
-									// Reset manual change flag if no name is entered
-									if (!variableName.trim()) {
-										setHasUserManuallyChangedName(false);
-									}
-								}}
-							>
-								Custom
-							</Button>
-							<Button
-								type="text"
-								icon={<DatabaseZap size={14} />}
-								className={cx(
-									'variable-type-btn',
-									queryType === 'QUERY' ? 'selected' : '',
-								)}
-								onClick={(): void => {
-									setQueryType('QUERY');
-									setPreviewValues([]);
-									// Reset manual change flag if no name is entered
-									if (!variableName.trim()) {
-										setHasUserManuallyChangedName(false);
-									}
-								}}
-							>
-								Query
-								<Badge color="amber" className="sidenav-beta-tag">
-									Not Recommended
-								</Badge>
-								<div onClick={(e): void => e.stopPropagation()}>
-									<TextToolTip
-										text="Learn why we don't recommend"
-										url="https://signoz.io/docs/userguide/manage-variables/#why-avoid-clickhouse-query-variables"
-										urlText="here"
-										useFilledIcon={false}
-										outlinedIcon={
-											<Info
-												size={14}
-												style={{
-													color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-												}}
-											/>
-										}
-									/>
-								</div>
-							</Button>
-						</div>
-					</VariableItemRow>
-					{queryType === 'DYNAMIC' && (
-						<div className="variable-dynamic-section">
-							<DynamicVariable
-								setDynamicVariablesSelectedValue={setDynamicVariablesSelectedValue}
-								dynamicVariablesSelectedValue={dynamicVariablesSelectedValue}
-								errorAttributeKeyMessage={errorAttributeKeyMessage}
-							/>
-						</div>
-					)}
-					{queryType === 'QUERY' && (
-						<div className="query-container">
-							<LabelContainer>
-								<Typography>Query</Typography>
-							</LabelContainer>
-
-							<div style={{ flex: 1, position: 'relative' }}>
-								<Editor
-									language="sql"
-									value={variableQueryValue}
-									onChange={(e): void => setVariableQueryValue(e)}
-									height="240px"
-									options={{
-										fontSize: 13,
-										wordWrap: 'on',
-										lineNumbers: 'off',
-										glyphMargin: false,
-										folding: false,
-										lineDecorationsWidth: 0,
-										lineNumbersMinChars: 0,
-										minimap: {
-											enabled: false,
-										},
-									}}
-								/>
-								<Button
-									type="primary"
-									size="small"
-									onClick={handleTestRunQuery}
-									style={{
-										position: 'absolute',
-										bottom: 0,
-									}}
-									loading={previewLoading}
-								>
-									Test Run Query
-								</Button>
-							</div>
-						</div>
-					)}
-					{queryType === 'CUSTOM' && (
-						<VariableItemRow className="variable-custom-section">
-							<Collapse
-								collapsible="header"
-								rootClassName="custom-collapse"
-								defaultActiveKey={['1']}
-								items={[
-									{
-										key: '1',
-										label: 'Options',
-										children: (
-											<Input.TextArea
-												value={variableCustomValue}
-												placeholder="Enter options separated by commas."
-												rootClassName="comma-input"
-												onChange={(e): void => {
-													setVariableCustomValue(e.target.value);
-													setPreviewValues(
-														sortValues(
-															commaValuesParser(e.target.value),
-															variableSortType,
-														) as never,
-													);
-												}}
-											/>
-										),
-									},
-								]}
-							/>
-						</VariableItemRow>
-					)}
-					{queryType === 'TEXTBOX' && (
-						<VariableItemRow className="variable-textbox-section">
-							<LabelContainer>
-								<Typography className="typography-variables">Default Value</Typography>
-							</LabelContainer>
-							<Input
-								value={variableTextboxValue}
-								className="default-input"
-								onChange={(e): void => {
-									setVariableTextboxValue(e.target.value);
-								}}
-								placeholder="Enter a default value (if any)..."
-								style={{ width: 400 }}
-							/>
-						</VariableItemRow>
-					)}
-					{(queryType === 'QUERY' ||
-						queryType === 'CUSTOM' ||
-						queryType === 'DYNAMIC') && (
-						<>
-							<VariableItemRow className="variables-preview-section">
-								<LabelContainer style={{ width: '100%' }}>
-									<Typography className="typography-variables">
-										Preview of Values
-									</Typography>
-								</LabelContainer>
-								<div className="preview-values">
-									{errorPreview ? (
-										<Typography style={{ color: orange[5] }}>{errorPreview}</Typography>
-									) : (
-										map(previewValues, (value, idx) => (
-											<Badge key={`${value}${idx}`} color="vanilla">
-												{value.toString()}
-											</Badge>
-										))
-									)}
-								</div>
-							</VariableItemRow>
-							<VariableItemRow className="sort-values-section">
-								<LabelContainer>
-									<Typography className="typography-variables">Sort Values</Typography>
-								</LabelContainer>
-
-								<Select
-									defaultActiveFirstOption
-									defaultValue={VariableSortTypeArr[0]}
-									value={variableSortType}
-									onChange={(value: TSortVariableValuesType): void =>
-										setVariableSortType(value)
-									}
-									className="sort-input"
-								>
-									<Option value={VariableSortTypeArr[0]}>Disabled</Option>
-									<Option value={VariableSortTypeArr[1]}>Ascending</Option>
-									<Option value={VariableSortTypeArr[2]}>Descending</Option>
-								</Select>
-							</VariableItemRow>
-							<VariableItemRow className="multiple-values-section">
-								<LabelContainer>
-									<Typography className="typography-variables">
-										Enable multiple values to be checked
-									</Typography>
-								</LabelContainer>
-								<Switch
-									value={variableMultiSelect}
-									onChange={(e): void => {
-										setVariableMultiSelect(e);
-										if (!e) {
-											setVariableShowALLOption(false);
-										}
-									}}
-								/>
-							</VariableItemRow>
-							{variableMultiSelect && queryType !== 'DYNAMIC' && (
-								<VariableItemRow className="all-option-section">
-									<LabelContainer>
-										<Typography className="typography-variables">
-											Include an option for ALL values
-										</Typography>
-									</LabelContainer>
-									<Switch
-										value={variableShowALLOption}
-										onChange={(e): void => setVariableShowALLOption(e)}
-									/>
-								</VariableItemRow>
-							)}
-							<VariableItemRow className="default-value-section">
-								<LabelContainer>
-									<Typography className="typography-variables">Default Value</Typography>
-									<Typography className="default-value-description">
-										{queryType === 'QUERY'
-											? 'Click Test Run Query to see the values or add custom value'
-											: 'Select a value from the preview values or add custom value'}
-									</Typography>
-								</LabelContainer>
-								<CustomSelect
-									placeholder="Select a default value"
-									value={variableDefaultValue}
-									onChange={(value): void => setVariableDefaultValue(value)}
-									options={previewValues.map((value) => ({
-										label: value,
-										value,
-									}))}
-								/>
-							</VariableItemRow>
-						</>
-					)}
-					{queryType === 'DYNAMIC' && (
-						<VariableItemRow className="dynamic-variable-section">
-							<LabelContainer>
-								<Typography className="typography-variables">
-									Select Panels to apply this variable
-								</Typography>
-							</LabelContainer>
-							<WidgetSelector
-								selectedWidgets={selectedWidgets}
-								setSelectedWidgets={setSelectedWidgets}
-							/>
-						</VariableItemRow>
-					)}
-				</div>
-			</div>
-			<div className="variable-item-footer">
-				<VariableItemRow>
-					<Button
-						type="default"
-						onClick={onCancel}
-						icon={<X size={14} />}
-						className="footer-btn-discard"
-					>
-						Discard
-					</Button>
-					<Button
-						type="primary"
-						onClick={handleSave}
-						disabled={errorName || errorAttributeKey}
-						icon={<Check size={14} />}
-						className="footer-btn-save"
-					>
-						Save Variable
-					</Button>
-				</VariableItemRow>
-			</div>
-		</>
-	);
-}
-
-export default VariableItem;

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

@@ -1,64 +0,0 @@
-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 { WidgetRow, Widgets } from 'types/api/dashboard/getAll';
-
-export function WidgetSelector({
-	selectedWidgets,
-	setSelectedWidgets,
-}: {
-	selectedWidgets: string[];
-	setSelectedWidgets: (widgets: string[]) => void;
-}): JSX.Element {
-	const { dashboardData } = useDashboardStore();
-
-	// Get layout IDs for cross-referencing
-	const layoutIds = new Set(
-		(dashboardData?.data?.layout || []).map((item) => item.i),
-	);
-
-	// Filter and deduplicate widgets by ID, keeping only those with layout entries
-	// and excluding row widgets since they are not panels that can have variables
-	const widgets = Object.values(
-		(dashboardData?.data?.widgets || []).reduce(
-			(acc: Record<string, WidgetRow | Widgets>, widget: WidgetRow | Widgets) => {
-				if (
-					widget.id &&
-					layoutIds.has(widget.id) &&
-					widget.panelTypes !== PANEL_GROUP_TYPES.ROW
-				) {
-					acc[widget.id] = widget;
-				}
-				return acc;
-			},
-			{},
-		),
-	);
-
-	// Filter selectedWidgets to only include widgets that are present in the current layout
-	const validSelectedWidgets = selectedWidgets.filter((widgetId) =>
-		layoutIds.has(widgetId),
-	);
-
-	// Update selectedWidgets if any invalid widgets were removed
-	React.useEffect(() => {
-		if (validSelectedWidgets.length !== selectedWidgets.length) {
-			setSelectedWidgets(validSelectedWidgets);
-		}
-	}, [validSelectedWidgets, selectedWidgets.length, setSelectedWidgets]);
-
-	return (
-		<CustomMultiSelect
-			placeholder="Select Panels"
-			options={widgets.map((widget: WidgetRow | Widgets) => ({
-				label: generateGridTitle(widget.title),
-				value: widget.id,
-			}))}
-			value={validSelectedWidgets}
-			onChange={(value): void => setSelectedWidgets(value as string[])}
-			showLabels
-		/>
-	);
-}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles.ts

@@ -1,11 +0,0 @@
-import { Row } from 'antd';
-import styled from 'styled-components';
-
-export const VariableItemRow = styled(Row)`
-	gap: 1rem;
-	margin-bottom: 1rem;
-`;
-
-export const LabelContainer = styled.div`
-	width: 200px;
-`;

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.test.tsx

@@ -1,328 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource } from 'types/common/queryBuilder';
-import { removeVariableReferencesFromDashboard } from './addTagFiltersToDashboard';
-
-// ---------------------------------------------------------------------------
-// Shared fixture helpers
-// ---------------------------------------------------------------------------
-
-const EMPTY_BUILDER = {
-	queryData: [] as any,
-	queryFormulas: [],
-	queryTraceOperator: [],
-};
-
-const BASE_WIDGET = {
-	opacity: '1',
-	nullZeroValues: 'null',
-	timePreferance: 'GLOBAL_TIME' as const,
-	softMin: null,
-	softMax: null,
-	selectedLogFields: null,
-	selectedTracesFields: null,
-};
-
-const DEFAULT_QUERY_DATA = {
-	queryName: 'q1',
-	// In QB v5, expression holds the query label (A/B/C), not a filter expression
-	expression: 'A',
-	dataSource: DataSource.METRICS,
-	functions: [],
-	groupBy: [],
-	filters: { items: [] as any[], op: 'AND' as const },
-	legend: '',
-	disabled: false,
-	having: [],
-	limit: null,
-	stepInterval: null,
-	orderBy: [],
-	selectColumns: [],
-	source: '' as const,
-};
-
-/**
- * Build a dashboard with a single builder widget.
- * Only supply the fields your test actually cares about.
- */
-const buildBuilderDashboard = (
-	filterExpression: string,
-	queryDataOverrides: Record<string, any> = {},
-): Dashboard => ({
-	id: 'dash1',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'Test Dashboard',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'widget-1',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: 'Widget 1',
-				description: '',
-				query: {
-					id: 'query1',
-					queryType: EQueryType.QUERY_BUILDER,
-					promql: [],
-					clickhouse_sql: [],
-					builder: {
-						queryData: [
-							{
-								...DEFAULT_QUERY_DATA,
-								...queryDataOverrides,
-								filter: { expression: filterExpression },
-							},
-						],
-						queryFormulas: [],
-						queryTraceOperator: [],
-					},
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-const buildClickhouseDashboard = (query: string): Dashboard => ({
-	id: 'dash-ch',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'CH',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'w1',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: '',
-				description: '',
-				query: {
-					id: 'q1',
-					queryType: EQueryType.CLICKHOUSE,
-					promql: [],
-					clickhouse_sql: [{ name: 'A', query, legend: '', disabled: false }],
-					builder: EMPTY_BUILDER,
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-const buildPromqlDashboard = (query: string): Dashboard => ({
-	id: 'dash-prom',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'PromQL Dashboard',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'widget-prom',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: 'PromQL Widget',
-				description: '',
-				query: {
-					id: 'query-prom',
-					queryType: EQueryType.PROM,
-					promql: [{ name: 'A', query, legend: '', disabled: false }],
-					clickhouse_sql: [],
-					builder: EMPTY_BUILDER,
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-/** Run removeVariableReferencesFromDashboard on a single-widget clickhouse dashboard and return the cleaned SQL. */
-const chQuery = (sql: string, varName: string): string => {
-	const result = removeVariableReferencesFromDashboard(
-		buildClickhouseDashboard(sql),
-		varName,
-	);
-	return (result!.data.widgets![0] as any).query.clickhouse_sql[0].query;
-};
-
-/** Extract the first builder queryData from a cleaned dashboard. */
-const firstBuilderQueryData = (dashboard: Dashboard | undefined): any =>
-	(dashboard!.data.widgets![0] as any).query.builder.queryData[0];
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('removeVariableReferencesFromDashboard', () => {
-	describe('builder filter expression cleanup', () => {
-		it('removes a variable clause from filter.expression', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
-		});
-
-		it('leaves no dangling AND/OR after removing a variable clause', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-			const { expression } = firstBuilderQueryData(result).filter;
-
-			expect(expression).toBe("env = 'prod'");
-			expect(expression).not.toMatch(/^\s*(AND|OR)/i);
-			expect(expression).not.toMatch(/(AND|OR)\s*$/i);
-		});
-
-		it('does not remove $environment clause when deleting $env', () => {
-			const dashboard = buildBuilderDashboard(
-				'env = $env AND deployment.environment = $environment',
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'env');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				'deployment.environment = $environment',
-			);
-		});
-
-		it('leaves literal filter expressions untouched when removing a variable', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name = 'api-gateway' AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				"service.name = 'api-gateway' AND env = 'prod'",
-			);
-		});
-
-		it('removes only the variable clause, preserving a literal clause on the same key', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND service.name = 'api-gateway'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				"service.name = 'api-gateway'",
-			);
-		});
-
-		it('returns filter.expression unchanged when the variable has no clauses in it', () => {
-			const dashboard = buildBuilderDashboard("env = 'prod'");
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
-		});
-	});
-
-	describe('PromQL query cleanup', () => {
-		it('removes variable placeholder from a promql query', () => {
-			const result = removeVariableReferencesFromDashboard(
-				buildPromqlDashboard('sum(rate(http_requests_total{$service}[5m]))'),
-				'service',
-			);
-
-			const widget = result!.data.widgets![0] as any;
-			expect(widget.query.promql[0].query).toBe(
-				'sum(rate(http_requests_total{}[5m]))',
-			);
-		});
-
-		it('strips only the variable token inside a PromQL label matcher (token-only path)', () => {
-			const result = removeVariableReferencesFromDashboard(
-				buildPromqlDashboard('up{env="$env", job="api"}'),
-				'env',
-			);
-
-			const widget = result!.data.widgets![0] as any;
-			expect(widget.query.promql[0].query).toBe('up{env="", job="api"}');
-		});
-	});
-
-	describe('ClickHouse SQL query cleanup', () => {
-		it('removes a quoted variable clause and its WHERE keyword', () => {
-			expect(
-				chQuery(
-					"SELECT count() FROM signoz_logs WHERE service_name = '$service'",
-					'service',
-				),
-			).toBe('SELECT count() FROM signoz_logs');
-		});
-
-		it('removes a middle clause: AND env={{.env}} AND', () => {
-			expect(
-				chQuery('SELECT count() FROM t WHERE a=1 AND env={{.env}} AND b=2', 'env'),
-			).toBe('SELECT count() FROM t WHERE a=1 AND b=2');
-		});
-
-		it('removes the first clause: env={{.env}} AND rest', () => {
-			expect(
-				chQuery('SELECT count() FROM t WHERE env={{.env}} AND b=2', 'env'),
-			).toBe('SELECT count() FROM t WHERE b=2');
-		});
-
-		it('removes the last clause: rest AND env=$env', () => {
-			expect(chQuery('SELECT count() FROM t WHERE a=1 AND env=$env', 'env')).toBe(
-				'SELECT count() FROM t WHERE a=1',
-			);
-		});
-
-		it('removes a clause with double-bracket syntax: service=[[svc]]', () => {
-			expect(chQuery('SELECT count() FROM t WHERE service=[[svc]]', 'svc')).toBe(
-				'SELECT count() FROM t',
-			);
-		});
-
-		it('falls back to token-only strip for a bare variable in SELECT', () => {
-			expect(chQuery('SELECT $metric FROM table', 'metric')).toBe(
-				'SELECT FROM table',
-			);
-		});
-	});
-
-	describe('edge cases', () => {
-		it('is idempotent — calling twice produces the same result', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const once = removeVariableReferencesFromDashboard(dashboard, 'service');
-			const twice = removeVariableReferencesFromDashboard(once, 'service');
-
-			expect(twice).toStrictEqual(once);
-		});
-
-		it('handles a dashboard with no widgets without throwing', () => {
-			const dashboard: Dashboard = {
-				id: 'dash-empty',
-				createdAt: '',
-				updatedAt: '',
-				createdBy: '',
-				updatedBy: '',
-				data: { title: 'Empty Dashboard', widgets: undefined, variables: {} },
-			};
-
-			expect(() =>
-				removeVariableReferencesFromDashboard(dashboard, 'service'),
-			).not.toThrow();
-		});
-	});
-});