chore: resolve comments

Replace xstate state machines with useState-based step tracking in the
three remaining consumers (labels form, dashboard search filter,
resource attribute provider). Drops xstate and @xstate/react from
dependencies and removes the corresponding no-restricted-imports
entries from oxlint config.

.vscode/settings.json

@@ -1,23 +1,22 @@
 {
-	"eslint.workingDirectories": [
-		"./frontend"
-	],
-	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit"
-	},
-	"prettier.requireConfig": true,
-	"[go]": {
-		"editor.formatOnSave": true,
-		"editor.defaultFormatter": "golang.go"
-	},
-	"[sql]": {
-		"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
-	},
-	"[html]": {
-		"editor.defaultFormatter": "vscode.html-language-features"
-	},
-	"python-envs.defaultEnvManager": "ms-python.python:system",
-	"python-envs.pythonProjects": []
+  "oxc.typeAware": true,
+  "oxc.tsConfigPath": "./frontend/tsconfig.json",
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "explicit"
+  },
+  "[go]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "golang.go"
+  },
+  "[sql]": {
+    "editor.defaultFormatter": "adpyke.vscode-sql-formatter"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "python-envs.defaultEnvManager": "ms-python.python:system",
+  "python-envs.pythonProjects": []
 }
+

frontend/.eslintignore

@@ -1,9 +0,0 @@
-node_modules
-build
-eslint-rules/
-stylelint-rules/
-*.typegen.ts
-i18-generate-hash.js
-src/parser/TraceOperatorParser/**
-
-orval.config.ts

frontend/.eslintrc.cjs

@@ -1,269 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require('path');
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const rulesDirPlugin = require('eslint-plugin-rulesdir');
-// eslint-rules/ always points to frontend/eslint-rules/ regardless of workspace root.
-rulesDirPlugin.RULES_DIR = path.join(__dirname, 'eslint-rules');
-
-/**
- * ESLint Configuration for SigNoz Frontend
- */
-module.exports = {
-	ignorePatterns: [
-		'src/parser/*.ts',
-		'scripts/update-registry.js',
-		'scripts/generate-permissions-type.js',
-	],
-	env: {
-		browser: true,
-		es2021: true,
-		node: true,
-	},
-	extends: [
-		'eslint:recommended',
-		'plugin:react/recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:react-hooks/recommended',
-		'plugin:prettier/recommended',
-		'plugin:sonarjs/recommended',
-		'plugin:react/jsx-runtime',
-	],
-	parser: '@typescript-eslint/parser',
-	parserOptions: {
-		project: './tsconfig.json',
-		tsconfigRootDir: __dirname,
-		ecmaFeatures: {
-			jsx: true,
-		},
-		ecmaVersion: 2021,
-		sourceType: 'module',
-	},
-	plugins: [
-		'rulesdir', // Local custom rules
-		'react', // React-specific rules
-		'@typescript-eslint', // TypeScript linting
-		'simple-import-sort', // Auto-sort imports
-		'react-hooks', // React Hooks rules
-		'prettier', // Code formatting
-		// 'jest', // TODO: Wait support on Biome to enable again
-		'jsx-a11y', // Accessibility rules
-		'import', // Import/export linting
-		'sonarjs', // Code quality/complexity
-		// TODO: Uncomment after running: yarn add -D eslint-plugin-spellcheck
-		// 'spellcheck', // Correct spellings
-	],
-	settings: {
-		react: {
-			version: 'detect',
-		},
-		'import/resolver': {
-			node: {
-				paths: ['src'],
-				extensions: ['.js', '.jsx', '.ts', '.tsx'],
-			},
-		},
-	},
-	rules: {
-		// Asset migration — base-path safety
-		'rulesdir/no-unsupported-asset-pattern': 'error',
-
-		// Code quality rules
-		'prefer-const': 'error', // Enforces const for variables never reassigned
-		'no-var': 'error', // Disallows var, enforces let/const
-		'no-else-return': ['error', { allowElseIf: false }], // Reduces nesting by disallowing else after return
-		'no-cond-assign': 'error', // Prevents accidental assignment in conditions (if (x = 1) instead of if (x === 1))
-		'no-debugger': 'error', // Disallows debugger statements in production code
-		curly: 'error', // Requires curly braces for all control statements
-		eqeqeq: ['error', 'always', { null: 'ignore' }], // Enforces === and !== (allows == null for null/undefined check)
-		'no-console': ['error', { allow: ['warn', 'error'] }], // Warns on console.log, allows console.warn/error
-		// TODO: Change this to error in May 2026
-		'max-params': ['warn', 3], // a function can have max 3 params after which it should become an object
-
-		// TypeScript rules
-		'@typescript-eslint/explicit-function-return-type': 'error', // Requires explicit return types on functions
-		'@typescript-eslint/no-unused-vars': [
-			// Disallows unused variables/args
-			'error',
-			{
-				argsIgnorePattern: '^_', // Allows unused args prefixed with _ (e.g., _unusedParam)
-				varsIgnorePattern: '^_', // Allows unused vars prefixed with _ (e.g., _unusedVar)
-			},
-		],
-		'@typescript-eslint/no-explicit-any': 'warn', // Warns when using 'any' type (consider upgrading to error)
-		// TODO: Change to 'error' after fixing ~80 empty function placeholders in providers/contexts
-		'@typescript-eslint/no-empty-function': 'off', // Disallows empty function bodies
-		'@typescript-eslint/no-var-requires': 'error', // Disallows require() in TypeScript (use import instead)
-		'@typescript-eslint/ban-ts-comment': 'warn', // Allows @ts-ignore comments (sometimes needed for third-party libs)
-		'no-empty-function': 'off', // Disabled in favor of TypeScript version above
-
-		// React rules
-		'react/jsx-filename-extension': [
-			'error',
-			{
-				extensions: ['.tsx', '.jsx'], // Warns if JSX is used in non-.jsx/.tsx files
-			},
-		],
-		'react/prop-types': 'off', // Disabled - using TypeScript instead
-		'react/jsx-props-no-spreading': 'off', // Allows {...props} spreading (common in HOCs, forms, wrappers)
-		'react/no-array-index-key': 'error', // Prevents using array index as key (causes bugs when list changes)
-
-		// Accessibility rules
-		'jsx-a11y/label-has-associated-control': [
-			'error',
-			{
-				required: {
-					some: ['nesting', 'id'], // Labels must either wrap inputs or use htmlFor/id
-				},
-			},
-		],
-
-		// React Hooks rules
-		'react-hooks/rules-of-hooks': 'error', // Enforces Rules of Hooks (only call at top level)
-		'react-hooks/exhaustive-deps': 'warn', // Warns about missing dependencies in useEffect/useMemo/useCallback
-
-		// Import/export rules
-		'import/extensions': [
-			'error',
-			'ignorePackages',
-			{
-				js: 'never', // Disallows .js extension in imports
-				jsx: 'never', // Disallows .jsx extension in imports
-				ts: 'never', // Disallows .ts extension in imports
-				tsx: 'never', // Disallows .tsx extension in imports
-			},
-		],
-		'import/no-extraneous-dependencies': ['error', { devDependencies: true }], // Prevents importing packages not in package.json
-		'import/no-cycle': 'warn', // Warns about circular dependencies
-
-		// Import sorting rules
-		'simple-import-sort/imports': [
-			'error',
-			{
-				groups: [
-					['^react', '^@?\\w'], // React first, then external packages
-					['^@/'], // Absolute imports with @ alias
-					['^\\u0000'], // Side effect imports (import './file')
-					['^\\.'], // Relative imports
-					['^.+\\.s?css$'], // Style imports
-				],
-			},
-		],
-		'simple-import-sort/exports': 'error', // Auto-sorts exports
-
-		// Prettier - code formatting
-		'prettier/prettier': [
-			'error',
-			{},
-			{
-				usePrettierrc: true, // Uses .prettierrc.json for formatting rules
-			},
-		],
-
-		// SonarJS - code quality and complexity
-		'sonarjs/no-duplicate-string': 'off', // Disabled - can be noisy (enable periodically to check)
-
-		// State management governance
-		// Approved patterns: Zustand, nuqs (URL state), react-query (server state), useState/useRef/useReducer, localStorage/sessionStorage for simple cases
-		'no-restricted-imports': [
-			'error',
-			{
-				paths: [
-					{
-						name: 'redux',
-						message:
-							'[State mgmt] redux is deprecated. Migrate to Zustand, nuqs, or react-query.',
-					},
-					{
-						name: 'react-redux',
-						message:
-							'[State mgmt] react-redux is deprecated. Migrate to Zustand, nuqs, or react-query.',
-					},
-					{
-						name: 'xstate',
-						message:
-							'[State mgmt] xstate is deprecated. Migrate to Zustand or react-query.',
-					},
-					{
-						name: '@xstate/react',
-						message:
-							'[State mgmt] @xstate/react is deprecated. Migrate to Zustand or react-query.',
-					},
-					{
-						// Restrict React Context — useState/useRef/useReducer remain allowed
-						name: 'react',
-						importNames: ['createContext', 'useContext'],
-						message:
-							'[State mgmt] React Context is deprecated. Migrate shared state to Zustand.',
-					},
-					{
-						// immer used standalone as a store pattern is deprecated; Zustand bundles it internally
-						name: 'immer',
-						message:
-							'[State mgmt] Direct immer usage is deprecated. Use Zustand (which integrates immer via the immer middleware) instead.',
-					},
-				],
-			},
-		],
-		'no-restricted-syntax': [
-			'error',
-			{
-				selector:
-					// TODO: Make this generic on removal of redux
-					"CallExpression[callee.property.name='getState'][callee.object.name=/^use/]",
-				message:
-					'Avoid calling .getState() directly. Export a standalone action from the store instead.',
-			},
-		],
-	},
-	overrides: [
-		{
-			files: ['src/**/*.{jsx,tsx,ts}'],
-			excludedFiles: [
-				'**/*.test.{js,jsx,ts,tsx}',
-				'**/*.spec.{js,jsx,ts,tsx}',
-				'**/__tests__/**/*.{js,jsx,ts,tsx}',
-			],
-			rules: {
-				'no-restricted-properties': [
-					'error',
-					{
-						object: 'navigator',
-						property: 'clipboard',
-						message:
-							'Do not use navigator.clipboard directly since it does not work well with specific browsers. Use hook useCopyToClipboard from react-use library. https://streamich.github.io/react-use/?path=/story/side-effects-usecopytoclipboard--docs',
-					},
-				],
-			},
-		},
-		{
-			files: [
-				'**/*.test.{js,jsx,ts,tsx}',
-				'**/*.spec.{js,jsx,ts,tsx}',
-				'**/__tests__/**/*.{js,jsx,ts,tsx}',
-			],
-			rules: {
-				// Tests often have intentional duplication and complexity - disable SonarJS rules
-				'sonarjs/cognitive-complexity': 'off', // Tests can be complex
-				'sonarjs/no-identical-functions': 'off', // Similar test patterns are OK
-				'sonarjs/no-small-switch': 'off', // Small switches are OK in tests
-			},
-		},
-		{
-			files: ['src/api/generated/**/*.ts'],
-			rules: {
-				'@typescript-eslint/explicit-function-return-type': 'off',
-				'@typescript-eslint/explicit-module-boundary-types': 'off',
-				'no-nested-ternary': 'off',
-				'@typescript-eslint/no-unused-vars': 'warn',
-			},
-		},
-		{
-			// Store definition files are the only place .getState() is permitted —
-			// they are the canonical source for standalone action exports.
-			files: ['**/*Store.{ts,tsx}'],
-			rules: {
-				'no-restricted-syntax': 'off',
-			},
-		},
-	],
-};

frontend/.oxfmtrc.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "trailingComma": "all",
+  "useTabs": true,
+  "tabWidth": 1,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "semi": true,
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "quoteProps": "as-needed",
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "embeddedLanguageFormatting": "auto",
+  "sortPackageJson": false,
+  "ignorePatterns": [
+    "build",
+    "coverage",
+    "public/",
+    "**/*.md",
+    "**/*.json",
+    "src/parser/**",
+    "src/TraceOperator/parser/**"
+  ]
+}

frontend/.oxlintrc.json

@@ -0,0 +1,607 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "jsPlugins": [
+    "./plugins/signoz.mjs",
+    "eslint-plugin-sonarjs"
+  ],
+  "plugins": [
+    "eslint",
+    "react",
+    "react-perf",
+    "typescript",
+    "unicorn",
+    "jsx-a11y",
+    "import",
+    "jest",
+    "promise",
+    "jsdoc"
+  ],
+  "categories": {
+    "correctness": "warn"
+    // TODO: Eventually turn this to error, and enable other categories
+  },
+  "env": {
+    "builtin": true,
+    "es2021": true,
+    "browser": true,
+    "jest": true,
+    "node": true
+  },
+  "options": {
+    "typeAware": true,
+    "typeCheck": false
+  },
+  "settings": {
+    "react": {
+      "version": "18.2.0"
+    }
+  },
+  "rules": {
+    "constructor-super": "error",
+    "for-direction": "error",
+    "getter-return": "error",
+    "no-async-promise-executor": "error",
+    "no-case-declarations": "error",
+    "no-class-assign": "error",
+    "no-compare-neg-zero": "error",
+    "no-cond-assign": "error",
+    // Prevents accidental assignment in conditions (if (x = 1) instead of if (x === 1))
+    "no-const-assign": "error",
+    "no-constant-binary-expression": "error",
+    "no-constant-condition": "error",
+    "no-control-regex": "error",
+    "no-debugger": "error",
+    // Disallows debugger statements in production code
+    "no-delete-var": "error",
+    "no-dupe-class-members": "error",
+    "no-dupe-else-if": "error",
+    "no-dupe-keys": "error",
+    "no-duplicate-case": "error",
+    "no-empty": "error",
+    "no-empty-character-class": "error",
+    "no-empty-pattern": "error",
+    "no-empty-static-block": "error",
+    "no-ex-assign": "error",
+    "no-extra-boolean-cast": "error",
+    "no-fallthrough": "error",
+    "no-func-assign": "error",
+    "no-global-assign": "error",
+    "no-import-assign": "error",
+    "no-invalid-regexp": "error",
+    "no-irregular-whitespace": "error",
+    "no-loss-of-precision": "error",
+    "no-misleading-character-class": "error",
+    "no-new-native-nonconstructor": "error",
+    "no-nonoctal-decimal-escape": "error",
+    "no-obj-calls": "error",
+    "no-prototype-builtins": "error",
+    "no-redeclare": "error",
+    "no-regex-spaces": "error",
+    "no-self-assign": "error",
+    "no-setter-return": "error",
+    "no-shadow-restricted-names": "warn",
+    // TODO: Change to error after migration to oxlint
+    "no-sparse-arrays": "error",
+    "no-this-before-super": "error",
+    "no-undef": "warn",
+    // TODO: Change to error after migration to oxlint
+    "no-unreachable": "warn",
+    // TODO: Change to error after the migration to oxlint
+    "no-unsafe-finally": "error",
+    "no-unsafe-negation": "error",
+    "no-unsafe-optional-chaining": "warn",
+    // TODO: Change to error after migration to oxlint
+    "no-unused-labels": "error",
+    "no-unused-private-class-members": "error",
+    "no-useless-backreference": "error",
+    "no-useless-catch": "error",
+    "no-useless-escape": "error",
+    "no-with": "error",
+    "require-yield": "error",
+    "use-isnan": "error",
+    "valid-typeof": "error",
+    "prefer-rest-params": "error",
+    "prefer-spread": "error",
+    "no-inner-declarations": "error",
+    // "no-octal": "error", // Not supported by oxlint
+    "react/display-name": "error",
+    "react/jsx-key": "warn",
+    // TODO: Change to error after migration to oxlint
+    "react/jsx-no-comment-textnodes": "error",
+    "react/jsx-no-duplicate-props": "error",
+    "react/jsx-no-target-blank": "warn",
+    // TODO: Change to error after migration to oxlint
+    "react/jsx-no-undef": "warn",
+    "react/no-children-prop": "error",
+    "react/no-danger-with-children": "error",
+    "react/no-direct-mutation-state": "error",
+    "react/no-find-dom-node": "error",
+    "react/no-is-mounted": "error",
+    "react/no-render-return-value": "error",
+    "react/no-string-refs": "error",
+    "react/no-unescaped-entities": "error",
+    "react/no-unknown-property": "error",
+    "react/require-render-return": "error",
+    "react/no-unsafe": "off",
+    "no-array-constructor": "error",
+    "@typescript-eslint/no-duplicate-enum-values": "warn",
+    // TODO: Change to error after migration to oxlint
+    "@typescript-eslint/no-empty-object-type": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
+    // Warns when using 'any' type (consider upgrading to error)
+    "@typescript-eslint/no-empty-function": "off",
+    // TODO: Change to 'error' after fixing ~80 empty function placeholders in providers/contexts
+    "@typescript-eslint/ban-ts-comment": "warn",
+    // Warns when using @ts-ignore comments (sometimes needed for third-party libs)
+    "no-empty-function": "off",
+    // Disabled in favor of TypeScript version above
+    "@typescript-eslint/no-extra-non-null-assertion": "error",
+    "@typescript-eslint/no-misused-new": "error",
+    "@typescript-eslint/no-namespace": "error",
+    "@typescript-eslint/no-non-null-asserted-optional-chain": "error",
+    "@typescript-eslint/no-require-imports": "error",
+    "@typescript-eslint/no-this-alias": "error",
+    "@typescript-eslint/no-unnecessary-type-constraint": "warn",
+    // TODO: Change to error after migration to oxlint
+    "@typescript-eslint/no-unsafe-declaration-merging": "error",
+    "@typescript-eslint/no-unsafe-function-type": "error",
+    "no-unused-expressions": "warn",
+    // TODO: Change to error after migration to oxlint
+    "@typescript-eslint/no-wrapper-object-types": "error",
+    "@typescript-eslint/prefer-as-const": "error",
+    "@typescript-eslint/prefer-namespace-keyword": "error",
+    "@typescript-eslint/triple-slash-reference": "error",
+    "@typescript-eslint/adjacent-overload-signatures": "error",
+    "@typescript-eslint/ban-types": "error",
+    "@typescript-eslint/explicit-module-boundary-types": "warn",
+    "@typescript-eslint/no-empty-interface": "error",
+    "@typescript-eslint/no-inferrable-types": "error",
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      // TypeScript-specific unused vars checking
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrors": "none"
+      }
+    ],
+    "curly": "error",
+    // Requires curly braces for all control statements
+    // TODO: Change to error after migration to oxlint
+    "prefer-const": "warn",
+    // Enforces const for variables never reassigned
+    "no-var": "error",
+    // Disallows var, enforces let/const
+    "no-else-return": [
+      // Reduces nesting by disallowing else after return
+      "error",
+      {
+        "allowElseIf": false
+      }
+    ],
+    "eqeqeq": [
+      // Enforces === and !== (allows == null for null/undefined check)
+      "error",
+      "always",
+      {
+        "null": "ignore"
+      }
+    ],
+    "no-console": [
+      // Warns on console.log, allows console.warn/error
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
+    "max-params": [
+      "warn",
+      3
+    ],
+    // Warns when functions have more than 3 parameters
+    "@typescript-eslint/explicit-function-return-type": "error",
+    // Requires explicit return types on functions
+    "@typescript-eslint/no-var-requires": "error",
+    // Disallows require() in TypeScript (use import instead)
+    // Disabled - using TypeScript instead
+    "react/jsx-props-no-spreading": "off",
+    // Allows {...props} spreading (common in HOCs, forms, wrappers)
+    "react/jsx-filename-extension": [
+      // Warns if JSX is used in non-.jsx/.tsx files
+      "error",
+      {
+        "extensions": [
+          ".tsx",
+          ".jsx"
+        ]
+      }
+    ],
+    "react/no-array-index-key": "error",
+    // Prevents using array index as key (causes bugs when list changes)
+    "jsx-a11y/label-has-associated-control": [
+      // Accessibility rules - Labels must either wrap inputs or use htmlFor/id
+      "error",
+      {
+        "required": {
+          "some": [
+            "nesting",
+            "id"
+          ]
+        }
+      }
+    ],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        // Import/export rules - Disallows .js/.jsx/.ts/.tsx extension in imports
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "import/no-cycle": "warn",
+    // Warns about circular dependencies
+    "import/first": "error",
+    "import/no-duplicates": "warn",
+    // TODO: Changed to warn during oxlint migration, should be changed to error
+    "arrow-body-style": "off",
+    "jest/no-disabled-tests": "warn",
+    // Jest test rules
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "warn",
+    "jest/prefer-to-have-length": "warn",
+    "jest/valid-expect": "warn",
+    // TODO: Change to error after migration to oxlint
+    // TODO: Change to error after migration to oxlint
+    "react-hooks/rules-of-hooks": "warn",
+    // React Hooks rules - Enforces Rules of Hooks (only call at top level)
+    "react-hooks/exhaustive-deps": "warn",
+    // Warns about missing dependencies in useEffect/useMemo/useCallback
+    // NOTE: The following react-hooks rules are not supported right know, follow the progress at https://github.com/oxc-project/oxc/issues/1022
+    // Most of them are for React Compiler, which we don't have enabled right know
+    // "react-hooks/config": "error",
+    // "react-hooks/error-boundaries": "error",
+    // "react-hooks/component-hook-factories": "error",
+    // "react-hooks/gating": "error",
+    // "react-hooks/globals": "error",
+    // "react-hooks/immutability": "error",
+    // "react-hooks/preserve-manual-memoization": "error",
+    // "react-hooks/purity": "error",
+    // "react-hooks/refs": "error",
+    // "react-hooks/set-state-in-effect": "error",
+    // "react-hooks/set-state-in-render": "error",
+    // "react-hooks/static-components": "error",
+    // "react-hooks/unsupported-syntax": "warn",
+    // "react-hooks/use-memo": "error",
+    // "react-hooks/incompatible-library": "warn",
+    "signoz/no-unsupported-asset-pattern": "error",
+    // Prevents the wrong usage of assets to break custom base path installations
+    "signoz/no-zustand-getstate-in-hooks": "error",
+    // Prevents useStore.getState() - export standalone actions instead
+    "signoz/no-navigator-clipboard": "error",
+    // Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "redux",
+            "message": "[State mgmt] redux is deprecated. Migrate to Zustand, nuqs, or react-query."
+          },
+          {
+            "name": "react-redux",
+            "message": "[State mgmt] react-redux is deprecated. Migrate to Zustand, nuqs, or react-query."
+          },
+          {
+            "name": "react",
+            "importNames": [
+              "createContext",
+              "useContext"
+            ],
+            "message": "[State mgmt] React Context is deprecated. Migrate shared state to Zustand."
+          },
+          {
+            "name": "immer",
+            "message": "[State mgmt] Direct immer usage is deprecated. Use Zustand (which integrates immer via the immer middleware) instead."
+          }
+        ]
+      }
+    ],
+    "react/no-array-index-key": "warn",
+    // TODO: Changed to warn during oxlint migration, should be changed to error,
+
+    "unicorn/error-message": "warn",
+    "unicorn/escape-case": "warn",
+    "unicorn/new-for-builtins": "warn",
+    "unicorn/no-abusive-eslint-disable": "warn",
+    "unicorn/no-console-spaces": "warn",
+    "unicorn/no-instanceof-array": "warn",
+    "unicorn/no-invalid-remove-event-listener": "warn",
+    "unicorn/no-new-array": "warn",
+    "unicorn/no-new-buffer": "warn",
+    "unicorn/no-thenable": "warn",
+    "unicorn/no-unreadable-array-destructuring": "warn",
+    "unicorn/no-useless-fallback-in-spread": "warn",
+    "unicorn/no-useless-length-check": "warn",
+    "unicorn/no-useless-promise-resolve-reject": "warn",
+    "unicorn/no-useless-spread": "warn",
+    "unicorn/no-zero-fractions": "warn",
+    "unicorn/number-literal-case": "warn",
+    "unicorn/prefer-array-find": "warn",
+    "unicorn/prefer-array-flat": "warn",
+    "unicorn/prefer-array-flat-map": "warn",
+    "unicorn/prefer-array-index-of": "warn",
+    "unicorn/prefer-array-some": "warn",
+    "unicorn/prefer-at": "warn",
+    "unicorn/prefer-code-point": "warn",
+    "unicorn/prefer-date-now": "warn",
+    "unicorn/prefer-default-parameters": "warn",
+    "unicorn/prefer-includes": "warn",
+    "unicorn/prefer-modern-math-apis": "warn",
+    "unicorn/prefer-native-coercion-functions": "warn",
+    "unicorn/prefer-node-protocol": "off",
+    "unicorn/prefer-number-properties": "warn",
+    "unicorn/prefer-optional-catch-binding": "warn",
+    "unicorn/prefer-regexp-test": "warn",
+    "unicorn/prefer-set-has": "warn",
+    "unicorn/prefer-string-replace-all": "warn",
+    "unicorn/prefer-string-slice": "warn",
+    "unicorn/prefer-string-starts-ends-with": "warn",
+    "unicorn/prefer-string-trim-start-end": "warn",
+    "unicorn/prefer-type-error": "warn",
+    "unicorn/require-array-join-separator": "warn",
+    "unicorn/require-number-to-fixed-digits-argument": "warn",
+    "unicorn/throw-new-error": "warn",
+    "unicorn/consistent-function-scoping": "warn",
+    "unicorn/explicit-length-check": "warn",
+    "unicorn/filename-case": [
+      "warn",
+      {
+        "case": "kebabCase"
+      }
+    ],
+    "unicorn/no-array-for-each": "warn",
+    "unicorn/no-lonely-if": "warn",
+    "unicorn/no-negated-condition": "warn",
+    "unicorn/no-null": "warn",
+    "unicorn/no-object-as-default-parameter": "warn",
+    "unicorn/no-static-only-class": "warn",
+    "unicorn/no-this-assignment": "warn",
+    "unicorn/no-unreadable-iife": "warn",
+    "unicorn/no-useless-switch-case": "warn",
+    "unicorn/no-useless-undefined": "warn",
+    "unicorn/prefer-add-event-listener": "warn",
+    "unicorn/prefer-dom-node-append": "warn",
+    "unicorn/prefer-dom-node-dataset": "warn",
+    "unicorn/prefer-dom-node-remove": "warn",
+    "unicorn/prefer-dom-node-text-content": "warn",
+    "unicorn/prefer-keyboard-event-key": "warn",
+    "unicorn/prefer-math-trunc": "warn",
+    "unicorn/prefer-modern-dom-apis": "warn",
+    "unicorn/prefer-negative-index": "warn",
+    "unicorn/prefer-prototype-methods": "warn",
+    "unicorn/prefer-query-selector": "warn",
+    "unicorn/prefer-reflect-apply": "warn",
+    "unicorn/prefer-set-size": "warn",
+    "unicorn/prefer-spread": "warn",
+    "unicorn/prefer-ternary": "warn",
+    "unicorn/require-post-message-target-origin": "warn",
+    "oxc/bad-array-method-on-arguments": "error",
+    "oxc/bad-bitwise-operator": "error",
+    "oxc/bad-comparison-sequence": "error",
+    "oxc/bad-object-literal-comparison": "error",
+    "oxc/bad-replace-all-arg": "error",
+    "oxc/double-comparisons": "error",
+    "oxc/erasing-op": "error",
+    "oxc/misrefactored-assign-op": "error",
+    "oxc/missing-throw": "error",
+    "oxc/no-accumulating-spread": "error",
+    "oxc/no-async-endpoint-handlers": "error",
+    "oxc/no-const-enum": "error",
+    "oxc/number-arg-out-of-range": "error",
+    "oxc/only-used-in-recursion": "warn",
+    "oxc/uninvoked-array-callback": "error",
+    "jest/consistent-test-it": [
+      "warn",
+      {
+        "fn": "it"
+      }
+    ],
+    "jest/expect-expect": "warn",
+    "jest/no-alias-methods": "warn",
+    "jest/no-commented-out-tests": "warn",
+    "jest/no-conditional-expect": "warn",
+    "jest/no-deprecated-functions": "warn",
+    "jest/no-done-callback": "warn",
+    "jest/no-duplicate-hooks": "warn",
+    "jest/no-export": "warn",
+    "jest/no-jasmine-globals": "warn",
+    "jest/no-mocks-import": "warn",
+    "jest/no-standalone-expect": "warn",
+    "jest/no-test-prefixes": "warn",
+    "jest/no-test-return-statement": "warn",
+    "jest/prefer-called-with": "off", // The auto-fix for this can break the tests when the function has args
+    "jest/prefer-comparison-matcher": "warn",
+    "jest/prefer-equality-matcher": "warn",
+    "jest/prefer-expect-resolves": "warn",
+    "jest/prefer-hooks-on-top": "warn",
+    "jest/prefer-spy-on": "warn",
+    "jest/prefer-strict-equal": "warn",
+    "jest/prefer-to-be": "warn",
+    "jest/prefer-to-contain": "warn",
+    "jest/prefer-todo": "warn",
+    "jest/valid-describe-callback": "warn",
+    "jest/valid-title": "warn",
+    "promise/catch-or-return": "warn",
+    "promise/no-return-wrap": "error",
+    "promise/param-names": "warn",
+    "promise/always-return": "warn",
+    "promise/no-nesting": "warn",
+    "promise/no-promise-in-callback": "warn",
+    "promise/no-callback-in-promise": "warn",
+    "promise/avoid-new": "off",
+    "promise/no-new-statics": "error",
+    "promise/no-return-in-finally": "error",
+    "promise/valid-params": "error",
+    "import/no-default-export": "off",
+    "import/no-named-as-default": "warn",
+    "import/no-named-as-default-member": "warn",
+    "import/no-self-import": "error",
+    "import/no-webpack-loader-syntax": "error",
+    "jsx-a11y/alt-text": "error",
+    "jsx-a11y/anchor-has-content": "warn",
+    "jsx-a11y/anchor-is-valid": "warn",
+    "jsx-a11y/aria-activedescendant-has-tabindex": "error",
+    "jsx-a11y/aria-props": "error",
+    "jsx-a11y/aria-role": "error",
+    "jsx-a11y/aria-unsupported-elements": "error",
+    "jsx-a11y/autocomplete-valid": "error",
+    "jsx-a11y/click-events-have-key-events": "warn",
+    "jsx-a11y/heading-has-content": "error",
+    "jsx-a11y/html-has-lang": "error",
+    "jsx-a11y/iframe-has-title": "error",
+    "jsx-a11y/img-redundant-alt": "warn",
+    "jsx-a11y/media-has-caption": "warn",
+    "jsx-a11y/mouse-events-have-key-events": "warn",
+    "jsx-a11y/no-access-key": "error",
+    "jsx-a11y/no-autofocus": "warn",
+    "jsx-a11y/no-distracting-elements": "error",
+    "jsx-a11y/no-redundant-roles": "warn",
+    "jsx-a11y/role-has-required-aria-props": "warn",
+    "jsx-a11y/role-supports-aria-props": "error",
+    "jsx-a11y/scope": "error",
+    "jsx-a11y/tabindex-no-positive": "warn",
+
+    // SonarJS rules - migrated from ESLint
+    "sonarjs/cognitive-complexity": "warn", // TODO: Change to error after migration
+    // Prevents overly complex functions (use SonarQube/SonarCloud for detailed analysis)
+    "sonarjs/max-switch-cases": "error",
+    // Limits switch statement cases
+    "sonarjs/no-all-duplicated-branches": "error",
+    // Prevents identical if/else branches
+    "sonarjs/no-collapsible-if": "error",
+    // Suggests merging nested ifs
+    "sonarjs/no-collection-size-mischeck": "error",
+    // Validates collection size checks
+    "sonarjs/no-duplicated-branches": "error",
+    // Detects duplicate conditional branches
+    "sonarjs/no-duplicate-string": "off",
+    // Warns on repeated string literals (was disabled)
+    "sonarjs/no-element-overwrite": "error",
+    // Prevents array element overwrites
+    "sonarjs/no-empty-collection": "error",
+    // Detects empty collections
+    "sonarjs/no-extra-arguments": "off",
+    // Detects extra function arguments (TypeScript handles this)
+    "sonarjs/no-gratuitous-expressions": "error",
+    // Removes unnecessary expressions
+    "sonarjs/no-identical-conditions": "error",
+    // Prevents duplicate conditions
+    "sonarjs/no-identical-expressions": "error",
+    // Detects duplicate expressions
+    "sonarjs/no-identical-functions": "error",
+    // Finds duplicated function implementations
+    "sonarjs/no-ignored-return": "error",
+    // Ensures return values are used
+    "sonarjs/no-inverted-boolean-check": "off",
+    // Simplifies boolean checks (was disabled)
+    "sonarjs/no-nested-switch": "error",
+    // Prevents nested switch statements
+    "sonarjs/no-nested-template-literals": "error",
+    // Avoids nested template literals
+    "sonarjs/no-redundant-boolean": "warn", // TODO: Change to error after migration
+    // Removes redundant boolean literals
+    "sonarjs/no-redundant-jump": "error",
+    // Removes unnecessary returns/continues
+    "sonarjs/no-same-line-conditional": "error",
+    // Prevents same-line conditionals
+    "sonarjs/no-small-switch": "error",
+    // Discourages tiny switch statements
+    "sonarjs/no-unused-collection": "error",
+    // Finds unused collections
+    "sonarjs/no-use-of-empty-return-value": "error",
+    // Prevents using void returns
+    "sonarjs/non-existent-operator": "error",
+    // Catches typos like =+ instead of +=
+    "sonarjs/prefer-immediate-return": "error",
+    // Returns directly instead of assigning
+    "sonarjs/prefer-object-literal": "error",
+    // Prefers object literals
+    "sonarjs/prefer-single-boolean-return": "error",
+    // Simplifies boolean returns
+    "sonarjs/prefer-while": "error",
+    // Suggests while loops over for loops
+    "sonarjs/elseif-without-else": "off"
+    // Requires final else in if-else-if chains (was disabled)
+  },
+  "ignorePatterns": [
+    "src/parser/*.ts",
+    "scripts/update-registry.cjs",
+    "scripts/generate-permissions-type.cjs",
+    "**/node_modules",
+    "**/build",
+    "**/*.typegen.ts",
+    "**/i18-generate-hash.cjs",
+    "src/parser/TraceOperatorParser/**/*",
+    "**/orval.config.ts"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "src/api/generated/**/*.ts"
+      ],
+      "rules": {
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "no-nested-ternary": "off",
+        "no-unused-vars": [
+          "warn",
+          {
+            "argsIgnorePattern": "^_",
+            "varsIgnorePattern": "^_",
+            "caughtErrors": "none"
+          }
+        ]
+      }
+    },
+    {
+      // Test files: disable clipboard rule and import/first
+      "files": [
+        "**/*.test.ts",
+        "**/*.test.tsx",
+        "**/*.test.js",
+        "**/*.test.jsx",
+        "**/*.spec.ts",
+        "**/*.spec.tsx",
+        "**/*.spec.js",
+        "**/*.spec.jsx",
+        "**/__tests__/**/*.ts",
+        "**/__tests__/**/*.tsx",
+        "**/__tests__/**/*.js",
+        "**/__tests__/**/*.jsx"
+      ],
+      "rules": {
+        "import/first": "off",
+        // Should ignore due to mocks
+        "signoz/no-navigator-clipboard": "off"
+        // Tests can use navigator.clipboard directly
+      }
+    },
+    {
+      // Store files are allowed to use .getState() as they export standalone actions
+      "files": [
+        "**/*Store.ts",
+        "**/*Store.tsx"
+      ],
+      "rules": {
+        "signoz/no-zustand-getstate-in-hooks": "off"
+      }
+    }
+  ]
+}

frontend/.vscode/settings.json

@@ -1,8 +1,7 @@
 {
-	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit"
-	},
-	"prettier.requireConfig": true
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "explicit"
+  }
 }

frontend/eslint-rules/package.json

@@ -1,3 +0,0 @@
-{
-  "type": "commonjs"
-}

frontend/package.json

@@ -8,11 +8,12 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "prettify": "prettier --write .",
-    "fmt": "prettier --check .",
-    "lint": "eslint ./src && stylelint \"src/**/*.scss\"",
-    "lint:generated": "eslint ./src/api/generated --fix",
-    "lint:fix": "eslint ./src --fix",
+    "prettify": "oxfmt",
+    "fmt": "echo 'Disabled due to migration' || oxfmt --check",
+    "lint": "oxlint ./src && stylelint \"src/**/*.scss\"",
+    "lint:js": "oxlint ./src",
+    "lint:generated": "oxlint ./src/api/generated --fix",
+    "lint:fix": "oxlint ./src --fix",
     "lint:styles": "stylelint \"src/**/*.scss\"",
     "jest": "jest",
     "jest:coverage": "jest --coverage",
@@ -63,13 +64,11 @@
     "@visx/shape": "3.5.0",
     "@visx/tooltip": "3.3.0",
     "@vitejs/plugin-react": "5.1.4",
-    "@xstate/react": "^3.0.0",
     "ansi-to-html": "0.7.2",
     "antd": "5.11.0",
     "antd-table-saveas-excel": "2.2.1",
     "antlr4": "4.13.2",
     "axios": "1.12.0",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^29.6.4",
     "babel-loader": "9.1.3",
     "babel-plugin-named-asset-import": "^0.3.7",
@@ -147,7 +146,6 @@
     "vite": "npm:rolldown-vite@7.3.1",
     "vite-plugin-html": "3.2.2",
     "web-vitals": "^0.2.4",
-    "xstate": "^4.31.0",
     "zod": "4.3.6",
     "zustand": "5.0.11"
   },
@@ -201,21 +199,9 @@
     "@types/redux-mock-store": "1.0.4",
     "@types/styled-components": "^5.1.4",
     "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
     "autoprefixer": "10.4.19",
     "babel-plugin-styled-components": "^1.12.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^29.15.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-rulesdir": "0.2.2",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-sonarjs": "^0.12.0",
+    "eslint-plugin-sonarjs": "4.0.2",
     "husky": "^7.0.4",
     "imagemin": "^8.0.1",
     "imagemin-svgo": "^10.0.1",
@@ -227,10 +213,12 @@
     "msw": "1.3.2",
     "npm-run-all": "latest",
     "orval": "7.18.0",
+    "oxfmt": "0.41.0",
+    "oxlint": "1.59.0",
+    "oxlint-tsgolint": "0.20.0",
     "portfinder-sync": "^0.0.2",
     "postcss": "8.5.6",
     "postcss-scss": "4.0.9",
-    "prettier": "2.2.1",
     "prop-types": "15.8.1",
     "react-hooks-testing-library": "0.6.0",
     "react-resizable": "3.0.4",
@@ -251,7 +239,8 @@
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": [
-      "eslint --fix",
+      "echo 'Disabled due to migration' || oxfmt --check",
+      "oxlint --fix",
       "sh scripts/typecheck-staged.sh"
     ]
   },

frontend/plugins/rules/no-navigator-clipboard.mjs

@@ -0,0 +1,47 @@
+/**
+ * Rule: no-navigator-clipboard
+ *
+ * Prevents direct usage of navigator.clipboard.
+ *
+ * This rule catches patterns like:
+ *   navigator.clipboard.writeText(...)
+ *   navigator.clipboard.readText()
+ *   const cb = navigator.clipboard
+ *
+ * Instead, use the useCopyToClipboard hook from react-use library.
+ *
+ * ESLint equivalent:
+ * "no-restricted-properties": [
+ *   "error",
+ *   {
+ *     "object": "navigator",
+ *     "property": "clipboard",
+ *     "message": "Do not use navigator.clipboard directly..."
+ *   }
+ * ]
+ */
+
+export default {
+	create(context) {
+		return {
+			MemberExpression(node) {
+				const object = node.object;
+				const property = node.property;
+
+				// Check if it's navigator.clipboard
+				if (
+					object.type === 'Identifier' &&
+					object.name === 'navigator' &&
+					property.type === 'Identifier' &&
+					property.name === 'clipboard'
+				) {
+					context.report({
+						node,
+						message:
+							'Do not use navigator.clipboard directly since it does not work well with specific browsers. Use hook useCopyToClipboard from react-use library. https://streamich.github.io/react-use/?path=/story/side-effects-usecopytoclipboard--docs',
+					});
+				}
+			},
+		};
+	},
+};

frontend/plugins/rules/no-unsupported-asset-pattern.mjs

@@ -1,7 +1,5 @@
-'use strict';
-
 /**
- * ESLint rule: no-unsupported-asset-pattern
+ * Rule: no-unsupported-asset-pattern
  *
  * Enforces that all asset references (SVG, PNG, etc.) go through Vite's module
  * pipeline via ES imports (`import fooUrl from '@/assets/...'`) rather than
@@ -18,7 +16,7 @@
  *   4. ImportDeclaration / ImportExpression — static & dynamic imports
  */
 
-const {
+import {
 	hasAssetExtension,
 	containsAssetExtension,
 	extractUrlPath,
@@ -27,18 +25,10 @@ const {
 	isRelativePublicDir,
 	isValidAssetImport,
 	isExternalUrl,
-} = require('./shared/asset-patterns');
+} from './shared/asset-patterns.mjs';
 
-// Known public/ sub-directories that should never appear in dynamic asset paths.
 const PUBLIC_DIR_SEGMENTS = ['/Icons/', '/Images/', '/Logos/', '/svgs/'];
 
-/**
- * Recursively extracts the static string parts from a binary `+` expression or
- * template literal.  Returns `[null]` for any dynamic (non-string) node so
- * callers can detect that the prefix became unknowable.
- *
- * Example: `"/Icons/" + iconName + ".svg"` → ["/Icons/", null, ".svg"]
- */
 function collectBinaryStringParts(node) {
 	if (node.type === 'Literal' && typeof node.value === 'string')
 		return [node.value];
@@ -51,11 +41,10 @@ function collectBinaryStringParts(node) {
 	if (node.type === 'TemplateLiteral') {
 		return node.quasis.map((q) => q.value.raw);
 	}
-	// Unknown / dynamic node — signals "prefix is no longer fully static"
 	return [null];
 }
 
-module.exports = {
+export default {
 	meta: {
 		type: 'problem',
 		docs: {
@@ -89,13 +78,6 @@ module.exports = {
 
 	create(context) {
 		return {
-			/**
-			 * Catches plain string literals used as asset paths, e.g.:
-			 *   src="/Icons/logo.svg"   or   url("../public/Images/bg.png")
-			 *
-			 * Import declaration sources are skipped here — handled by ImportDeclaration.
-			 * Also unwraps CSS `url(...)` wrappers before checking.
-			 */
 			Literal(node) {
 				if (node.parent && node.parent.type === 'ImportDeclaration') {
 					return;
@@ -122,9 +104,6 @@ module.exports = {
 					return;
 				}
 
-				// Catches relative paths that start with "public/" e.g. 'public/Logos/aws-dark.svg'.
-				// isRelativePublicDir only covers known sub-dirs (Icons/, Logos/, etc.),
-				// so this handles the case where the full "public/" prefix is written explicitly.
 				if (isPublicRelative(value) && containsAssetExtension(value)) {
 					context.report({
 						node,
@@ -134,7 +113,6 @@ module.exports = {
 					return;
 				}
 
-				// Also check the path inside a CSS url("...") wrapper
 				const urlPath = extractUrlPath(value);
 				if (urlPath && isExternalUrl(urlPath)) return;
 				if (urlPath && isAbsolutePath(urlPath) && containsAssetExtension(urlPath)) {
@@ -170,11 +148,6 @@ module.exports = {
 				}
 			},
 
-			/**
-			 * Catches template literals used as asset paths, e.g.:
-			 *   `/Icons/${name}.svg`
-			 *   `url('/Images/${bg}.png')`
-			 */
 			TemplateLiteral(node) {
 				const quasis = node.quasis;
 				if (!quasis || quasis.length === 0) return;
@@ -201,7 +174,6 @@ module.exports = {
 					return;
 				}
 
-				// Expression-first template with known public-dir segment: `${base}/Icons/foo.svg`
 				const hasPublicSegment = quasis.some((q) =>
 					PUBLIC_DIR_SEGMENTS.some((seg) => q.value.raw.includes(seg)),
 				);
@@ -213,10 +185,7 @@ module.exports = {
 					return;
 				}
 
-				// No-interpolation template (single quasi): treat like a plain string
-				// and also unwrap any css url(...) wrapper.
 				if (quasis.length === 1) {
-					// Check the raw string first (no url() wrapper)
 					if (isPublicRelative(firstQuasi) && hasAssetExt) {
 						context.report({
 							node,
@@ -257,8 +226,6 @@ module.exports = {
 					return;
 				}
 
-				// CSS url() with an absolute path inside a multi-quasi template, e.g.:
-				//   `url('/Icons/${name}.svg')`
 				if (firstQuasi.includes('url(') && hasAssetExt) {
 					const urlMatch = firstQuasi.match(/^url\(\s*['"]?\//);
 					if (urlMatch) {
@@ -270,19 +237,10 @@ module.exports = {
 				}
 			},
 
-			/**
-			 * Catches string concatenation used to build asset paths, e.g.:
-			 *   "/Icons/" + name + ".svg"
-			 *
-			 * Collects the leading static parts (before the first dynamic value)
-			 * to determine the path prefix. If any part carries a known asset
-			 * extension, the expression is flagged.
-			 */
 			BinaryExpression(node) {
 				if (node.operator !== '+') return;
 
 				const parts = collectBinaryStringParts(node);
-				// Collect only the leading static parts; stop at the first dynamic (null) part
 				const prefixParts = [];
 				for (const part of parts) {
 					if (part === null) break;
@@ -322,14 +280,6 @@ module.exports = {
 				}
 			},
 
-			/**
-			 * Catches static asset imports that don't go through src/assets/, e.g.:
-			 *   import logo from '/public/Icons/logo.svg'   ← absolute path
-			 *   import logo from '../../public/logo.svg'    ← relative into public/
-			 *   import logo from '../somewhere/logo.svg'    ← outside src/assets/
-			 *
-			 * Valid pattern: import fooUrl from '@/assets/...' or relative within src/assets/
-			 */
 			ImportDeclaration(node) {
 				const src = node.source.value;
 				if (typeof src !== 'string') return;
@@ -354,13 +304,6 @@ module.exports = {
 				}
 			},
 
-			/**
-			 * Same checks as ImportDeclaration but for dynamic imports:
-			 *   const logo = await import('/Icons/logo.svg')
-			 *
-			 * Only literal sources are checked; fully dynamic expressions are ignored
-			 * since their paths cannot be statically analysed.
-			 */
 			ImportExpression(node) {
 				const src = node.source;
 				if (!src || src.type !== 'Literal' || typeof src.value !== 'string') return;

frontend/plugins/rules/no-zustand-getstate-in-hooks.mjs

@@ -0,0 +1,53 @@
+/**
+ * Rule: no-zustand-getstate-in-hooks
+ *
+ * Prevents calling .getState() on Zustand hooks.
+ *
+ * This rule catches patterns like:
+ *   useStore.getState()
+ *   useAppStore.getState()
+ *
+ * Instead, export a standalone action from the store.
+ *
+ * ESLint equivalent:
+ * "no-restricted-syntax": [
+ *   "error",
+ *   {
+ *     "selector": "CallExpression[callee.property.name='getState'][callee.object.name=/^use/]",
+ *     "message": "Avoid calling .getState() directly. Export a standalone action from the store instead."
+ *   }
+ * ]
+ */
+
+export default {
+	create(context) {
+		return {
+			CallExpression(node) {
+				const callee = node.callee;
+
+				// Check if it's a member expression (e.g., useStore.getState())
+				if (callee.type !== 'MemberExpression') {
+					return;
+				}
+
+				// Check if the property is 'getState'
+				const property = callee.property;
+				if (property.type !== 'Identifier' || property.name !== 'getState') {
+					return;
+				}
+
+				// Check if the object name starts with 'use'
+				const object = callee.object;
+				if (object.type !== 'Identifier' || !object.name.startsWith('use')) {
+					return;
+				}
+
+				context.report({
+					node,
+					message:
+						'Avoid calling .getState() directly. Export a standalone action from the store instead.',
+				});
+			},
+		};
+	},
+};

frontend/plugins/rules/shared/asset-patterns.mjs

@@ -1,6 +1,4 @@
-'use strict';
-
-const ALLOWED_ASSET_EXTENSIONS = [
+export const ALLOWED_ASSET_EXTENSIONS = [
 	'.svg',
 	'.png',
 	'.webp',
@@ -13,14 +11,14 @@ const ALLOWED_ASSET_EXTENSIONS = [
  * Returns true if the string ends with an asset extension.
  * e.g. "/Icons/foo.svg" → true, "/Icons/foo.svg.bak" → false
  */
-function hasAssetExtension(str) {
+export function hasAssetExtension(str) {
 	if (typeof str !== 'string') return false;
 	return ALLOWED_ASSET_EXTENSIONS.some((ext) => str.endsWith(ext));
 }
 
 // Like hasAssetExtension but also matches mid-string with boundary check,
 // e.g. "/foo.svg?v=1" → true, "/icons.svg-dir/" → true (- is non-alphanumeric boundary)
-function containsAssetExtension(str) {
+export function containsAssetExtension(str) {
 	if (typeof str !== 'string') return false;
 	return ALLOWED_ASSET_EXTENSIONS.some((ext) => {
 		const idx = str.indexOf(ext);
@@ -42,7 +40,7 @@ function containsAssetExtension(str) {
  *   "url(/Icons/foo.svg)" → "/Icons/foo.svg"
  * Returns null if the string is not a url() wrapper.
  */
-function extractUrlPath(str) {
+export function extractUrlPath(str) {
 	if (typeof str !== 'string') return null;
 	// Match url( [whitespace] [quote?] path [quote?] [whitespace] )
 	// Capture group: [^'")\s]+ matches path until quote, closing paren, or whitespace
@@ -54,7 +52,7 @@ function extractUrlPath(str) {
  * Returns true if the string is an absolute path (starts with /).
  * Absolute paths in url() bypass <base href> and fail under any URL prefix.
  */
-function isAbsolutePath(str) {
+export function isAbsolutePath(str) {
 	if (typeof str !== 'string') return false;
 	return str.startsWith('/') && !str.startsWith('//');
 }
@@ -63,7 +61,7 @@ function isAbsolutePath(str) {
  * Returns true if the path imports from the public/ directory.
  * Relative imports into public/ cause asset duplication in dist/.
  */
-function isPublicRelative(str) {
+export function isPublicRelative(str) {
 	if (typeof str !== 'string') return false;
 	return str.includes('/public/') || str.startsWith('public/');
 }
@@ -73,9 +71,9 @@ function isPublicRelative(str) {
  * e.g. "Icons/foo.svg", `Logos/aws-dark.svg`, "Images/bg.png"
  * These bypass Vite's module pipeline even without a leading slash.
  */
-const PUBLIC_DIR_SEGMENTS = ['Icons/', 'Images/', 'Logos/', 'svgs/'];
+export const PUBLIC_DIR_SEGMENTS = ['Icons/', 'Images/', 'Logos/', 'svgs/'];
 
-function isRelativePublicDir(str) {
+export function isRelativePublicDir(str) {
 	if (typeof str !== 'string') return false;
 	return PUBLIC_DIR_SEGMENTS.some((seg) => str.startsWith(seg));
 }
@@ -85,7 +83,7 @@ function isRelativePublicDir(str) {
  * Valid: @/assets/..., any relative path containing /assets/, or node_modules packages.
  * Invalid: absolute paths, public/ dir, or relative paths outside src/assets/.
  */
-function isValidAssetImport(str) {
+export function isValidAssetImport(str) {
 	if (typeof str !== 'string') return false;
 	if (str.startsWith('@/assets/')) return true;
 	if (str.includes('/assets/')) return true;
@@ -98,7 +96,7 @@ function isValidAssetImport(str) {
  * Returns true if the string is an external URL.
  * Used to avoid false positives on CDN/API URLs with asset extensions.
  */
-function isExternalUrl(str) {
+export function isExternalUrl(str) {
 	if (typeof str !== 'string') return false;
 	return (
 		str.startsWith('http://') ||
@@ -106,16 +104,3 @@ function isExternalUrl(str) {
 		str.startsWith('//')
 	);
 }
-
-module.exports = {
-	ALLOWED_ASSET_EXTENSIONS,
-	PUBLIC_DIR_SEGMENTS,
-	hasAssetExtension,
-	containsAssetExtension,
-	extractUrlPath,
-	isAbsolutePath,
-	isPublicRelative,
-	isRelativePublicDir,
-	isValidAssetImport,
-	isExternalUrl,
-};

frontend/plugins/signoz.mjs

@@ -0,0 +1,21 @@
+/**
+ * Oxlint custom rules plugin for SigNoz.
+ *
+ * This plugin aggregates all custom SigNoz linting rules.
+ * Individual rules are defined in the ./rules directory.
+ */
+
+import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
+import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
+import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
+
+export default {
+	meta: {
+		name: 'signoz',
+	},
+	rules: {
+		'no-zustand-getstate-in-hooks': noZustandGetStateInHooks,
+		'no-navigator-clipboard': noNavigatorClipboard,
+		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
+	},
+};

frontend/scripts/generate-permissions-type.cjs

@@ -109,16 +109,16 @@ function generateTypeScriptFile(data) {
 	const resourcesStr = data.data.resources
 		.map(
 			(r) =>
-				`\t\t\t{\n\t\t\t\tname: '${r.name}',\n\t\t\t\ttype: '${r.type}',\n\t\t\t}`,
+				`\t\t\t{\n\t\t\t\tname: '${r.name}',\n\t\t\t\ttype: '${r.type}',\n\t\t\t},`,
 		)
-		.join(',\n');
+		.join('\n');
 
 	const relationsStr = Object.entries(data.data.relations)
 		.map(
 			([type, relations]) =>
-				`\t\t\t${type}: [${relations.map((r) => `'${r}'`).join(', ')}]`,
+				`\t\t\t${type}: [${relations.map((r) => `'${r}'`).join(', ')}],`,
 		)
-		.join(',\n');
+		.join('\n');
 
 	return `// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY scripts/generate-permissions-type
 export default {
@@ -180,7 +180,7 @@ async function main() {
 			PERMISSIONS_TYPE_FILE,
 		);
 		log('Linting generated file...');
-		execSync(`cd frontend && yarn eslint --fix ${relativePath}`, {
+		execSync(`cd frontend && yarn oxlint ${relativePath}`, {
 			cwd: rootDir,
 			stdio: 'inherit',
 		});

frontend/scripts/post-types-generation.sh

@@ -16,20 +16,20 @@ echo "\n✅ Tag files renamed to index.ts"
 
 # Format generated files
 echo "\n\n---\nRunning prettier...\n"
-if ! prettier --write src/api/generated; then
-  echo "Prettier formatting failed!"
+if ! yarn prettify src/api/generated; then
+  echo "Formatting failed!"
   exit 1
 fi
-echo "\n✅ Prettier formatting successful"
+echo "\n✅ Formatting successful"
 
 
 # Fix linting issues
-echo "\n\n---\nRunning eslint...\n"
+echo "\n\n---\nRunning lint...\n"
 if ! yarn lint:generated; then
-  echo "ESLint check failed! Please fix linting errors before proceeding."
+  echo "Lint check failed! Please fix linting errors before proceeding."
   exit 1
 fi
-echo "\n✅ ESLint check successful"
+echo "\n✅ Lint check successful"
 
 
 # Check for type errors

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,12 +13,12 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';
 
-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { GetAlerts200, RenderErrorResponseDTO } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint returns alerts for the organization
  * @summary Get alerts
@@ -36,7 +37,7 @@ export const getGetAlertsQueryKey = () => {
 
 export const getGetAlertsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getAlerts>>, TError, TData>;
 }) => {
@@ -66,7 +67,7 @@ export type GetAlertsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetAlerts<
 	TData = Awaited<ReturnType<typeof getAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getAlerts>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AuthtypesPostableAuthDomainDTO,
 	AuthtypesUpdateableAuthDomainDTO,
@@ -29,6 +27,9 @@ import type {
 	UpdateAuthDomainPathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint lists all auth domains
  * @summary List all auth domains
@@ -47,7 +48,7 @@ export const getListAuthDomainsQueryKey = () => {
 
 export const getListAuthDomainsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listAuthDomains>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listAuthDomains>>,
@@ -81,7 +82,7 @@ export type ListAuthDomainsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListAuthDomains<
 	TData = Awaited<ReturnType<typeof listAuthDomains>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listAuthDomains>>,
@@ -134,7 +135,7 @@ export const createAuthDomain = (
 
 export const getCreateAuthDomainMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createAuthDomain>>,
@@ -151,8 +152,8 @@ export const getCreateAuthDomainMutationOptions = <
 	const mutationKey = ['createAuthDomain'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -172,7 +173,8 @@ export const getCreateAuthDomainMutationOptions = <
 export type CreateAuthDomainMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createAuthDomain>>
 >;
-export type CreateAuthDomainMutationBody = BodyType<AuthtypesPostableAuthDomainDTO>;
+export type CreateAuthDomainMutationBody =
+	BodyType<AuthtypesPostableAuthDomainDTO>;
 export type CreateAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -180,7 +182,7 @@ export type CreateAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useCreateAuthDomain = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createAuthDomain>>,
@@ -211,7 +213,7 @@ export const deleteAuthDomain = ({ id }: DeleteAuthDomainPathParameters) => {
 
 export const getDeleteAuthDomainMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteAuthDomain>>,
@@ -228,8 +230,8 @@ export const getDeleteAuthDomainMutationOptions = <
 	const mutationKey = ['deleteAuthDomain'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -257,7 +259,7 @@ export type DeleteAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useDeleteAuthDomain = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteAuthDomain>>,
@@ -293,7 +295,7 @@ export const updateAuthDomain = (
 
 export const getUpdateAuthDomainMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateAuthDomain>>,
@@ -316,8 +318,8 @@ export const getUpdateAuthDomainMutationOptions = <
 	const mutationKey = ['updateAuthDomain'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -340,7 +342,8 @@ export const getUpdateAuthDomainMutationOptions = <
 export type UpdateAuthDomainMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateAuthDomain>>
 >;
-export type UpdateAuthDomainMutationBody = BodyType<AuthtypesUpdateableAuthDomainDTO>;
+export type UpdateAuthDomainMutationBody =
+	BodyType<AuthtypesUpdateableAuthDomainDTO>;
 export type UpdateAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -348,7 +351,7 @@ export type UpdateAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useUpdateAuthDomain = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateAuthDomain>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AuthtypesTransactionDTO,
 	AuthzCheck200,
@@ -26,6 +24,9 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * Checks if the authenticated user has permissions for given transactions
  * @summary Check permissions
@@ -45,7 +46,7 @@ export const authzCheck = (
 
 export const getAuthzCheckMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof authzCheck>>,
@@ -62,8 +63,8 @@ export const getAuthzCheckMutationOptions = <
 	const mutationKey = ['authzCheck'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -91,7 +92,7 @@ export type AuthzCheckMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useAuthzCheck = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof authzCheck>>,
@@ -127,7 +128,7 @@ export const getAuthzResourcesQueryKey = () => {
 
 export const getAuthzResourcesQueryOptions = <
 	TData = Awaited<ReturnType<typeof authzResources>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof authzResources>>,
@@ -161,7 +162,7 @@ export type AuthzResourcesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useAuthzResources<
 	TData = Awaited<ReturnType<typeof authzResources>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof authzResources>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	ConfigReceiverDTO,
 	CreateChannel201,
@@ -30,6 +28,9 @@ import type {
 	UpdateChannelByIDPathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint lists all notification channels for the organization
  * @summary List notification channels
@@ -48,7 +49,7 @@ export const getListChannelsQueryKey = () => {
 
 export const getListChannelsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listChannels>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listChannels>>,
@@ -82,7 +83,7 @@ export type ListChannelsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListChannels<
 	TData = Awaited<ReturnType<typeof listChannels>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listChannels>>,
@@ -135,7 +136,7 @@ export const createChannel = (
 
 export const getCreateChannelMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
@@ -152,8 +153,8 @@ export const getCreateChannelMutationOptions = <
 	const mutationKey = ['createChannel'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -181,7 +182,7 @@ export type CreateChannelMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useCreateChannel = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
@@ -212,7 +213,7 @@ export const deleteChannelByID = ({ id }: DeleteChannelByIDPathParameters) => {
 
 export const getDeleteChannelByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteChannelByID>>,
@@ -229,8 +230,8 @@ export const getDeleteChannelByIDMutationOptions = <
 	const mutationKey = ['deleteChannelByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -258,7 +259,7 @@ export type DeleteChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useDeleteChannelByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteChannelByID>>,
@@ -299,7 +300,7 @@ export const getGetChannelByIDQueryKey = ({
 
 export const getGetChannelByIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getChannelByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetChannelByIDPathParameters,
 	options?: {
@@ -341,7 +342,7 @@ export type GetChannelByIDQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetChannelByID<
 	TData = Awaited<ReturnType<typeof getChannelByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetChannelByIDPathParameters,
 	options?: {
@@ -397,7 +398,7 @@ export const updateChannelByID = (
 
 export const getUpdateChannelByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateChannelByID>>,
@@ -420,8 +421,8 @@ export const getUpdateChannelByIDMutationOptions = <
 	const mutationKey = ['updateChannelByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -452,7 +453,7 @@ export type UpdateChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useUpdateChannelByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateChannelByID>>,
@@ -495,7 +496,7 @@ export const testChannel = (
 
 export const getTestChannelMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannel>>,
@@ -512,8 +513,8 @@ export const getTestChannelMutationOptions = <
 	const mutationKey = ['testChannel'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -541,7 +542,7 @@ export type TestChannelMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useTestChannel = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannel>>,
@@ -579,7 +580,7 @@ export const testChannelDeprecated = (
 
 export const getTestChannelDeprecatedMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannelDeprecated>>,
@@ -596,8 +597,8 @@ export const getTestChannelDeprecatedMutationOptions = <
 	const mutationKey = ['testChannelDeprecated'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -618,7 +619,8 @@ export type TestChannelDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof testChannelDeprecated>>
 >;
 export type TestChannelDeprecatedMutationBody = BodyType<ConfigReceiverDTO>;
-export type TestChannelDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;
+export type TestChannelDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @deprecated
@@ -626,7 +628,7 @@ export type TestChannelDeprecatedMutationError = ErrorType<RenderErrorResponseDT
  */
 export const useTestChannelDeprecated = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testChannelDeprecated>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AgentCheckIn200,
 	AgentCheckInDeprecated200,
@@ -48,6 +46,9 @@ import type {
 	UpdateServicePathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * [Deprecated] This endpoint is called by the deployed agent to check in
  * @deprecated
@@ -69,7 +70,7 @@ export const agentCheckInDeprecated = (
 
 export const getAgentCheckInDeprecatedMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof agentCheckInDeprecated>>,
@@ -92,8 +93,8 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 	const mutationKey = ['agentCheckInDeprecated'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -116,8 +117,10 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 export type AgentCheckInDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof agentCheckInDeprecated>>
 >;
-export type AgentCheckInDeprecatedMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
-export type AgentCheckInDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;
+export type AgentCheckInDeprecatedMutationBody =
+	BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+export type AgentCheckInDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @deprecated
@@ -125,7 +128,7 @@ export type AgentCheckInDeprecatedMutationError = ErrorType<RenderErrorResponseD
  */
 export const useAgentCheckInDeprecated = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof agentCheckInDeprecated>>,
@@ -172,7 +175,7 @@ export const getListAccountsQueryKey = ({
 
 export const getListAccountsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listAccounts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListAccountsPathParameters,
 	options?: {
@@ -215,7 +218,7 @@ export type ListAccountsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListAccounts<
 	TData = Awaited<ReturnType<typeof listAccounts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListAccountsPathParameters,
 	options?: {
@@ -273,7 +276,7 @@ export const createAccount = (
 
 export const getCreateAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createAccount>>,
@@ -296,8 +299,8 @@ export const getCreateAccountMutationOptions = <
 	const mutationKey = ['createAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -320,7 +323,8 @@ export const getCreateAccountMutationOptions = <
 export type CreateAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createAccount>>
 >;
-export type CreateAccountMutationBody = BodyType<CloudintegrationtypesPostableAccountDTO>;
+export type CreateAccountMutationBody =
+	BodyType<CloudintegrationtypesPostableAccountDTO>;
 export type CreateAccountMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -328,7 +332,7 @@ export type CreateAccountMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useCreateAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createAccount>>,
@@ -368,7 +372,7 @@ export const disconnectAccount = ({
 
 export const getDisconnectAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof disconnectAccount>>,
@@ -385,8 +389,8 @@ export const getDisconnectAccountMutationOptions = <
 	const mutationKey = ['disconnectAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -414,7 +418,7 @@ export type DisconnectAccountMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useDisconnectAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof disconnectAccount>>,
@@ -456,7 +460,7 @@ export const getGetAccountQueryKey = ({
 
 export const getGetAccountQueryOptions = <
 	TData = Awaited<ReturnType<typeof getAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, id }: GetAccountPathParameters,
 	options?: {
@@ -497,7 +501,7 @@ export type GetAccountQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetAccount<
 	TData = Awaited<ReturnType<typeof getAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, id }: GetAccountPathParameters,
 	options?: {
@@ -553,7 +557,7 @@ export const updateAccount = (
 
 export const getUpdateAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateAccount>>,
@@ -576,8 +580,8 @@ export const getUpdateAccountMutationOptions = <
 	const mutationKey = ['updateAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -600,7 +604,8 @@ export const getUpdateAccountMutationOptions = <
 export type UpdateAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateAccount>>
 >;
-export type UpdateAccountMutationBody = BodyType<CloudintegrationtypesUpdatableAccountDTO>;
+export type UpdateAccountMutationBody =
+	BodyType<CloudintegrationtypesUpdatableAccountDTO>;
 export type UpdateAccountMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -608,7 +613,7 @@ export type UpdateAccountMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useUpdateAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateAccount>>,
@@ -650,7 +655,7 @@ export const updateService = (
 
 export const getUpdateServiceMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateService>>,
@@ -673,8 +678,8 @@ export const getUpdateServiceMutationOptions = <
 	const mutationKey = ['updateService'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -697,7 +702,8 @@ export const getUpdateServiceMutationOptions = <
 export type UpdateServiceMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateService>>
 >;
-export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+export type UpdateServiceMutationBody =
+	BodyType<CloudintegrationtypesUpdatableServiceDTO>;
 export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -705,7 +711,7 @@ export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useUpdateService = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateService>>,
@@ -749,7 +755,7 @@ export const agentCheckIn = (
 
 export const getAgentCheckInMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof agentCheckIn>>,
@@ -772,8 +778,8 @@ export const getAgentCheckInMutationOptions = <
 	const mutationKey = ['agentCheckIn'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -796,7 +802,8 @@ export const getAgentCheckInMutationOptions = <
 export type AgentCheckInMutationResult = NonNullable<
 	Awaited<ReturnType<typeof agentCheckIn>>
 >;
-export type AgentCheckInMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+export type AgentCheckInMutationBody =
+	BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 export type AgentCheckInMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -804,7 +811,7 @@ export type AgentCheckInMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useAgentCheckIn = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof agentCheckIn>>,
@@ -851,7 +858,7 @@ export const getGetConnectionCredentialsQueryKey = ({
 
 export const getGetConnectionCredentialsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: GetConnectionCredentialsPathParameters,
 	options?: {
@@ -887,7 +894,8 @@ export const getGetConnectionCredentialsQueryOptions = <
 export type GetConnectionCredentialsQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getConnectionCredentials>>
 >;
-export type GetConnectionCredentialsQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetConnectionCredentialsQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Get connection credentials
@@ -895,7 +903,7 @@ export type GetConnectionCredentialsQueryError = ErrorType<RenderErrorResponseDT
 
 export function useGetConnectionCredentials<
 	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: GetConnectionCredentialsPathParameters,
 	options?: {
@@ -965,7 +973,7 @@ export const getListServicesMetadataQueryKey = (
 
 export const getListServicesMetadataQueryOptions = <
 	TData = Awaited<ReturnType<typeof listServicesMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListServicesMetadataPathParameters,
 	params?: ListServicesMetadataParams,
@@ -1010,7 +1018,7 @@ export type ListServicesMetadataQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListServicesMetadata<
 	TData = Awaited<ReturnType<typeof listServicesMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListServicesMetadataPathParameters,
 	params?: ListServicesMetadataParams,
@@ -1083,7 +1091,7 @@ export const getGetServiceQueryKey = (
 
 export const getGetServiceQueryOptions = <
 	TData = Awaited<ReturnType<typeof getService>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, serviceId }: GetServicePathParameters,
 	params?: GetServiceParams,
@@ -1126,7 +1134,7 @@ export type GetServiceQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetService<
 	TData = Awaited<ReturnType<typeof getService>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, serviceId }: GetServicePathParameters,
 	params?: GetServiceParams,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
@@ -35,6 +33,9 @@ import type {
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint deletes the public sharing config and disables the public sharing of a dashboard
  * @summary Delete public dashboard
@@ -50,7 +51,7 @@ export const deletePublicDashboard = ({
 
 export const getDeletePublicDashboardMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deletePublicDashboard>>,
@@ -67,8 +68,8 @@ export const getDeletePublicDashboardMutationOptions = <
 	const mutationKey = ['deletePublicDashboard'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -89,14 +90,15 @@ export type DeletePublicDashboardMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deletePublicDashboard>>
 >;
 
-export type DeletePublicDashboardMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeletePublicDashboardMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Delete public dashboard
  */
 export const useDeletePublicDashboard = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deletePublicDashboard>>,
@@ -137,7 +139,7 @@ export const getGetPublicDashboardQueryKey = ({
 
 export const getGetPublicDashboardQueryOptions = <
 	TData = Awaited<ReturnType<typeof getPublicDashboard>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetPublicDashboardPathParameters,
 	options?: {
@@ -180,7 +182,7 @@ export type GetPublicDashboardQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetPublicDashboard<
 	TData = Awaited<ReturnType<typeof getPublicDashboard>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetPublicDashboardPathParameters,
 	options?: {
@@ -238,7 +240,7 @@ export const createPublicDashboard = (
 
 export const getCreatePublicDashboardMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createPublicDashboard>>,
@@ -261,8 +263,8 @@ export const getCreatePublicDashboardMutationOptions = <
 	const mutationKey = ['createPublicDashboard'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -285,15 +287,17 @@ export const getCreatePublicDashboardMutationOptions = <
 export type CreatePublicDashboardMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createPublicDashboard>>
 >;
-export type CreatePublicDashboardMutationBody = BodyType<DashboardtypesPostablePublicDashboardDTO>;
-export type CreatePublicDashboardMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreatePublicDashboardMutationBody =
+	BodyType<DashboardtypesPostablePublicDashboardDTO>;
+export type CreatePublicDashboardMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Create public dashboard
  */
 export const useCreatePublicDashboard = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createPublicDashboard>>,
@@ -335,7 +339,7 @@ export const updatePublicDashboard = (
 
 export const getUpdatePublicDashboardMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updatePublicDashboard>>,
@@ -358,8 +362,8 @@ export const getUpdatePublicDashboardMutationOptions = <
 	const mutationKey = ['updatePublicDashboard'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -382,15 +386,17 @@ export const getUpdatePublicDashboardMutationOptions = <
 export type UpdatePublicDashboardMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updatePublicDashboard>>
 >;
-export type UpdatePublicDashboardMutationBody = BodyType<DashboardtypesUpdatablePublicDashboardDTO>;
-export type UpdatePublicDashboardMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdatePublicDashboardMutationBody =
+	BodyType<DashboardtypesUpdatablePublicDashboardDTO>;
+export type UpdatePublicDashboardMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Update public dashboard
  */
 export const useUpdatePublicDashboard = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updatePublicDashboard>>,
@@ -437,7 +443,7 @@ export const getGetPublicDashboardDataQueryKey = ({
 
 export const getGetPublicDashboardDataQueryOptions = <
 	TData = Awaited<ReturnType<typeof getPublicDashboardData>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetPublicDashboardDataPathParameters,
 	options?: {
@@ -472,7 +478,8 @@ export const getGetPublicDashboardDataQueryOptions = <
 export type GetPublicDashboardDataQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getPublicDashboardData>>
 >;
-export type GetPublicDashboardDataQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetPublicDashboardDataQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Get public dashboard data
@@ -480,7 +487,7 @@ export type GetPublicDashboardDataQueryError = ErrorType<RenderErrorResponseDTO>
 
 export function useGetPublicDashboardData<
 	TData = Awaited<ReturnType<typeof getPublicDashboardData>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetPublicDashboardDataPathParameters,
 	options?: {
@@ -542,7 +549,7 @@ export const getGetPublicDashboardWidgetQueryRangeQueryKey = ({
 
 export const getGetPublicDashboardWidgetQueryRangeQueryOptions = <
 	TData = Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
 	options?: {
@@ -578,7 +585,8 @@ export const getGetPublicDashboardWidgetQueryRangeQueryOptions = <
 export type GetPublicDashboardWidgetQueryRangeQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>
 >;
-export type GetPublicDashboardWidgetQueryRangeQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetPublicDashboardWidgetQueryRangeQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Get query range result
@@ -586,7 +594,7 @@ export type GetPublicDashboardWidgetQueryRangeQueryError = ErrorType<RenderError
 
 export function useGetPublicDashboardWidgetQueryRange<
 	TData = Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
 	options?: {

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreateDowntimeSchedule201,
 	DeleteDowntimeScheduleByIDPathParameters,
@@ -31,6 +29,9 @@ import type {
 	UpdateDowntimeScheduleByIDPathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint lists all planned maintenance / downtime schedules
  * @summary List downtime schedules
@@ -55,7 +56,7 @@ export const getListDowntimeSchedulesQueryKey = (
 
 export const getListDowntimeSchedulesQueryOptions = <
 	TData = Awaited<ReturnType<typeof listDowntimeSchedules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: ListDowntimeSchedulesParams,
 	options?: {
@@ -93,7 +94,7 @@ export type ListDowntimeSchedulesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListDowntimeSchedules<
 	TData = Awaited<ReturnType<typeof listDowntimeSchedules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: ListDowntimeSchedulesParams,
 	options?: {
@@ -150,7 +151,7 @@ export const createDowntimeSchedule = (
 
 export const getCreateDowntimeScheduleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createDowntimeSchedule>>,
@@ -167,8 +168,8 @@ export const getCreateDowntimeScheduleMutationOptions = <
 	const mutationKey = ['createDowntimeSchedule'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -188,15 +189,17 @@ export const getCreateDowntimeScheduleMutationOptions = <
 export type CreateDowntimeScheduleMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createDowntimeSchedule>>
 >;
-export type CreateDowntimeScheduleMutationBody = BodyType<RuletypesPostablePlannedMaintenanceDTO>;
-export type CreateDowntimeScheduleMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateDowntimeScheduleMutationBody =
+	BodyType<RuletypesPostablePlannedMaintenanceDTO>;
+export type CreateDowntimeScheduleMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Create downtime schedule
  */
 export const useCreateDowntimeSchedule = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createDowntimeSchedule>>,
@@ -229,7 +232,7 @@ export const deleteDowntimeScheduleByID = ({
 
 export const getDeleteDowntimeScheduleByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
@@ -246,8 +249,8 @@ export const getDeleteDowntimeScheduleByIDMutationOptions = <
 	const mutationKey = ['deleteDowntimeScheduleByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -268,14 +271,15 @@ export type DeleteDowntimeScheduleByIDMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>
 >;
 
-export type DeleteDowntimeScheduleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeleteDowntimeScheduleByIDMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Delete downtime schedule
  */
 export const useDeleteDowntimeScheduleByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
@@ -316,7 +320,7 @@ export const getGetDowntimeScheduleByIDQueryKey = ({
 
 export const getGetDowntimeScheduleByIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetDowntimeScheduleByIDPathParameters,
 	options?: {
@@ -351,7 +355,8 @@ export const getGetDowntimeScheduleByIDQueryOptions = <
 export type GetDowntimeScheduleByIDQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getDowntimeScheduleByID>>
 >;
-export type GetDowntimeScheduleByIDQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetDowntimeScheduleByIDQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Get downtime schedule by ID
@@ -359,7 +364,7 @@ export type GetDowntimeScheduleByIDQueryError = ErrorType<RenderErrorResponseDTO
 
 export function useGetDowntimeScheduleByID<
 	TData = Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetDowntimeScheduleByIDPathParameters,
 	options?: {
@@ -415,7 +420,7 @@ export const updateDowntimeScheduleByID = (
 
 export const getUpdateDowntimeScheduleByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
@@ -438,8 +443,8 @@ export const getUpdateDowntimeScheduleByIDMutationOptions = <
 	const mutationKey = ['updateDowntimeScheduleByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -462,15 +467,17 @@ export const getUpdateDowntimeScheduleByIDMutationOptions = <
 export type UpdateDowntimeScheduleByIDMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateDowntimeScheduleByID>>
 >;
-export type UpdateDowntimeScheduleByIDMutationBody = BodyType<RuletypesPostablePlannedMaintenanceDTO>;
-export type UpdateDowntimeScheduleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateDowntimeScheduleByIDMutationBody =
+	BodyType<RuletypesPostablePlannedMaintenanceDTO>;
+export type UpdateDowntimeScheduleByIDMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Update downtime schedule
  */
 export const useUpdateDowntimeScheduleByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,12 +13,12 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';
 
-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { GetFeatures200, RenderErrorResponseDTO } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint returns the supported features and their details
  * @summary Get features
@@ -36,7 +37,7 @@ export const getGetFeaturesQueryKey = () => {
 
 export const getGetFeaturesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getFeatures>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getFeatures>>,
@@ -70,7 +71,7 @@ export type GetFeaturesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetFeatures<
 	TData = Awaited<ReturnType<typeof getFeatures>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getFeatures>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,10 +13,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';
 
-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetFieldsKeys200,
 	GetFieldsKeysParams,
@@ -24,6 +22,9 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint returns field keys
  * @summary Get field keys
@@ -46,7 +47,7 @@ export const getGetFieldsKeysQueryKey = (params?: GetFieldsKeysParams) => {
 
 export const getGetFieldsKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof getFieldsKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetFieldsKeysParams,
 	options?: {
@@ -83,7 +84,7 @@ export type GetFieldsKeysQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetFieldsKeys<
 	TData = Awaited<ReturnType<typeof getFieldsKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetFieldsKeysParams,
 	options?: {
@@ -143,7 +144,7 @@ export const getGetFieldsValuesQueryKey = (params?: GetFieldsValuesParams) => {
 
 export const getGetFieldsValuesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getFieldsValues>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetFieldsValuesParams,
 	options?: {
@@ -180,7 +181,7 @@ export type GetFieldsValuesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetFieldsValues<
 	TData = Awaited<ReturnType<typeof getFieldsValues>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetFieldsValuesParams,
 	options?: {

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreateIngestionKey201,
 	CreateIngestionKeyLimit201,
@@ -37,6 +35,9 @@ import type {
 	UpdateIngestionKeyPathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint returns the ingestion keys for a workspace
  * @summary Get ingestion keys for workspace
@@ -64,7 +65,7 @@ export const getGetIngestionKeysQueryKey = (
 
 export const getGetIngestionKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof getIngestionKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetIngestionKeysParams,
 	options?: {
@@ -101,7 +102,7 @@ export type GetIngestionKeysQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetIngestionKeys<
 	TData = Awaited<ReturnType<typeof getIngestionKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: GetIngestionKeysParams,
 	options?: {
@@ -158,7 +159,7 @@ export const createIngestionKey = (
 
 export const getCreateIngestionKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createIngestionKey>>,
@@ -175,8 +176,8 @@ export const getCreateIngestionKeyMutationOptions = <
 	const mutationKey = ['createIngestionKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -196,7 +197,8 @@ export const getCreateIngestionKeyMutationOptions = <
 export type CreateIngestionKeyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createIngestionKey>>
 >;
-export type CreateIngestionKeyMutationBody = BodyType<GatewaytypesPostableIngestionKeyDTO>;
+export type CreateIngestionKeyMutationBody =
+	BodyType<GatewaytypesPostableIngestionKeyDTO>;
 export type CreateIngestionKeyMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -204,7 +206,7 @@ export type CreateIngestionKeyMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useCreateIngestionKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createIngestionKey>>,
@@ -237,7 +239,7 @@ export const deleteIngestionKey = ({
 
 export const getDeleteIngestionKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteIngestionKey>>,
@@ -254,8 +256,8 @@ export const getDeleteIngestionKeyMutationOptions = <
 	const mutationKey = ['deleteIngestionKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -283,7 +285,7 @@ export type DeleteIngestionKeyMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useDeleteIngestionKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteIngestionKey>>,
@@ -319,7 +321,7 @@ export const updateIngestionKey = (
 
 export const getUpdateIngestionKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateIngestionKey>>,
@@ -342,8 +344,8 @@ export const getUpdateIngestionKeyMutationOptions = <
 	const mutationKey = ['updateIngestionKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -366,7 +368,8 @@ export const getUpdateIngestionKeyMutationOptions = <
 export type UpdateIngestionKeyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateIngestionKey>>
 >;
-export type UpdateIngestionKeyMutationBody = BodyType<GatewaytypesPostableIngestionKeyDTO>;
+export type UpdateIngestionKeyMutationBody =
+	BodyType<GatewaytypesPostableIngestionKeyDTO>;
 export type UpdateIngestionKeyMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -374,7 +377,7 @@ export type UpdateIngestionKeyMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useUpdateIngestionKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateIngestionKey>>,
@@ -418,7 +421,7 @@ export const createIngestionKeyLimit = (
 
 export const getCreateIngestionKeyLimitMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createIngestionKeyLimit>>,
@@ -441,8 +444,8 @@ export const getCreateIngestionKeyLimitMutationOptions = <
 	const mutationKey = ['createIngestionKeyLimit'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -465,15 +468,17 @@ export const getCreateIngestionKeyLimitMutationOptions = <
 export type CreateIngestionKeyLimitMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createIngestionKeyLimit>>
 >;
-export type CreateIngestionKeyLimitMutationBody = BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
-export type CreateIngestionKeyLimitMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateIngestionKeyLimitMutationBody =
+	BodyType<GatewaytypesPostableIngestionKeyLimitDTO>;
+export type CreateIngestionKeyLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Create limit for the ingestion key
  */
 export const useCreateIngestionKeyLimit = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createIngestionKeyLimit>>,
@@ -512,7 +517,7 @@ export const deleteIngestionKeyLimit = ({
 
 export const getDeleteIngestionKeyLimitMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteIngestionKeyLimit>>,
@@ -529,8 +534,8 @@ export const getDeleteIngestionKeyLimitMutationOptions = <
 	const mutationKey = ['deleteIngestionKeyLimit'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -551,14 +556,15 @@ export type DeleteIngestionKeyLimitMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deleteIngestionKeyLimit>>
 >;
 
-export type DeleteIngestionKeyLimitMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeleteIngestionKeyLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Delete limit for the ingestion key
  */
 export const useDeleteIngestionKeyLimit = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteIngestionKeyLimit>>,
@@ -594,7 +600,7 @@ export const updateIngestionKeyLimit = (
 
 export const getUpdateIngestionKeyLimitMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateIngestionKeyLimit>>,
@@ -617,8 +623,8 @@ export const getUpdateIngestionKeyLimitMutationOptions = <
 	const mutationKey = ['updateIngestionKeyLimit'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -641,15 +647,17 @@ export const getUpdateIngestionKeyLimitMutationOptions = <
 export type UpdateIngestionKeyLimitMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateIngestionKeyLimit>>
 >;
-export type UpdateIngestionKeyLimitMutationBody = BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
-export type UpdateIngestionKeyLimitMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateIngestionKeyLimitMutationBody =
+	BodyType<GatewaytypesUpdatableIngestionKeyLimitDTO>;
+export type UpdateIngestionKeyLimitMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Update limit for the ingestion key
  */
 export const useUpdateIngestionKeyLimit = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateIngestionKeyLimit>>,
@@ -700,7 +708,7 @@ export const getSearchIngestionKeysQueryKey = (
 
 export const getSearchIngestionKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params: SearchIngestionKeysParams,
 	options?: {
@@ -738,7 +746,7 @@ export type SearchIngestionKeysQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useSearchIngestionKeys<
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params: SearchIngestionKeysParams,
 	options?: {

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,15 +13,15 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';
 
-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetGlobalConfig200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint returns global config
  * @summary Get global config
@@ -39,7 +40,7 @@ export const getGetGlobalConfigQueryKey = () => {
 
 export const getGetGlobalConfigQueryOptions = <
 	TData = Awaited<ReturnType<typeof getGlobalConfig>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getGlobalConfig>>,
@@ -73,7 +74,7 @@ export type GetGlobalConfigQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetGlobalConfig<
 	TData = Awaited<ReturnType<typeof getGlobalConfig>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getGlobalConfig>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -12,10 +13,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';
 
-import type { ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	Healthz200,
 	Healthz503,
@@ -25,6 +23,9 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
 /**
  * @summary Health check
  */
@@ -42,7 +43,7 @@ export const getHealthzQueryKey = () => {
 
 export const getHealthzQueryOptions = <
 	TData = Awaited<ReturnType<typeof healthz>>,
-	TError = ErrorType<Healthz503>
+	TError = ErrorType<Healthz503>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof healthz>>, TError, TData>;
 }) => {
@@ -72,7 +73,7 @@ export type HealthzQueryError = ErrorType<Healthz503>;
 
 export function useHealthz<
 	TData = Awaited<ReturnType<typeof healthz>>,
-	TError = ErrorType<Healthz503>
+	TError = ErrorType<Healthz503>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof healthz>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -119,7 +120,7 @@ export const getLivezQueryKey = () => {
 
 export const getLivezQueryOptions = <
 	TData = Awaited<ReturnType<typeof livez>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof livez>>, TError, TData>;
 }) => {
@@ -147,7 +148,7 @@ export type LivezQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useLivez<
 	TData = Awaited<ReturnType<typeof livez>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof livez>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -191,7 +192,7 @@ export const getReadyzQueryKey = () => {
 
 export const getReadyzQueryOptions = <
 	TData = Awaited<ReturnType<typeof readyz>>,
-	TError = ErrorType<Readyz503>
+	TError = ErrorType<Readyz503>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof readyz>>, TError, TData>;
 }) => {
@@ -219,7 +220,7 @@ export type ReadyzQueryError = ErrorType<Readyz503>;
 
 export function useReadyz<
 	TData = Awaited<ReturnType<typeof readyz>>,
-	TError = ErrorType<Readyz503>
+	TError = ErrorType<Readyz503>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof readyz>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	HandleExportRawDataPOSTParams,
 	ListPromotedAndIndexedPaths200,
@@ -27,6 +25,9 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoints allows complex query exporting raw data for traces and logs
  * @summary Export raw data
@@ -48,7 +49,7 @@ export const handleExportRawDataPOST = (
 
 export const getHandleExportRawDataPOSTMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof handleExportRawDataPOST>>,
@@ -71,8 +72,8 @@ export const getHandleExportRawDataPOSTMutationOptions = <
 	const mutationKey = ['handleExportRawDataPOST'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -95,15 +96,17 @@ export const getHandleExportRawDataPOSTMutationOptions = <
 export type HandleExportRawDataPOSTMutationResult = NonNullable<
 	Awaited<ReturnType<typeof handleExportRawDataPOST>>
 >;
-export type HandleExportRawDataPOSTMutationBody = BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
-export type HandleExportRawDataPOSTMutationError = ErrorType<RenderErrorResponseDTO>;
+export type HandleExportRawDataPOSTMutationBody =
+	BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
+export type HandleExportRawDataPOSTMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Export raw data
  */
 export const useHandleExportRawDataPOST = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof handleExportRawDataPOST>>,
@@ -145,7 +148,7 @@ export const getListPromotedAndIndexedPathsQueryKey = () => {
 
 export const getListPromotedAndIndexedPathsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
@@ -172,7 +175,8 @@ export const getListPromotedAndIndexedPathsQueryOptions = <
 export type ListPromotedAndIndexedPathsQueryResult = NonNullable<
 	Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>
 >;
-export type ListPromotedAndIndexedPathsQueryError = ErrorType<RenderErrorResponseDTO>;
+export type ListPromotedAndIndexedPathsQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Promote and index paths
@@ -180,7 +184,7 @@ export type ListPromotedAndIndexedPathsQueryError = ErrorType<RenderErrorRespons
 
 export function useListPromotedAndIndexedPaths<
 	TData = Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listPromotedAndIndexedPaths>>,
@@ -235,7 +239,7 @@ export const handlePromoteAndIndexPaths = (
 
 export const getHandlePromoteAndIndexPathsMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,
@@ -252,8 +256,8 @@ export const getHandlePromoteAndIndexPathsMutationOptions = <
 	const mutationKey = ['handlePromoteAndIndexPaths'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -276,14 +280,15 @@ export type HandlePromoteAndIndexPathsMutationResult = NonNullable<
 export type HandlePromoteAndIndexPathsMutationBody = BodyType<
 	PromotetypesPromotePathDTO[] | null
 >;
-export type HandlePromoteAndIndexPathsMutationError = ErrorType<RenderErrorResponseDTO>;
+export type HandlePromoteAndIndexPathsMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Promote and index paths
  */
 export const useHandlePromoteAndIndexPaths = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof handlePromoteAndIndexPaths>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetMetricAlerts200,
 	GetMetricAlertsPathParameters,
@@ -45,6 +43,9 @@ import type {
 	UpdateMetricMetadataPathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint returns a list of distinct metric names within the specified time range
  * @summary List metric names
@@ -67,7 +68,7 @@ export const getListMetricsQueryKey = (params?: ListMetricsParams) => {
 
 export const getListMetricsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listMetrics>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: ListMetricsParams,
 	options?: {
@@ -104,7 +105,7 @@ export type ListMetricsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListMetrics<
 	TData = Awaited<ReturnType<typeof listMetrics>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	params?: ListMetricsParams,
 	options?: {
@@ -165,7 +166,7 @@ export const getGetMetricAlertsQueryKey = ({
 
 export const getGetMetricAlertsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricAlertsPathParameters,
 	options?: {
@@ -208,7 +209,7 @@ export type GetMetricAlertsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetMetricAlerts<
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricAlertsPathParameters,
 	options?: {
@@ -275,7 +276,7 @@ export const getGetMetricAttributesQueryKey = (
 
 export const getGetMetricAttributesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricAttributesPathParameters,
 	params?: GetMetricAttributesParams,
@@ -320,7 +321,7 @@ export type GetMetricAttributesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetMetricAttributes<
 	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricAttributesPathParameters,
 	params?: GetMetricAttributesParams,
@@ -387,7 +388,7 @@ export const getGetMetricDashboardsQueryKey = ({
 
 export const getGetMetricDashboardsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricDashboardsPathParameters,
 	options?: {
@@ -430,7 +431,7 @@ export type GetMetricDashboardsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetMetricDashboards<
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricDashboardsPathParameters,
 	options?: {
@@ -494,7 +495,7 @@ export const getGetMetricHighlightsQueryKey = ({
 
 export const getGetMetricHighlightsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricHighlightsPathParameters,
 	options?: {
@@ -537,7 +538,7 @@ export type GetMetricHighlightsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetMetricHighlights<
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricHighlightsPathParameters,
 	options?: {
@@ -601,7 +602,7 @@ export const getGetMetricMetadataQueryKey = ({
 
 export const getGetMetricMetadataQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricMetadataPathParameters,
 	options?: {
@@ -644,7 +645,7 @@ export type GetMetricMetadataQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetMetricMetadata<
 	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ metricName }: GetMetricMetadataPathParameters,
 	options?: {
@@ -702,7 +703,7 @@ export const updateMetricMetadata = (
 
 export const getUpdateMetricMetadataMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMetricMetadata>>,
@@ -725,8 +726,8 @@ export const getUpdateMetricMetadataMutationOptions = <
 	const mutationKey = ['updateMetricMetadata'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -749,15 +750,17 @@ export const getUpdateMetricMetadataMutationOptions = <
 export type UpdateMetricMetadataMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateMetricMetadata>>
 >;
-export type UpdateMetricMetadataMutationBody = BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
-export type UpdateMetricMetadataMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateMetricMetadataMutationBody =
+	BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>;
+export type UpdateMetricMetadataMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Update metric metadata
  */
 export const useUpdateMetricMetadata = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMetricMetadata>>,
@@ -800,7 +803,7 @@ export const inspectMetrics = (
 
 export const getInspectMetricsMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof inspectMetrics>>,
@@ -817,8 +820,8 @@ export const getInspectMetricsMutationOptions = <
 	const mutationKey = ['inspectMetrics'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -838,7 +841,8 @@ export const getInspectMetricsMutationOptions = <
 export type InspectMetricsMutationResult = NonNullable<
 	Awaited<ReturnType<typeof inspectMetrics>>
 >;
-export type InspectMetricsMutationBody = BodyType<MetricsexplorertypesInspectMetricsRequestDTO>;
+export type InspectMetricsMutationBody =
+	BodyType<MetricsexplorertypesInspectMetricsRequestDTO>;
 export type InspectMetricsMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -846,7 +850,7 @@ export type InspectMetricsMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useInspectMetrics = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof inspectMetrics>>,
@@ -882,7 +886,7 @@ export const getGetMetricsOnboardingStatusQueryKey = () => {
 
 export const getGetMetricsOnboardingStatusQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricsOnboardingStatus>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricsOnboardingStatus>>,
@@ -909,7 +913,8 @@ export const getGetMetricsOnboardingStatusQueryOptions = <
 export type GetMetricsOnboardingStatusQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getMetricsOnboardingStatus>>
 >;
-export type GetMetricsOnboardingStatusQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetMetricsOnboardingStatusQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Check if non-SigNoz metrics have been received
@@ -917,7 +922,7 @@ export type GetMetricsOnboardingStatusQueryError = ErrorType<RenderErrorResponse
 
 export function useGetMetricsOnboardingStatus<
 	TData = Awaited<ReturnType<typeof getMetricsOnboardingStatus>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricsOnboardingStatus>>,
@@ -970,7 +975,7 @@ export const getMetricsStats = (
 
 export const getGetMetricsStatsMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof getMetricsStats>>,
@@ -987,8 +992,8 @@ export const getGetMetricsStatsMutationOptions = <
 	const mutationKey = ['getMetricsStats'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1008,7 +1013,8 @@ export const getGetMetricsStatsMutationOptions = <
 export type GetMetricsStatsMutationResult = NonNullable<
 	Awaited<ReturnType<typeof getMetricsStats>>
 >;
-export type GetMetricsStatsMutationBody = BodyType<MetricsexplorertypesStatsRequestDTO>;
+export type GetMetricsStatsMutationBody =
+	BodyType<MetricsexplorertypesStatsRequestDTO>;
 export type GetMetricsStatsMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -1016,7 +1022,7 @@ export type GetMetricsStatsMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useGetMetricsStats = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof getMetricsStats>>,
@@ -1053,7 +1059,7 @@ export const getMetricsTreemap = (
 
 export const getGetMetricsTreemapMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof getMetricsTreemap>>,
@@ -1070,8 +1076,8 @@ export const getGetMetricsTreemapMutationOptions = <
 	const mutationKey = ['getMetricsTreemap'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1091,7 +1097,8 @@ export const getGetMetricsTreemapMutationOptions = <
 export type GetMetricsTreemapMutationResult = NonNullable<
 	Awaited<ReturnType<typeof getMetricsTreemap>>
 >;
-export type GetMetricsTreemapMutationBody = BodyType<MetricsexplorertypesTreemapRequestDTO>;
+export type GetMetricsTreemapMutationBody =
+	BodyType<MetricsexplorertypesTreemapRequestDTO>;
 export type GetMetricsTreemapMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -1099,7 +1106,7 @@ export type GetMetricsTreemapMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useGetMetricsTreemap = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof getMetricsTreemap>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,16 +16,16 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetMyOrganization200,
 	RenderErrorResponseDTO,
 	TypesOrganizationDTO,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint returns the organization I belong to
  * @summary Get my organization
@@ -43,7 +44,7 @@ export const getGetMyOrganizationQueryKey = () => {
 
 export const getGetMyOrganizationQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMyOrganization>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyOrganization>>,
@@ -77,7 +78,7 @@ export type GetMyOrganizationQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetMyOrganization<
 	TData = Awaited<ReturnType<typeof getMyOrganization>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyOrganization>>,
@@ -128,7 +129,7 @@ export const updateMyOrganization = (
 
 export const getUpdateMyOrganizationMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyOrganization>>,
@@ -145,8 +146,8 @@ export const getUpdateMyOrganizationMutationOptions = <
 	const mutationKey = ['updateMyOrganization'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -167,14 +168,15 @@ export type UpdateMyOrganizationMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateMyOrganization>>
 >;
 export type UpdateMyOrganizationMutationBody = BodyType<TypesOrganizationDTO>;
-export type UpdateMyOrganizationMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateMyOrganizationMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Update my organization
  */
 export const useUpdateMyOrganization = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyOrganization>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetOrgPreference200,
 	GetOrgPreferencePathParameters,
@@ -32,6 +30,9 @@ import type {
 	UpdateUserPreferencePathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint lists all org preferences
  * @summary List org preferences
@@ -50,7 +51,7 @@ export const getListOrgPreferencesQueryKey = () => {
 
 export const getListOrgPreferencesQueryOptions = <
 	TData = Awaited<ReturnType<typeof listOrgPreferences>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listOrgPreferences>>,
@@ -84,7 +85,7 @@ export type ListOrgPreferencesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListOrgPreferences<
 	TData = Awaited<ReturnType<typeof listOrgPreferences>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listOrgPreferences>>,
@@ -141,7 +142,7 @@ export const getGetOrgPreferenceQueryKey = ({
 
 export const getGetOrgPreferenceQueryOptions = <
 	TData = Awaited<ReturnType<typeof getOrgPreference>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ name }: GetOrgPreferencePathParameters,
 	options?: {
@@ -184,7 +185,7 @@ export type GetOrgPreferenceQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetOrgPreference<
 	TData = Awaited<ReturnType<typeof getOrgPreference>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ name }: GetOrgPreferencePathParameters,
 	options?: {
@@ -240,7 +241,7 @@ export const updateOrgPreference = (
 
 export const getUpdateOrgPreferenceMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateOrgPreference>>,
@@ -263,8 +264,8 @@ export const getUpdateOrgPreferenceMutationOptions = <
 	const mutationKey = ['updateOrgPreference'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -287,15 +288,17 @@ export const getUpdateOrgPreferenceMutationOptions = <
 export type UpdateOrgPreferenceMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateOrgPreference>>
 >;
-export type UpdateOrgPreferenceMutationBody = BodyType<PreferencetypesUpdatablePreferenceDTO>;
-export type UpdateOrgPreferenceMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateOrgPreferenceMutationBody =
+	BodyType<PreferencetypesUpdatablePreferenceDTO>;
+export type UpdateOrgPreferenceMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Update org preference
  */
 export const useUpdateOrgPreference = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateOrgPreference>>,
@@ -337,7 +340,7 @@ export const getListUserPreferencesQueryKey = () => {
 
 export const getListUserPreferencesQueryOptions = <
 	TData = Awaited<ReturnType<typeof listUserPreferences>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listUserPreferences>>,
@@ -371,7 +374,7 @@ export type ListUserPreferencesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListUserPreferences<
 	TData = Awaited<ReturnType<typeof listUserPreferences>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listUserPreferences>>,
@@ -428,7 +431,7 @@ export const getGetUserPreferenceQueryKey = ({
 
 export const getGetUserPreferenceQueryOptions = <
 	TData = Awaited<ReturnType<typeof getUserPreference>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ name }: GetUserPreferencePathParameters,
 	options?: {
@@ -471,7 +474,7 @@ export type GetUserPreferenceQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetUserPreference<
 	TData = Awaited<ReturnType<typeof getUserPreference>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ name }: GetUserPreferencePathParameters,
 	options?: {
@@ -527,7 +530,7 @@ export const updateUserPreference = (
 
 export const getUpdateUserPreferenceMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUserPreference>>,
@@ -550,8 +553,8 @@ export const getUpdateUserPreferenceMutationOptions = <
 	const mutationKey = ['updateUserPreference'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -574,15 +577,17 @@ export const getUpdateUserPreferenceMutationOptions = <
 export type UpdateUserPreferenceMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateUserPreference>>
 >;
-export type UpdateUserPreferenceMutationBody = BodyType<PreferencetypesUpdatablePreferenceDTO>;
-export type UpdateUserPreferenceMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateUserPreferenceMutationBody =
+	BodyType<PreferencetypesUpdatablePreferenceDTO>;
+export type UpdateUserPreferenceMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Update user preference
  */
 export const useUpdateUserPreference = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUserPreference>>,

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

@@ -4,22 +4,23 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation } from 'react-query';
 import type {
 	MutationFunction,
 	UseMutationOptions,
 	UseMutationResult,
 } from 'react-query';
-import { useMutation } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
-	Querybuildertypesv5QueryRangeRequestDTO,
 	QueryRangeV5200,
+	Querybuildertypesv5QueryRangeRequestDTO,
 	RenderErrorResponseDTO,
 	ReplaceVariables200,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * Execute a composite query over a time range. Supports builder queries (traces, logs, metrics), formulas, trace operators, PromQL, and ClickHouse SQL.
  * @summary Query range
@@ -39,7 +40,7 @@ export const queryRangeV5 = (
 
 export const getQueryRangeV5MutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof queryRangeV5>>,
@@ -56,8 +57,8 @@ export const getQueryRangeV5MutationOptions = <
 	const mutationKey = ['queryRangeV5'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -77,7 +78,8 @@ export const getQueryRangeV5MutationOptions = <
 export type QueryRangeV5MutationResult = NonNullable<
 	Awaited<ReturnType<typeof queryRangeV5>>
 >;
-export type QueryRangeV5MutationBody = BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
+export type QueryRangeV5MutationBody =
+	BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
 export type QueryRangeV5MutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -85,7 +87,7 @@ export type QueryRangeV5MutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useQueryRangeV5 = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof queryRangeV5>>,
@@ -122,7 +124,7 @@ export const replaceVariables = (
 
 export const getReplaceVariablesMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof replaceVariables>>,
@@ -139,8 +141,8 @@ export const getReplaceVariablesMutationOptions = <
 	const mutationKey = ['replaceVariables'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -160,7 +162,8 @@ export const getReplaceVariablesMutationOptions = <
 export type ReplaceVariablesMutationResult = NonNullable<
 	Awaited<ReturnType<typeof replaceVariables>>
 >;
-export type ReplaceVariablesMutationBody = BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
+export type ReplaceVariablesMutationBody =
+	BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
 export type ReplaceVariablesMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -168,7 +171,7 @@ export type ReplaceVariablesMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useReplaceVariables = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof replaceVariables>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AuthtypesPatchableObjectsDTO,
 	AuthtypesPatchableRoleDTO,
@@ -35,6 +33,9 @@ import type {
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint lists all roles
  * @summary List roles
@@ -53,7 +54,7 @@ export const getListRolesQueryKey = () => {
 
 export const getListRolesQueryOptions = <
 	TData = Awaited<ReturnType<typeof listRoles>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listRoles>>, TError, TData>;
 }) => {
@@ -83,7 +84,7 @@ export type ListRolesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListRoles<
 	TData = Awaited<ReturnType<typeof listRoles>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listRoles>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -132,7 +133,7 @@ export const createRole = (
 
 export const getCreateRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRole>>,
@@ -149,8 +150,8 @@ export const getCreateRoleMutationOptions = <
 	const mutationKey = ['createRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -178,7 +179,7 @@ export type CreateRoleMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useCreateRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRole>>,
@@ -209,7 +210,7 @@ export const deleteRole = ({ id }: DeleteRolePathParameters) => {
 
 export const getDeleteRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRole>>,
@@ -226,8 +227,8 @@ export const getDeleteRoleMutationOptions = <
 	const mutationKey = ['deleteRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -255,7 +256,7 @@ export type DeleteRoleMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useDeleteRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRole>>,
@@ -294,7 +295,7 @@ export const getGetRoleQueryKey = ({ id }: GetRolePathParameters) => {
 
 export const getGetRoleQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRole>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRolePathParameters,
 	options?: {
@@ -330,7 +331,7 @@ export type GetRoleQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetRole<
 	TData = Awaited<ReturnType<typeof getRole>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRolePathParameters,
 	options?: {
@@ -382,7 +383,7 @@ export const patchRole = (
 
 export const getPatchRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchRole>>,
@@ -405,8 +406,8 @@ export const getPatchRoleMutationOptions = <
 	const mutationKey = ['patchRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -437,7 +438,7 @@ export type PatchRoleMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const usePatchRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchRole>>,
@@ -485,7 +486,7 @@ export const getGetObjectsQueryKey = ({
 
 export const getGetObjectsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getObjects>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, relation }: GetObjectsPathParameters,
 	options?: {
@@ -526,7 +527,7 @@ export type GetObjectsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetObjects<
 	TData = Awaited<ReturnType<typeof getObjects>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, relation }: GetObjectsPathParameters,
 	options?: {
@@ -582,7 +583,7 @@ export const patchObjects = (
 
 export const getPatchObjectsMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchObjects>>,
@@ -605,8 +606,8 @@ export const getPatchObjectsMutationOptions = <
 	const mutationKey = ['patchObjects'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -637,7 +638,7 @@ export type PatchObjectsMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const usePatchObjects = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchObjects>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AlertmanagertypesPostableRoutePolicyDTO,
 	CreateRoutePolicy201,
@@ -31,6 +29,9 @@ import type {
 	UpdateRoutePolicyPathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint lists all route policies for the organization
  * @summary List route policies
@@ -49,7 +50,7 @@ export const getGetAllRoutePoliciesQueryKey = () => {
 
 export const getGetAllRoutePoliciesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getAllRoutePolicies>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getAllRoutePolicies>>,
@@ -83,7 +84,7 @@ export type GetAllRoutePoliciesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetAllRoutePolicies<
 	TData = Awaited<ReturnType<typeof getAllRoutePolicies>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getAllRoutePolicies>>,
@@ -136,7 +137,7 @@ export const createRoutePolicy = (
 
 export const getCreateRoutePolicyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRoutePolicy>>,
@@ -153,8 +154,8 @@ export const getCreateRoutePolicyMutationOptions = <
 	const mutationKey = ['createRoutePolicy'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -174,7 +175,8 @@ export const getCreateRoutePolicyMutationOptions = <
 export type CreateRoutePolicyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createRoutePolicy>>
 >;
-export type CreateRoutePolicyMutationBody = BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
+export type CreateRoutePolicyMutationBody =
+	BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
 export type CreateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -182,7 +184,7 @@ export type CreateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useCreateRoutePolicy = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRoutePolicy>>,
@@ -215,7 +217,7 @@ export const deleteRoutePolicyByID = ({
 
 export const getDeleteRoutePolicyByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
@@ -232,8 +234,8 @@ export const getDeleteRoutePolicyByIDMutationOptions = <
 	const mutationKey = ['deleteRoutePolicyByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -254,14 +256,15 @@ export type DeleteRoutePolicyByIDMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deleteRoutePolicyByID>>
 >;
 
-export type DeleteRoutePolicyByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeleteRoutePolicyByIDMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Delete route policy
  */
 export const useDeleteRoutePolicyByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
@@ -302,7 +305,7 @@ export const getGetRoutePolicyByIDQueryKey = ({
 
 export const getGetRoutePolicyByIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRoutePolicyByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRoutePolicyByIDPathParameters,
 	options?: {
@@ -345,7 +348,7 @@ export type GetRoutePolicyByIDQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetRoutePolicyByID<
 	TData = Awaited<ReturnType<typeof getRoutePolicyByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRoutePolicyByIDPathParameters,
 	options?: {
@@ -401,7 +404,7 @@ export const updateRoutePolicy = (
 
 export const getUpdateRoutePolicyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateRoutePolicy>>,
@@ -424,8 +427,8 @@ export const getUpdateRoutePolicyMutationOptions = <
 	const mutationKey = ['updateRoutePolicy'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -448,7 +451,8 @@ export const getUpdateRoutePolicyMutationOptions = <
 export type UpdateRoutePolicyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateRoutePolicy>>
 >;
-export type UpdateRoutePolicyMutationBody = BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
+export type UpdateRoutePolicyMutationBody =
+	BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
 export type UpdateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -456,7 +460,7 @@ export type UpdateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useUpdateRoutePolicy = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateRoutePolicy>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreateRule201,
 	DeleteRuleByIDPathParameters,
@@ -51,6 +49,9 @@ import type {
 	UpdateRuleByIDPathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint lists all alert rules with their current evaluation state
  * @summary List alert rules
@@ -69,7 +70,7 @@ export const getListRulesQueryKey = () => {
 
 export const getListRulesQueryOptions = <
 	TData = Awaited<ReturnType<typeof listRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listRules>>, TError, TData>;
 }) => {
@@ -99,7 +100,7 @@ export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListRules<
 	TData = Awaited<ReturnType<typeof listRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listRules>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -148,7 +149,7 @@ export const createRule = (
 
 export const getCreateRuleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRule>>,
@@ -165,8 +166,8 @@ export const getCreateRuleMutationOptions = <
 	const mutationKey = ['createRule'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -194,7 +195,7 @@ export type CreateRuleMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useCreateRule = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createRule>>,
@@ -225,7 +226,7 @@ export const deleteRuleByID = ({ id }: DeleteRuleByIDPathParameters) => {
 
 export const getDeleteRuleByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRuleByID>>,
@@ -242,8 +243,8 @@ export const getDeleteRuleByIDMutationOptions = <
 	const mutationKey = ['deleteRuleByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -271,7 +272,7 @@ export type DeleteRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useDeleteRuleByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteRuleByID>>,
@@ -310,7 +311,7 @@ export const getGetRuleByIDQueryKey = ({ id }: GetRuleByIDPathParameters) => {
 
 export const getGetRuleByIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleByIDPathParameters,
 	options?: {
@@ -352,7 +353,7 @@ export type GetRuleByIDQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetRuleByID<
 	TData = Awaited<ReturnType<typeof getRuleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleByIDPathParameters,
 	options?: {
@@ -408,7 +409,7 @@ export const patchRuleByID = (
 
 export const getPatchRuleByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchRuleByID>>,
@@ -431,8 +432,8 @@ export const getPatchRuleByIDMutationOptions = <
 	const mutationKey = ['patchRuleByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -463,7 +464,7 @@ export type PatchRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const usePatchRuleByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof patchRuleByID>>,
@@ -505,7 +506,7 @@ export const updateRuleByID = (
 
 export const getUpdateRuleByIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateRuleByID>>,
@@ -528,8 +529,8 @@ export const getUpdateRuleByIDMutationOptions = <
 	const mutationKey = ['updateRuleByID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -560,7 +561,7 @@ export type UpdateRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useUpdateRuleByID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateRuleByID>>,
@@ -613,7 +614,7 @@ export const getGetRuleHistoryFilterKeysQueryKey = (
 
 export const getGetRuleHistoryFilterKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryFilterKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryFilterKeysPathParameters,
 	params?: GetRuleHistoryFilterKeysParams,
@@ -649,7 +650,8 @@ export const getGetRuleHistoryFilterKeysQueryOptions = <
 export type GetRuleHistoryFilterKeysQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getRuleHistoryFilterKeys>>
 >;
-export type GetRuleHistoryFilterKeysQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetRuleHistoryFilterKeysQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Get rule history filter keys
@@ -657,7 +659,7 @@ export type GetRuleHistoryFilterKeysQueryError = ErrorType<RenderErrorResponseDT
 
 export function useGetRuleHistoryFilterKeys<
 	TData = Awaited<ReturnType<typeof getRuleHistoryFilterKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryFilterKeysPathParameters,
 	params?: GetRuleHistoryFilterKeysParams,
@@ -730,7 +732,7 @@ export const getGetRuleHistoryFilterValuesQueryKey = (
 
 export const getGetRuleHistoryFilterValuesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryFilterValues>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryFilterValuesPathParameters,
 	params?: GetRuleHistoryFilterValuesParams,
@@ -767,7 +769,8 @@ export const getGetRuleHistoryFilterValuesQueryOptions = <
 export type GetRuleHistoryFilterValuesQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getRuleHistoryFilterValues>>
 >;
-export type GetRuleHistoryFilterValuesQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetRuleHistoryFilterValuesQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Get rule history filter values
@@ -775,7 +778,7 @@ export type GetRuleHistoryFilterValuesQueryError = ErrorType<RenderErrorResponse
 
 export function useGetRuleHistoryFilterValues<
 	TData = Awaited<ReturnType<typeof getRuleHistoryFilterValues>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryFilterValuesPathParameters,
 	params?: GetRuleHistoryFilterValuesParams,
@@ -848,7 +851,7 @@ export const getGetRuleHistoryOverallStatusQueryKey = (
 
 export const getGetRuleHistoryOverallStatusQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryOverallStatus>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryOverallStatusPathParameters,
 	params: GetRuleHistoryOverallStatusParams,
@@ -885,7 +888,8 @@ export const getGetRuleHistoryOverallStatusQueryOptions = <
 export type GetRuleHistoryOverallStatusQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getRuleHistoryOverallStatus>>
 >;
-export type GetRuleHistoryOverallStatusQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetRuleHistoryOverallStatusQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Get rule overall status timeline
@@ -893,7 +897,7 @@ export type GetRuleHistoryOverallStatusQueryError = ErrorType<RenderErrorRespons
 
 export function useGetRuleHistoryOverallStatus<
 	TData = Awaited<ReturnType<typeof getRuleHistoryOverallStatus>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryOverallStatusPathParameters,
 	params: GetRuleHistoryOverallStatusParams,
@@ -966,7 +970,7 @@ export const getGetRuleHistoryStatsQueryKey = (
 
 export const getGetRuleHistoryStatsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryStats>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryStatsPathParameters,
 	params: GetRuleHistoryStatsParams,
@@ -1010,7 +1014,7 @@ export type GetRuleHistoryStatsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetRuleHistoryStats<
 	TData = Awaited<ReturnType<typeof getRuleHistoryStats>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryStatsPathParameters,
 	params: GetRuleHistoryStatsParams,
@@ -1083,7 +1087,7 @@ export const getGetRuleHistoryTimelineQueryKey = (
 
 export const getGetRuleHistoryTimelineQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryTimeline>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryTimelinePathParameters,
 	params: GetRuleHistoryTimelineParams,
@@ -1119,7 +1123,8 @@ export const getGetRuleHistoryTimelineQueryOptions = <
 export type GetRuleHistoryTimelineQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getRuleHistoryTimeline>>
 >;
-export type GetRuleHistoryTimelineQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetRuleHistoryTimelineQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Get rule history timeline
@@ -1127,7 +1132,7 @@ export type GetRuleHistoryTimelineQueryError = ErrorType<RenderErrorResponseDTO>
 
 export function useGetRuleHistoryTimeline<
 	TData = Awaited<ReturnType<typeof getRuleHistoryTimeline>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryTimelinePathParameters,
 	params: GetRuleHistoryTimelineParams,
@@ -1200,7 +1205,7 @@ export const getGetRuleHistoryTopContributorsQueryKey = (
 
 export const getGetRuleHistoryTopContributorsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRuleHistoryTopContributors>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryTopContributorsPathParameters,
 	params: GetRuleHistoryTopContributorsParams,
@@ -1237,7 +1242,8 @@ export const getGetRuleHistoryTopContributorsQueryOptions = <
 export type GetRuleHistoryTopContributorsQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getRuleHistoryTopContributors>>
 >;
-export type GetRuleHistoryTopContributorsQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetRuleHistoryTopContributorsQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Get top contributors to rule firing
@@ -1245,7 +1251,7 @@ export type GetRuleHistoryTopContributorsQueryError = ErrorType<RenderErrorRespo
 
 export function useGetRuleHistoryTopContributors<
 	TData = Awaited<ReturnType<typeof getRuleHistoryTopContributors>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRuleHistoryTopContributorsPathParameters,
 	params: GetRuleHistoryTopContributorsParams,
@@ -1308,7 +1314,7 @@ export const testRule = (
 
 export const getTestRuleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testRule>>,
@@ -1325,8 +1331,8 @@ export const getTestRuleMutationOptions = <
 	const mutationKey = ['testRule'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1354,7 +1360,7 @@ export type TestRuleMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useTestRule = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof testRule>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreateServiceAccount201,
 	CreateServiceAccountKey201,
@@ -45,6 +43,9 @@ import type {
 	UpdateServiceAccountPathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint lists the service accounts for an organisation
  * @summary List service accounts
@@ -63,7 +64,7 @@ export const getListServiceAccountsQueryKey = () => {
 
 export const getListServiceAccountsQueryOptions = <
 	TData = Awaited<ReturnType<typeof listServiceAccounts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listServiceAccounts>>,
@@ -97,7 +98,7 @@ export type ListServiceAccountsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListServiceAccounts<
 	TData = Awaited<ReturnType<typeof listServiceAccounts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listServiceAccounts>>,
@@ -150,7 +151,7 @@ export const createServiceAccount = (
 
 export const getCreateServiceAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccount>>,
@@ -167,8 +168,8 @@ export const getCreateServiceAccountMutationOptions = <
 	const mutationKey = ['createServiceAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -188,15 +189,17 @@ export const getCreateServiceAccountMutationOptions = <
 export type CreateServiceAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createServiceAccount>>
 >;
-export type CreateServiceAccountMutationBody = BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
-export type CreateServiceAccountMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateServiceAccountMutationBody =
+	BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
+export type CreateServiceAccountMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Create service account
  */
 export const useCreateServiceAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccount>>,
@@ -229,7 +232,7 @@ export const deleteServiceAccount = ({
 
 export const getDeleteServiceAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteServiceAccount>>,
@@ -246,8 +249,8 @@ export const getDeleteServiceAccountMutationOptions = <
 	const mutationKey = ['deleteServiceAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -268,14 +271,15 @@ export type DeleteServiceAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deleteServiceAccount>>
 >;
 
-export type DeleteServiceAccountMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeleteServiceAccountMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Deletes a service account
  */
 export const useDeleteServiceAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteServiceAccount>>,
@@ -316,7 +320,7 @@ export const getGetServiceAccountQueryKey = ({
 
 export const getGetServiceAccountQueryOptions = <
 	TData = Awaited<ReturnType<typeof getServiceAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetServiceAccountPathParameters,
 	options?: {
@@ -359,7 +363,7 @@ export type GetServiceAccountQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetServiceAccount<
 	TData = Awaited<ReturnType<typeof getServiceAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetServiceAccountPathParameters,
 	options?: {
@@ -415,7 +419,7 @@ export const updateServiceAccount = (
 
 export const getUpdateServiceAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateServiceAccount>>,
@@ -438,8 +442,8 @@ export const getUpdateServiceAccountMutationOptions = <
 	const mutationKey = ['updateServiceAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -462,15 +466,17 @@ export const getUpdateServiceAccountMutationOptions = <
 export type UpdateServiceAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateServiceAccount>>
 >;
-export type UpdateServiceAccountMutationBody = BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
-export type UpdateServiceAccountMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateServiceAccountMutationBody =
+	BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
+export type UpdateServiceAccountMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Updates a service account
  */
 export const useUpdateServiceAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateServiceAccount>>,
@@ -517,7 +523,7 @@ export const getListServiceAccountKeysQueryKey = ({
 
 export const getListServiceAccountKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof listServiceAccountKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: ListServiceAccountKeysPathParameters,
 	options?: {
@@ -552,7 +558,8 @@ export const getListServiceAccountKeysQueryOptions = <
 export type ListServiceAccountKeysQueryResult = NonNullable<
 	Awaited<ReturnType<typeof listServiceAccountKeys>>
 >;
-export type ListServiceAccountKeysQueryError = ErrorType<RenderErrorResponseDTO>;
+export type ListServiceAccountKeysQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary List service account keys
@@ -560,7 +567,7 @@ export type ListServiceAccountKeysQueryError = ErrorType<RenderErrorResponseDTO>
 
 export function useListServiceAccountKeys<
 	TData = Awaited<ReturnType<typeof listServiceAccountKeys>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: ListServiceAccountKeysPathParameters,
 	options?: {
@@ -618,7 +625,7 @@ export const createServiceAccountKey = (
 
 export const getCreateServiceAccountKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccountKey>>,
@@ -641,8 +648,8 @@ export const getCreateServiceAccountKeyMutationOptions = <
 	const mutationKey = ['createServiceAccountKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -665,15 +672,17 @@ export const getCreateServiceAccountKeyMutationOptions = <
 export type CreateServiceAccountKeyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createServiceAccountKey>>
 >;
-export type CreateServiceAccountKeyMutationBody = BodyType<ServiceaccounttypesPostableFactorAPIKeyDTO>;
-export type CreateServiceAccountKeyMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateServiceAccountKeyMutationBody =
+	BodyType<ServiceaccounttypesPostableFactorAPIKeyDTO>;
+export type CreateServiceAccountKeyMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Create a service account key
  */
 export const useCreateServiceAccountKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccountKey>>,
@@ -713,7 +722,7 @@ export const revokeServiceAccountKey = ({
 
 export const getRevokeServiceAccountKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof revokeServiceAccountKey>>,
@@ -730,8 +739,8 @@ export const getRevokeServiceAccountKeyMutationOptions = <
 	const mutationKey = ['revokeServiceAccountKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -752,14 +761,15 @@ export type RevokeServiceAccountKeyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof revokeServiceAccountKey>>
 >;
 
-export type RevokeServiceAccountKeyMutationError = ErrorType<RenderErrorResponseDTO>;
+export type RevokeServiceAccountKeyMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Revoke a service account key
  */
 export const useRevokeServiceAccountKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof revokeServiceAccountKey>>,
@@ -795,7 +805,7 @@ export const updateServiceAccountKey = (
 
 export const getUpdateServiceAccountKeyMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateServiceAccountKey>>,
@@ -818,8 +828,8 @@ export const getUpdateServiceAccountKeyMutationOptions = <
 	const mutationKey = ['updateServiceAccountKey'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -842,15 +852,17 @@ export const getUpdateServiceAccountKeyMutationOptions = <
 export type UpdateServiceAccountKeyMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateServiceAccountKey>>
 >;
-export type UpdateServiceAccountKeyMutationBody = BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>;
-export type UpdateServiceAccountKeyMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateServiceAccountKeyMutationBody =
+	BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>;
+export type UpdateServiceAccountKeyMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Updates a service account key
  */
 export const useUpdateServiceAccountKey = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateServiceAccountKey>>,
@@ -897,7 +909,7 @@ export const getGetServiceAccountRolesQueryKey = ({
 
 export const getGetServiceAccountRolesQueryOptions = <
 	TData = Awaited<ReturnType<typeof getServiceAccountRoles>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetServiceAccountRolesPathParameters,
 	options?: {
@@ -932,7 +944,8 @@ export const getGetServiceAccountRolesQueryOptions = <
 export type GetServiceAccountRolesQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getServiceAccountRoles>>
 >;
-export type GetServiceAccountRolesQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetServiceAccountRolesQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Gets service account roles
@@ -940,7 +953,7 @@ export type GetServiceAccountRolesQueryError = ErrorType<RenderErrorResponseDTO>
 
 export function useGetServiceAccountRoles<
 	TData = Awaited<ReturnType<typeof getServiceAccountRoles>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetServiceAccountRolesPathParameters,
 	options?: {
@@ -998,7 +1011,7 @@ export const createServiceAccountRole = (
 
 export const getCreateServiceAccountRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccountRole>>,
@@ -1021,8 +1034,8 @@ export const getCreateServiceAccountRoleMutationOptions = <
 	const mutationKey = ['createServiceAccountRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1045,15 +1058,17 @@ export const getCreateServiceAccountRoleMutationOptions = <
 export type CreateServiceAccountRoleMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createServiceAccountRole>>
 >;
-export type CreateServiceAccountRoleMutationBody = BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
-export type CreateServiceAccountRoleMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateServiceAccountRoleMutationBody =
+	BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
+export type CreateServiceAccountRoleMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Create service account role
  */
 export const useCreateServiceAccountRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createServiceAccountRole>>,
@@ -1093,7 +1108,7 @@ export const deleteServiceAccountRole = ({
 
 export const getDeleteServiceAccountRoleMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
@@ -1110,8 +1125,8 @@ export const getDeleteServiceAccountRoleMutationOptions = <
 	const mutationKey = ['deleteServiceAccountRole'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1132,14 +1147,15 @@ export type DeleteServiceAccountRoleMutationResult = NonNullable<
 	Awaited<ReturnType<typeof deleteServiceAccountRole>>
 >;
 
-export type DeleteServiceAccountRoleMutationError = ErrorType<RenderErrorResponseDTO>;
+export type DeleteServiceAccountRoleMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Delete service account role
  */
 export const useDeleteServiceAccountRole = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
@@ -1175,7 +1191,7 @@ export const getGetMyServiceAccountQueryKey = () => {
 
 export const getGetMyServiceAccountQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMyServiceAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyServiceAccount>>,
@@ -1209,7 +1225,7 @@ export type GetMyServiceAccountQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetMyServiceAccount<
 	TData = Awaited<ReturnType<typeof getMyServiceAccount>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyServiceAccount>>,
@@ -1260,7 +1276,7 @@ export const updateMyServiceAccount = (
 
 export const getUpdateMyServiceAccountMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyServiceAccount>>,
@@ -1277,8 +1293,8 @@ export const getUpdateMyServiceAccountMutationOptions = <
 	const mutationKey = ['updateMyServiceAccount'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1298,15 +1314,17 @@ export const getUpdateMyServiceAccountMutationOptions = <
 export type UpdateMyServiceAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateMyServiceAccount>>
 >;
-export type UpdateMyServiceAccountMutationBody = BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
-export type UpdateMyServiceAccountMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateMyServiceAccountMutationBody =
+	BodyType<ServiceaccounttypesPostableServiceAccountDTO>;
+export type UpdateMyServiceAccountMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Updates my service account
  */
 export const useUpdateMyServiceAccount = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyServiceAccount>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	AuthtypesPostableEmailPasswordSessionDTO,
 	AuthtypesPostableRotateTokenDTO,
@@ -33,6 +31,9 @@ import type {
 	RotateSession200,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint creates a session for a user using google callback
  * @summary Create session by google callback
@@ -51,7 +52,7 @@ export const getCreateSessionByGoogleCallbackQueryKey = () => {
 
 export const getCreateSessionByGoogleCallbackQueryOptions = <
 	TData = Awaited<ReturnType<typeof createSessionByGoogleCallback>>,
-	TError = ErrorType<CreateSessionByGoogleCallback303 | RenderErrorResponseDTO>
+	TError = ErrorType<CreateSessionByGoogleCallback303 | RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof createSessionByGoogleCallback>>,
@@ -88,7 +89,7 @@ export type CreateSessionByGoogleCallbackQueryError = ErrorType<
 
 export function useCreateSessionByGoogleCallback<
 	TData = Awaited<ReturnType<typeof createSessionByGoogleCallback>>,
-	TError = ErrorType<CreateSessionByGoogleCallback303 | RenderErrorResponseDTO>
+	TError = ErrorType<CreateSessionByGoogleCallback303 | RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof createSessionByGoogleCallback>>,
@@ -140,7 +141,7 @@ export const getCreateSessionByOIDCCallbackQueryKey = () => {
 
 export const getCreateSessionByOIDCCallbackQueryOptions = <
 	TData = Awaited<ReturnType<typeof createSessionByOIDCCallback>>,
-	TError = ErrorType<CreateSessionByOIDCCallback303 | RenderErrorResponseDTO>
+	TError = ErrorType<CreateSessionByOIDCCallback303 | RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof createSessionByOIDCCallback>>,
@@ -177,7 +178,7 @@ export type CreateSessionByOIDCCallbackQueryError = ErrorType<
 
 export function useCreateSessionByOIDCCallback<
 	TData = Awaited<ReturnType<typeof createSessionByOIDCCallback>>,
-	TError = ErrorType<CreateSessionByOIDCCallback303 | RenderErrorResponseDTO>
+	TError = ErrorType<CreateSessionByOIDCCallback303 | RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof createSessionByOIDCCallback>>,
@@ -246,7 +247,7 @@ export const createSessionBySAMLCallback = (
 
 export const getCreateSessionBySAMLCallbackMutationOptions = <
 	TError = ErrorType<CreateSessionBySAMLCallback303 | RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createSessionBySAMLCallback>>,
@@ -269,8 +270,8 @@ export const getCreateSessionBySAMLCallbackMutationOptions = <
 	const mutationKey = ['createSessionBySAMLCallback'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -293,7 +294,8 @@ export const getCreateSessionBySAMLCallbackMutationOptions = <
 export type CreateSessionBySAMLCallbackMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createSessionBySAMLCallback>>
 >;
-export type CreateSessionBySAMLCallbackMutationBody = BodyType<CreateSessionBySAMLCallbackBody>;
+export type CreateSessionBySAMLCallbackMutationBody =
+	BodyType<CreateSessionBySAMLCallbackBody>;
 export type CreateSessionBySAMLCallbackMutationError = ErrorType<
 	CreateSessionBySAMLCallback303 | RenderErrorResponseDTO
 >;
@@ -303,7 +305,7 @@ export type CreateSessionBySAMLCallbackMutationError = ErrorType<
  */
 export const useCreateSessionBySAMLCallback = <
 	TError = ErrorType<CreateSessionBySAMLCallback303 | RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createSessionBySAMLCallback>>,
@@ -340,7 +342,7 @@ export const deleteSession = () => {
 
 export const getDeleteSessionMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteSession>>,
@@ -357,8 +359,8 @@ export const getDeleteSessionMutationOptions = <
 	const mutationKey = ['deleteSession'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -384,7 +386,7 @@ export type DeleteSessionMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useDeleteSession = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteSession>>,
@@ -420,7 +422,7 @@ export const getGetSessionContextQueryKey = () => {
 
 export const getGetSessionContextQueryOptions = <
 	TData = Awaited<ReturnType<typeof getSessionContext>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getSessionContext>>,
@@ -454,7 +456,7 @@ export type GetSessionContextQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetSessionContext<
 	TData = Awaited<ReturnType<typeof getSessionContext>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getSessionContext>>,
@@ -507,7 +509,7 @@ export const createSessionByEmailPassword = (
 
 export const getCreateSessionByEmailPasswordMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createSessionByEmailPassword>>,
@@ -524,8 +526,8 @@ export const getCreateSessionByEmailPasswordMutationOptions = <
 	const mutationKey = ['createSessionByEmailPassword'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -545,15 +547,17 @@ export const getCreateSessionByEmailPasswordMutationOptions = <
 export type CreateSessionByEmailPasswordMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createSessionByEmailPassword>>
 >;
-export type CreateSessionByEmailPasswordMutationBody = BodyType<AuthtypesPostableEmailPasswordSessionDTO>;
-export type CreateSessionByEmailPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateSessionByEmailPasswordMutationBody =
+	BodyType<AuthtypesPostableEmailPasswordSessionDTO>;
+export type CreateSessionByEmailPasswordMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Create session by email and password
  */
 export const useCreateSessionByEmailPassword = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createSessionByEmailPassword>>,
@@ -567,9 +571,8 @@ export const useCreateSessionByEmailPassword = <
 	{ data: BodyType<AuthtypesPostableEmailPasswordSessionDTO> },
 	TContext
 > => {
-	const mutationOptions = getCreateSessionByEmailPasswordMutationOptions(
-		options,
-	);
+	const mutationOptions =
+		getCreateSessionByEmailPasswordMutationOptions(options);
 
 	return useMutation(mutationOptions);
 };
@@ -592,7 +595,7 @@ export const rotateSession = (
 
 export const getRotateSessionMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof rotateSession>>,
@@ -609,8 +612,8 @@ export const getRotateSessionMutationOptions = <
 	const mutationKey = ['rotateSession'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -630,7 +633,8 @@ export const getRotateSessionMutationOptions = <
 export type RotateSessionMutationResult = NonNullable<
 	Awaited<ReturnType<typeof rotateSession>>
 >;
-export type RotateSessionMutationBody = BodyType<AuthtypesPostableRotateTokenDTO>;
+export type RotateSessionMutationBody =
+	BodyType<AuthtypesPostableRotateTokenDTO>;
 export type RotateSessionMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -638,7 +642,7 @@ export type RotateSessionMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useRotateSession = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof rotateSession>>,

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

@@ -1024,16 +1024,17 @@ export interface CloudintegrationtypesOldAWSCollectionStrategyDTO {
 	s3_buckets?: CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets;
 }
 
-export type CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
-	/**
-	 * @type string
-	 */
-	filter_pattern?: string;
-	/**
-	 * @type string
-	 */
-	log_group_name_prefix?: string;
-};
+export type CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem =
+	{
+		/**
+		 * @type string
+		 */
+		filter_pattern?: string;
+		/**
+		 * @type string
+		 */
+		log_group_name_prefix?: string;
+	};
 
 export interface CloudintegrationtypesOldAWSLogsStrategyDTO {
 	/**
@@ -1045,16 +1046,17 @@ export interface CloudintegrationtypesOldAWSLogsStrategyDTO {
 		| null;
 }
 
-export type CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
-	/**
-	 * @type array
-	 */
-	MetricNames?: string[];
-	/**
-	 * @type string
-	 */
-	Namespace?: string;
-};
+export type CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem =
+	{
+		/**
+		 * @type array
+		 */
+		MetricNames?: string[];
+		/**
+		 * @type string
+		 */
+		Namespace?: string;
+	};
 
 export interface CloudintegrationtypesOldAWSMetricsStrategyDTO {
 	/**
@@ -4774,7 +4776,7 @@ export interface RuletypesPostableRuleDTO {
 	 * @type string
 	 */
 	alert: string;
-	alertType?: RuletypesAlertTypeDTO;
+	alertType: RuletypesAlertTypeDTO;
 	/**
 	 * @type object
 	 */
@@ -4899,7 +4901,7 @@ export interface RuletypesRuleDTO {
 	 * @type string
 	 */
 	alert: string;
-	alertType?: RuletypesAlertTypeDTO;
+	alertType: RuletypesAlertTypeDTO;
 	/**
 	 * @type object
 	 */
@@ -4984,8 +4986,8 @@ export interface RuletypesRuleConditionDTO {
 	 */
 	algorithm?: string;
 	compositeQuery: RuletypesAlertCompositeQueryDTO;
-	matchType: RuletypesMatchTypeDTO;
-	op: RuletypesCompareOperatorDTO;
+	matchType?: RuletypesMatchTypeDTO;
+	op?: RuletypesCompareOperatorDTO;
 	/**
 	 * @type boolean
 	 */

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	CreateInvite201,
 	CreateResetPasswordToken201,
@@ -56,6 +54,9 @@ import type {
 	UpdateUserPathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint returns the reset password token by id
  * @deprecated
@@ -80,7 +81,7 @@ export const getGetResetPasswordTokenDeprecatedQueryKey = ({
 
 export const getGetResetPasswordTokenDeprecatedQueryOptions = <
 	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	options?: {
@@ -115,7 +116,8 @@ export const getGetResetPasswordTokenDeprecatedQueryOptions = <
 export type GetResetPasswordTokenDeprecatedQueryResult = NonNullable<
 	Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
 >;
-export type GetResetPasswordTokenDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetResetPasswordTokenDeprecatedQueryError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @deprecated
@@ -124,7 +126,7 @@ export type GetResetPasswordTokenDeprecatedQueryError = ErrorType<RenderErrorRes
 
 export function useGetResetPasswordTokenDeprecated<
 	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	options?: {
@@ -185,7 +187,7 @@ export const createInvite = (
 
 export const getCreateInviteMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createInvite>>,
@@ -202,8 +204,8 @@ export const getCreateInviteMutationOptions = <
 	const mutationKey = ['createInvite'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -231,7 +233,7 @@ export type CreateInviteMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useCreateInvite = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createInvite>>,
@@ -268,7 +270,7 @@ export const createBulkInvite = (
 
 export const getCreateBulkInviteMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createBulkInvite>>,
@@ -285,8 +287,8 @@ export const getCreateBulkInviteMutationOptions = <
 	const mutationKey = ['createBulkInvite'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -306,7 +308,8 @@ export const getCreateBulkInviteMutationOptions = <
 export type CreateBulkInviteMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createBulkInvite>>
 >;
-export type CreateBulkInviteMutationBody = BodyType<TypesPostableBulkInviteRequestDTO>;
+export type CreateBulkInviteMutationBody =
+	BodyType<TypesPostableBulkInviteRequestDTO>;
 export type CreateBulkInviteMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -314,7 +317,7 @@ export type CreateBulkInviteMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useCreateBulkInvite = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createBulkInvite>>,
@@ -351,7 +354,7 @@ export const resetPassword = (
 
 export const getResetPasswordMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof resetPassword>>,
@@ -368,8 +371,8 @@ export const getResetPasswordMutationOptions = <
 	const mutationKey = ['resetPassword'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -397,7 +400,7 @@ export type ResetPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useResetPassword = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof resetPassword>>,
@@ -433,7 +436,7 @@ export const getListUsersDeprecatedQueryKey = () => {
 
 export const getListUsersDeprecatedQueryOptions = <
 	TData = Awaited<ReturnType<typeof listUsersDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listUsersDeprecated>>,
@@ -467,7 +470,7 @@ export type ListUsersDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListUsersDeprecated<
 	TData = Awaited<ReturnType<typeof listUsersDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof listUsersDeprecated>>,
@@ -514,7 +517,7 @@ export const deleteUser = ({ id }: DeleteUserPathParameters) => {
 
 export const getDeleteUserMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteUser>>,
@@ -531,8 +534,8 @@ export const getDeleteUserMutationOptions = <
 	const mutationKey = ['deleteUser'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -560,7 +563,7 @@ export type DeleteUserMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useDeleteUser = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof deleteUser>>,
@@ -601,7 +604,7 @@ export const getGetUserDeprecatedQueryKey = ({
 
 export const getGetUserDeprecatedQueryOptions = <
 	TData = Awaited<ReturnType<typeof getUserDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUserDeprecatedPathParameters,
 	options?: {
@@ -644,7 +647,7 @@ export type GetUserDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetUserDeprecated<
 	TData = Awaited<ReturnType<typeof getUserDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUserDeprecatedPathParameters,
 	options?: {
@@ -700,7 +703,7 @@ export const updateUserDeprecated = (
 
 export const getUpdateUserDeprecatedMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUserDeprecated>>,
@@ -723,8 +726,8 @@ export const getUpdateUserDeprecatedMutationOptions = <
 	const mutationKey = ['updateUserDeprecated'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -748,14 +751,15 @@ export type UpdateUserDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateUserDeprecated>>
 >;
 export type UpdateUserDeprecatedMutationBody = BodyType<TypesDeprecatedUserDTO>;
-export type UpdateUserDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;
+export type UpdateUserDeprecatedMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Update user
  */
 export const useUpdateUserDeprecated = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUserDeprecated>>,
@@ -797,7 +801,7 @@ export const getGetMyUserDeprecatedQueryKey = () => {
 
 export const getGetMyUserDeprecatedQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMyUserDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyUserDeprecated>>,
@@ -831,7 +835,7 @@ export type GetMyUserDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetMyUserDeprecated<
 	TData = Awaited<ReturnType<typeof getMyUserDeprecated>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
 		Awaited<ReturnType<typeof getMyUserDeprecated>>,
@@ -884,7 +888,7 @@ export const forgotPassword = (
 
 export const getForgotPasswordMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof forgotPassword>>,
@@ -901,8 +905,8 @@ export const getForgotPasswordMutationOptions = <
 	const mutationKey = ['forgotPassword'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -922,7 +926,8 @@ export const getForgotPasswordMutationOptions = <
 export type ForgotPasswordMutationResult = NonNullable<
 	Awaited<ReturnType<typeof forgotPassword>>
 >;
-export type ForgotPasswordMutationBody = BodyType<TypesPostableForgotPasswordDTO>;
+export type ForgotPasswordMutationBody =
+	BodyType<TypesPostableForgotPasswordDTO>;
 export type ForgotPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -930,7 +935,7 @@ export type ForgotPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useForgotPassword = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof forgotPassword>>,
@@ -971,7 +976,7 @@ export const getGetUsersByRoleIDQueryKey = ({
 
 export const getGetUsersByRoleIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getUsersByRoleID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUsersByRoleIDPathParameters,
 	options?: {
@@ -1013,7 +1018,7 @@ export type GetUsersByRoleIDQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetUsersByRoleID<
 	TData = Awaited<ReturnType<typeof getUsersByRoleID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUsersByRoleIDPathParameters,
 	options?: {
@@ -1069,7 +1074,7 @@ export const getListUsersQueryKey = () => {
 
 export const getListUsersQueryOptions = <
 	TData = Awaited<ReturnType<typeof listUsers>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listUsers>>, TError, TData>;
 }) => {
@@ -1099,7 +1104,7 @@ export type ListUsersQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useListUsers<
 	TData = Awaited<ReturnType<typeof listUsers>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof listUsers>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -1150,7 +1155,7 @@ export const getGetUserQueryKey = ({ id }: GetUserPathParameters) => {
 
 export const getGetUserQueryOptions = <
 	TData = Awaited<ReturnType<typeof getUser>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUserPathParameters,
 	options?: {
@@ -1186,7 +1191,7 @@ export type GetUserQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetUser<
 	TData = Awaited<ReturnType<typeof getUser>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetUserPathParameters,
 	options?: {
@@ -1238,7 +1243,7 @@ export const updateUser = (
 
 export const getUpdateUserMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUser>>,
@@ -1261,8 +1266,8 @@ export const getUpdateUserMutationOptions = <
 	const mutationKey = ['updateUser'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1293,7 +1298,7 @@ export type UpdateUserMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useUpdateUser = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateUser>>,
@@ -1340,7 +1345,7 @@ export const getGetResetPasswordTokenQueryKey = ({
 
 export const getGetResetPasswordTokenQueryOptions = <
 	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetResetPasswordTokenPathParameters,
 	options?: {
@@ -1383,7 +1388,7 @@ export type GetResetPasswordTokenQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetResetPasswordToken<
 	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetResetPasswordTokenPathParameters,
 	options?: {
@@ -1436,7 +1441,7 @@ export const createResetPasswordToken = ({
 
 export const getCreateResetPasswordTokenMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createResetPasswordToken>>,
@@ -1453,8 +1458,8 @@ export const getCreateResetPasswordTokenMutationOptions = <
 	const mutationKey = ['createResetPasswordToken'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1475,14 +1480,15 @@ export type CreateResetPasswordTokenMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createResetPasswordToken>>
 >;
 
-export type CreateResetPasswordTokenMutationError = ErrorType<RenderErrorResponseDTO>;
+export type CreateResetPasswordTokenMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Create or regenerate reset password token for a user
  */
 export const useCreateResetPasswordToken = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createResetPasswordToken>>,
@@ -1523,7 +1529,7 @@ export const getGetRolesByUserIDQueryKey = ({
 
 export const getGetRolesByUserIDQueryOptions = <
 	TData = Awaited<ReturnType<typeof getRolesByUserID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRolesByUserIDPathParameters,
 	options?: {
@@ -1565,7 +1571,7 @@ export type GetRolesByUserIDQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetRolesByUserID<
 	TData = Awaited<ReturnType<typeof getRolesByUserID>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id }: GetRolesByUserIDPathParameters,
 	options?: {
@@ -1623,7 +1629,7 @@ export const setRoleByUserID = (
 
 export const getSetRoleByUserIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof setRoleByUserID>>,
@@ -1646,8 +1652,8 @@ export const getSetRoleByUserIDMutationOptions = <
 	const mutationKey = ['setRoleByUserID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1678,7 +1684,7 @@ export type SetRoleByUserIDMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useSetRoleByUserID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof setRoleByUserID>>,
@@ -1718,7 +1724,7 @@ export const removeUserRoleByUserIDAndRoleID = ({
 
 export const getRemoveUserRoleByUserIDAndRoleIDMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof removeUserRoleByUserIDAndRoleID>>,
@@ -1735,8 +1741,8 @@ export const getRemoveUserRoleByUserIDAndRoleIDMutationOptions = <
 	const mutationKey = ['removeUserRoleByUserIDAndRoleID'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1757,14 +1763,15 @@ export type RemoveUserRoleByUserIDAndRoleIDMutationResult = NonNullable<
 	Awaited<ReturnType<typeof removeUserRoleByUserIDAndRoleID>>
 >;
 
-export type RemoveUserRoleByUserIDAndRoleIDMutationError = ErrorType<RenderErrorResponseDTO>;
+export type RemoveUserRoleByUserIDAndRoleIDMutationError =
+	ErrorType<RenderErrorResponseDTO>;
 
 /**
  * @summary Remove a role from user
  */
 export const useRemoveUserRoleByUserIDAndRoleID = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof removeUserRoleByUserIDAndRoleID>>,
@@ -1778,9 +1785,8 @@ export const useRemoveUserRoleByUserIDAndRoleID = <
 	{ pathParams: RemoveUserRoleByUserIDAndRoleIDPathParameters },
 	TContext
 > => {
-	const mutationOptions = getRemoveUserRoleByUserIDAndRoleIDMutationOptions(
-		options,
-	);
+	const mutationOptions =
+		getRemoveUserRoleByUserIDAndRoleIDMutationOptions(options);
 
 	return useMutation(mutationOptions);
 };
@@ -1802,7 +1808,7 @@ export const getGetMyUserQueryKey = () => {
 
 export const getGetMyUserQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMyUser>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getMyUser>>, TError, TData>;
 }) => {
@@ -1832,7 +1838,7 @@ export type GetMyUserQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetMyUser<
 	TData = Awaited<ReturnType<typeof getMyUser>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getMyUser>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -1879,7 +1885,7 @@ export const updateMyUserV2 = (
 
 export const getUpdateMyUserV2MutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyUserV2>>,
@@ -1896,8 +1902,8 @@ export const getUpdateMyUserV2MutationOptions = <
 	const mutationKey = ['updateMyUserV2'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1925,7 +1931,7 @@ export type UpdateMyUserV2MutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useUpdateMyUserV2 = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyUserV2>>,
@@ -1960,7 +1966,7 @@ export const updateMyPassword = (
 
 export const getUpdateMyPasswordMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyPassword>>,
@@ -1977,8 +1983,8 @@ export const getUpdateMyPasswordMutationOptions = <
 	const mutationKey = ['updateMyPassword'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -1998,7 +2004,8 @@ export const getUpdateMyPasswordMutationOptions = <
 export type UpdateMyPasswordMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateMyPassword>>
 >;
-export type UpdateMyPasswordMutationBody = BodyType<TypesChangePasswordRequestDTO>;
+export type UpdateMyPasswordMutationBody =
+	BodyType<TypesChangePasswordRequestDTO>;
 export type UpdateMyPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -2006,7 +2013,7 @@ export type UpdateMyPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const useUpdateMyPassword = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof updateMyPassword>>,

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,10 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
 	GetHosts200,
 	RenderErrorResponseDTO,
@@ -26,6 +24,9 @@ import type {
 	ZeustypesPostableProfileDTO,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
 /**
  * This endpoint gets the host info from zeus.
  * @summary Get host info from Zeus.
@@ -44,7 +45,7 @@ export const getGetHostsQueryKey = () => {
 
 export const getGetHostsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getHosts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getHosts>>, TError, TData>;
 }) => {
@@ -74,7 +75,7 @@ export type GetHostsQueryError = ErrorType<RenderErrorResponseDTO>;
 
 export function useGetHosts<
 	TData = Awaited<ReturnType<typeof getHosts>>,
-	TError = ErrorType<RenderErrorResponseDTO>
+	TError = ErrorType<RenderErrorResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<Awaited<ReturnType<typeof getHosts>>, TError, TData>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
@@ -121,7 +122,7 @@ export const putHost = (
 
 export const getPutHostMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof putHost>>,
@@ -138,8 +139,8 @@ export const getPutHostMutationOptions = <
 	const mutationKey = ['putHost'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -167,7 +168,7 @@ export type PutHostMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const usePutHost = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof putHost>>,
@@ -202,7 +203,7 @@ export const putProfile = (
 
 export const getPutProfileMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof putProfile>>,
@@ -219,8 +220,8 @@ export const getPutProfileMutationOptions = <
 	const mutationKey = ['putProfile'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
 			? options
 			: { ...options, mutation: { ...options.mutation, mutationKey } }
 		: { mutation: { mutationKey } };
@@ -248,7 +249,7 @@ export type PutProfileMutationError = ErrorType<RenderErrorResponseDTO>;
  */
 export const usePutProfile = <
 	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
+	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof putProfile>>,

frontend/src/assets/Logos/grafana.svg

@@ -1,70 +1,70 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 142.5 145.6" style="enable-background:new 0 0 142.5 145.6;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#565656;}
-	.st1{fill:url(#SVGID_1_);}
-</style>
-<g>
-	<path class="st0" d="M28.7,131.5c-0.3,7.9-6.6,14.1-14.4,14.1C6.1,145.6,0,139,0,130.9s6.6-14.7,14.7-14.7c3.6,0,7.2,1.6,10.2,4.4
-		l-2.3,2.9c-2.3-2-5.1-3.4-7.9-3.4c-5.9,0-10.8,4.8-10.8,10.8c0,6.1,4.6,10.8,10.4,10.8c5.2,0,9.3-3.8,10.2-8.8H12.6v-3.5h16.1
-		V131.5z"/>
-	<path class="st0" d="M42.3,129.5h-2.2c-2.4,0-4.4,2-4.4,4.4v11.4h-3.9v-19.6H35v1.6c1.1-1.1,2.7-1.6,4.6-1.6h4.2L42.3,129.5z"/>
-	<path class="st0" d="M63.7,145.3h-3.4v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
-		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4V145.3z M59.7,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
-		C57.1,141.2,59.1,139.3,59.7,137z"/>
-	<path class="st0" d="M71.5,124.7v1.1h6.2v3.4h-6.2v16.1h-3.8v-20.5c0-4.3,3.1-6.8,7-6.8h4.7l-1.6,3.7h-3.1
-		C72.9,121.6,71.5,123,71.5,124.7z"/>
-	<path class="st0" d="M98.5,145.3h-3.3v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
-		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4v19.6H98.5z M94.5,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
-		C92,141.2,93.9,139.3,94.5,137z"/>
-	<path class="st0" d="M119.4,133.8v11.5h-3.9v-11.6c0-2.4-2-4.4-4.4-4.4c-2.5,0-4.4,2-4.4,4.4v11.6h-3.9v-19.6h3.2v1.7
-		c1.4-1.3,3.3-2,5.2-2C115.8,125.5,119.4,129.2,119.4,133.8z"/>
-	<path class="st0" d="M142.4,145.3h-3.3v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
-		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4v19.6H142.4z M138.4,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
-		C135.9,141.2,137.8,139.3,138.4,137z"/>
-</g>
-<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="71.25" y1="10.4893" x2="71.25" y2="113.3415" gradientTransform="matrix(1 0 0 -1 0 148.6)">
-	<stop  offset="0" style="stop-color:#FCEE1F"/>
-	<stop  offset="1" style="stop-color:#F15B2A"/>
-</linearGradient>
-<path class="st1" d="M122.9,49.9c-0.2-1.9-0.5-4.1-1.1-6.5c-0.6-2.4-1.6-5-2.9-7.8c-1.4-2.7-3.1-5.6-5.4-8.3
-	c-0.9-1.1-1.9-2.1-2.9-3.2c1.6-6.3-1.9-11.8-1.9-11.8c-6.1-0.4-9.9,1.9-11.3,2.9c-0.2-0.1-0.5-0.2-0.7-0.3c-1-0.4-2.1-0.8-3.2-1.2
-	c-1.1-0.3-2.2-0.7-3.3-0.9c-1.1-0.3-2.3-0.5-3.5-0.7c-0.2,0-0.4-0.1-0.6-0.1C83.5,3.6,75.9,0,75.9,0c-8.7,5.6-10.4,13.1-10.4,13.1
-	s0,0.2-0.1,0.4c-0.5,0.1-0.9,0.3-1.4,0.4c-0.6,0.2-1.3,0.4-1.9,0.7c-0.6,0.3-1.3,0.5-1.9,0.8c-1.3,0.6-2.5,1.2-3.8,1.9
-	c-1.2,0.7-2.4,1.4-3.5,2.2c-0.2-0.1-0.3-0.2-0.3-0.2c-11.7-4.5-22.1,0.9-22.1,0.9c-0.9,12.5,4.7,20.3,5.8,21.7
-	c-0.3,0.8-0.5,1.5-0.8,2.3c-0.9,2.8-1.5,5.7-1.9,8.7c-0.1,0.4-0.1,0.9-0.2,1.3c-10.8,5.3-14,16.3-14,16.3c9,10.4,19.6,11,19.6,11
-	l0,0c1.3,2.4,2.9,4.7,4.6,6.8c0.7,0.9,1.5,1.7,2.3,2.6c-3.3,9.4,0.5,17.3,0.5,17.3c10.1,0.4,16.7-4.4,18.1-5.5c1,0.3,2,0.6,3,0.9
-	c3.1,0.8,6.3,1.3,9.4,1.4c0.8,0,1.6,0,2.4,0h0.4H80h0.5H81l0,0c4.7,6.8,13.1,7.7,13.1,7.7c5.9-6.3,6.3-12.4,6.3-13.8l0,0
-	c0,0,0,0,0-0.1s0-0.2,0-0.2l0,0c0-0.1,0-0.2,0-0.3c1.2-0.9,2.4-1.8,3.6-2.8c2.4-2.1,4.4-4.6,6.2-7.2c0.2-0.2,0.3-0.5,0.5-0.7
-	c6.7,0.4,11.4-4.2,11.4-4.2c-1.1-7-5.1-10.4-5.9-11l0,0c0,0,0,0-0.1-0.1l-0.1-0.1l0,0l-0.1-0.1c0-0.4,0.1-0.8,0.1-1.3
-	c0.1-0.8,0.1-1.5,0.1-2.3v-0.6v-0.3v-0.1c0-0.2,0-0.1,0-0.2v-0.5v-0.6c0-0.2,0-0.4,0-0.6s0-0.4-0.1-0.6l-0.1-0.6l-0.1-0.6
-	c-0.1-0.8-0.3-1.5-0.4-2.3c-0.7-3-1.9-5.9-3.4-8.4c-1.6-2.6-3.5-4.8-5.7-6.8c-2.2-1.9-4.6-3.5-7.2-4.6c-2.6-1.2-5.2-1.9-7.9-2.2
-	c-1.3-0.2-2.7-0.2-4-0.2h-0.5h-0.1h-0.2h-0.2h-0.5c-0.2,0-0.4,0-0.5,0c-0.7,0.1-1.4,0.2-2,0.3c-2.7,0.5-5.2,1.5-7.4,2.8
-	c-2.2,1.3-4.1,3-5.7,4.9s-2.8,3.9-3.6,6.1c-0.8,2.1-1.3,4.4-1.4,6.5c0,0.5,0,1.1,0,1.6c0,0.1,0,0.3,0,0.4v0.4c0,0.3,0,0.5,0.1,0.8
-	c0.1,1.1,0.3,2.1,0.6,3.1c0.6,2,1.5,3.8,2.7,5.4s2.5,2.8,4,3.8s3,1.7,4.6,2.2c1.6,0.5,3.1,0.7,4.5,0.6c0.2,0,0.4,0,0.5,0
-	c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0c0.2,0,0.3,0,0.5,0h0.1h0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4-0.1,0.5-0.1c0.2,0,0.3-0.1,0.5-0.1
-	c0.3-0.1,0.7-0.2,1-0.3c0.6-0.2,1.2-0.5,1.8-0.7c0.6-0.3,1.1-0.6,1.5-0.9c0.1-0.1,0.3-0.2,0.4-0.3c0.5-0.4,0.6-1.1,0.2-1.6
-	c-0.4-0.4-1-0.5-1.5-0.3C88,74,87.9,74,87.7,74.1c-0.4,0.2-0.9,0.4-1.3,0.5c-0.5,0.1-1,0.3-1.5,0.4c-0.3,0-0.5,0.1-0.8,0.1
-	c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3,0-0.4,0s-0.3,0-0.4,0c-0.2,0-0.3,0-0.5,0c0,0-0.1,0,0,0h-0.1h-0.1c-0.1,0-0.1,0-0.2,0
-	s-0.3,0-0.4-0.1c-1.1-0.2-2.3-0.5-3.4-1c-1.1-0.5-2.2-1.2-3.1-2.1c-1-0.9-1.8-1.9-2.5-3.1c-0.7-1.2-1.1-2.5-1.3-3.8
-	c-0.1-0.7-0.2-1.4-0.1-2.1c0-0.2,0-0.4,0-0.6c0,0.1,0,0,0,0v-0.1v-0.1c0-0.1,0-0.2,0-0.3c0-0.4,0.1-0.7,0.2-1.1c0.5-3,2-5.9,4.3-8.1
-	c0.6-0.6,1.2-1.1,1.9-1.5c0.7-0.5,1.4-0.9,2.1-1.2c0.7-0.3,1.5-0.6,2.3-0.8s1.6-0.4,2.4-0.4c0.4,0,0.8-0.1,1.2-0.1
-	c0.1,0,0.2,0,0.3,0h0.3h0.2c0.1,0,0,0,0,0h0.1h0.3c0.9,0.1,1.8,0.2,2.6,0.4c1.7,0.4,3.4,1,5,1.9c3.2,1.8,5.9,4.5,7.5,7.8
-	c0.8,1.6,1.4,3.4,1.7,5.3c0.1,0.5,0.1,0.9,0.2,1.4v0.3V66c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3v0.3v0.3c0,0.2,0,0.6,0,0.8
-	c0,0.5-0.1,1-0.1,1.5c-0.1,0.5-0.1,1-0.2,1.5s-0.2,1-0.3,1.5c-0.2,1-0.6,1.9-0.9,2.9c-0.7,1.9-1.7,3.7-2.9,5.3
-	c-2.4,3.3-5.7,6-9.4,7.7c-1.9,0.8-3.8,1.5-5.8,1.8c-1,0.2-2,0.3-3,0.3H81h-0.2h-0.3H80h-0.3c0.1,0,0,0,0,0h-0.1
-	c-0.5,0-1.1,0-1.6-0.1c-2.2-0.2-4.3-0.6-6.4-1.2c-2.1-0.6-4.1-1.4-6-2.4c-3.8-2-7.2-4.9-9.9-8.2c-1.3-1.7-2.5-3.5-3.5-5.4
-	s-1.7-3.9-2.3-5.9c-0.6-2-0.9-4.1-1-6.2v-0.4v-0.1v-0.1v-0.2V60v-0.1v-0.1v-0.2v-0.5V59l0,0v-0.2c0-0.3,0-0.5,0-0.8
-	c0-1,0.1-2.1,0.3-3.2c0.1-1.1,0.3-2.1,0.5-3.2c0.2-1.1,0.5-2.1,0.8-3.2c0.6-2.1,1.3-4.1,2.2-6c1.8-3.8,4.1-7.2,6.8-9.9
-	c0.7-0.7,1.4-1.3,2.2-1.9c0.3-0.3,1-0.9,1.8-1.4c0.8-0.5,1.6-1,2.5-1.4c0.4-0.2,0.8-0.4,1.3-0.6c0.2-0.1,0.4-0.2,0.7-0.3
-	c0.2-0.1,0.4-0.2,0.7-0.3c0.9-0.4,1.8-0.7,2.7-1c0.2-0.1,0.5-0.1,0.7-0.2c0.2-0.1,0.5-0.1,0.7-0.2c0.5-0.1,0.9-0.2,1.4-0.4
-	c0.2-0.1,0.5-0.1,0.7-0.2c0.2,0,0.5-0.1,0.7-0.1c0.2,0,0.5-0.1,0.7-0.1l0.4-0.1l0.4-0.1c0.2,0,0.5-0.1,0.7-0.1
-	c0.3,0,0.5-0.1,0.8-0.1c0.2,0,0.6-0.1,0.8-0.1c0.2,0,0.3,0,0.5-0.1h0.3h0.2h0.2c0.3,0,0.5,0,0.8-0.1h0.4c0,0,0.1,0,0,0h0.1h0.2
-	c0.2,0,0.5,0,0.7,0c0.9,0,1.8,0,2.7,0c1.8,0.1,3.6,0.3,5.3,0.6c3.4,0.6,6.7,1.7,9.6,3.2c2.9,1.4,5.6,3.2,7.8,5.1
-	c0.1,0.1,0.3,0.2,0.4,0.4c0.1,0.1,0.3,0.2,0.4,0.4c0.3,0.2,0.5,0.5,0.8,0.7c0.3,0.2,0.5,0.5,0.8,0.7c0.2,0.3,0.5,0.5,0.7,0.8
-	c1,1,1.9,2.1,2.7,3.1c1.6,2.1,2.9,4.2,3.9,6.2c0.1,0.1,0.1,0.2,0.2,0.4c0.1,0.1,0.1,0.2,0.2,0.4s0.2,0.5,0.4,0.7
-	c0.1,0.2,0.2,0.5,0.3,0.7c0.1,0.2,0.2,0.5,0.3,0.7c0.4,0.9,0.7,1.8,1,2.7c0.5,1.4,0.8,2.6,1.1,3.6c0.1,0.4,0.5,0.7,0.9,0.7
-	c0.5,0,0.8-0.4,0.8-0.9C123,52.7,123,51.4,122.9,49.9z"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 142.5 145.6" style="enable-background:new 0 0 142.5 145.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#565656;}
+	.st1{fill:url(#SVGID_1_);}
+</style>
+<g>
+	<path class="st0" d="M28.7,131.5c-0.3,7.9-6.6,14.1-14.4,14.1C6.1,145.6,0,139,0,130.9s6.6-14.7,14.7-14.7c3.6,0,7.2,1.6,10.2,4.4
+		l-2.3,2.9c-2.3-2-5.1-3.4-7.9-3.4c-5.9,0-10.8,4.8-10.8,10.8c0,6.1,4.6,10.8,10.4,10.8c5.2,0,9.3-3.8,10.2-8.8H12.6v-3.5h16.1
+		V131.5z"/>
+	<path class="st0" d="M42.3,129.5h-2.2c-2.4,0-4.4,2-4.4,4.4v11.4h-3.9v-19.6H35v1.6c1.1-1.1,2.7-1.6,4.6-1.6h4.2L42.3,129.5z"/>
+	<path class="st0" d="M63.7,145.3h-3.4v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
+		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4V145.3z M59.7,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
+		C57.1,141.2,59.1,139.3,59.7,137z"/>
+	<path class="st0" d="M71.5,124.7v1.1h6.2v3.4h-6.2v16.1h-3.8v-20.5c0-4.3,3.1-6.8,7-6.8h4.7l-1.6,3.7h-3.1
+		C72.9,121.6,71.5,123,71.5,124.7z"/>
+	<path class="st0" d="M98.5,145.3h-3.3v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
+		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4v19.6H98.5z M94.5,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
+		C92,141.2,93.9,139.3,94.5,137z"/>
+	<path class="st0" d="M119.4,133.8v11.5h-3.9v-11.6c0-2.4-2-4.4-4.4-4.4c-2.5,0-4.4,2-4.4,4.4v11.6h-3.9v-19.6h3.2v1.7
+		c1.4-1.3,3.3-2,5.2-2C115.8,125.5,119.4,129.2,119.4,133.8z"/>
+	<path class="st0" d="M142.4,145.3h-3.3v-2.5c-2.6,2.5-6.6,3.7-10.7,1.9c-3-1.3-5.3-4.1-5.9-7.4c-1.2-6.3,3.7-11.9,9.9-11.9
+		c2.6,0,5,1.1,6.7,2.8v-2.5h3.4v19.6H142.4z M138.4,137c0.9-4-2.1-7.6-6-7.6c-3.4,0-6.1,2.8-6.1,6.1c0,3.8,3.3,6.7,7.2,6.1
+		C135.9,141.2,137.8,139.3,138.4,137z"/>
+</g>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="71.25" y1="10.4893" x2="71.25" y2="113.3415" gradientTransform="matrix(1 0 0 -1 0 148.6)">
+	<stop  offset="0" style="stop-color:#FCEE1F"/>
+	<stop  offset="1" style="stop-color:#F15B2A"/>
+</linearGradient>
+<path class="st1" d="M122.9,49.9c-0.2-1.9-0.5-4.1-1.1-6.5c-0.6-2.4-1.6-5-2.9-7.8c-1.4-2.7-3.1-5.6-5.4-8.3
+	c-0.9-1.1-1.9-2.1-2.9-3.2c1.6-6.3-1.9-11.8-1.9-11.8c-6.1-0.4-9.9,1.9-11.3,2.9c-0.2-0.1-0.5-0.2-0.7-0.3c-1-0.4-2.1-0.8-3.2-1.2
+	c-1.1-0.3-2.2-0.7-3.3-0.9c-1.1-0.3-2.3-0.5-3.5-0.7c-0.2,0-0.4-0.1-0.6-0.1C83.5,3.6,75.9,0,75.9,0c-8.7,5.6-10.4,13.1-10.4,13.1
+	s0,0.2-0.1,0.4c-0.5,0.1-0.9,0.3-1.4,0.4c-0.6,0.2-1.3,0.4-1.9,0.7c-0.6,0.3-1.3,0.5-1.9,0.8c-1.3,0.6-2.5,1.2-3.8,1.9
+	c-1.2,0.7-2.4,1.4-3.5,2.2c-0.2-0.1-0.3-0.2-0.3-0.2c-11.7-4.5-22.1,0.9-22.1,0.9c-0.9,12.5,4.7,20.3,5.8,21.7
+	c-0.3,0.8-0.5,1.5-0.8,2.3c-0.9,2.8-1.5,5.7-1.9,8.7c-0.1,0.4-0.1,0.9-0.2,1.3c-10.8,5.3-14,16.3-14,16.3c9,10.4,19.6,11,19.6,11
+	l0,0c1.3,2.4,2.9,4.7,4.6,6.8c0.7,0.9,1.5,1.7,2.3,2.6c-3.3,9.4,0.5,17.3,0.5,17.3c10.1,0.4,16.7-4.4,18.1-5.5c1,0.3,2,0.6,3,0.9
+	c3.1,0.8,6.3,1.3,9.4,1.4c0.8,0,1.6,0,2.4,0h0.4H80h0.5H81l0,0c4.7,6.8,13.1,7.7,13.1,7.7c5.9-6.3,6.3-12.4,6.3-13.8l0,0
+	c0,0,0,0,0-0.1s0-0.2,0-0.2l0,0c0-0.1,0-0.2,0-0.3c1.2-0.9,2.4-1.8,3.6-2.8c2.4-2.1,4.4-4.6,6.2-7.2c0.2-0.2,0.3-0.5,0.5-0.7
+	c6.7,0.4,11.4-4.2,11.4-4.2c-1.1-7-5.1-10.4-5.9-11l0,0c0,0,0,0-0.1-0.1l-0.1-0.1l0,0l-0.1-0.1c0-0.4,0.1-0.8,0.1-1.3
+	c0.1-0.8,0.1-1.5,0.1-2.3v-0.6v-0.3v-0.1c0-0.2,0-0.1,0-0.2v-0.5v-0.6c0-0.2,0-0.4,0-0.6s0-0.4-0.1-0.6l-0.1-0.6l-0.1-0.6
+	c-0.1-0.8-0.3-1.5-0.4-2.3c-0.7-3-1.9-5.9-3.4-8.4c-1.6-2.6-3.5-4.8-5.7-6.8c-2.2-1.9-4.6-3.5-7.2-4.6c-2.6-1.2-5.2-1.9-7.9-2.2
+	c-1.3-0.2-2.7-0.2-4-0.2h-0.5h-0.1h-0.2h-0.2h-0.5c-0.2,0-0.4,0-0.5,0c-0.7,0.1-1.4,0.2-2,0.3c-2.7,0.5-5.2,1.5-7.4,2.8
+	c-2.2,1.3-4.1,3-5.7,4.9s-2.8,3.9-3.6,6.1c-0.8,2.1-1.3,4.4-1.4,6.5c0,0.5,0,1.1,0,1.6c0,0.1,0,0.3,0,0.4v0.4c0,0.3,0,0.5,0.1,0.8
+	c0.1,1.1,0.3,2.1,0.6,3.1c0.6,2,1.5,3.8,2.7,5.4s2.5,2.8,4,3.8s3,1.7,4.6,2.2c1.6,0.5,3.1,0.7,4.5,0.6c0.2,0,0.4,0,0.5,0
+	c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0c0.2,0,0.3,0,0.5,0h0.1h0.1c0.1,0,0.2,0,0.3,0c0.2,0,0.4-0.1,0.5-0.1c0.2,0,0.3-0.1,0.5-0.1
+	c0.3-0.1,0.7-0.2,1-0.3c0.6-0.2,1.2-0.5,1.8-0.7c0.6-0.3,1.1-0.6,1.5-0.9c0.1-0.1,0.3-0.2,0.4-0.3c0.5-0.4,0.6-1.1,0.2-1.6
+	c-0.4-0.4-1-0.5-1.5-0.3C88,74,87.9,74,87.7,74.1c-0.4,0.2-0.9,0.4-1.3,0.5c-0.5,0.1-1,0.3-1.5,0.4c-0.3,0-0.5,0.1-0.8,0.1
+	c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3,0-0.4,0s-0.3,0-0.4,0c-0.2,0-0.3,0-0.5,0c0,0-0.1,0,0,0h-0.1h-0.1c-0.1,0-0.1,0-0.2,0
+	s-0.3,0-0.4-0.1c-1.1-0.2-2.3-0.5-3.4-1c-1.1-0.5-2.2-1.2-3.1-2.1c-1-0.9-1.8-1.9-2.5-3.1c-0.7-1.2-1.1-2.5-1.3-3.8
+	c-0.1-0.7-0.2-1.4-0.1-2.1c0-0.2,0-0.4,0-0.6c0,0.1,0,0,0,0v-0.1v-0.1c0-0.1,0-0.2,0-0.3c0-0.4,0.1-0.7,0.2-1.1c0.5-3,2-5.9,4.3-8.1
+	c0.6-0.6,1.2-1.1,1.9-1.5c0.7-0.5,1.4-0.9,2.1-1.2c0.7-0.3,1.5-0.6,2.3-0.8s1.6-0.4,2.4-0.4c0.4,0,0.8-0.1,1.2-0.1
+	c0.1,0,0.2,0,0.3,0h0.3h0.2c0.1,0,0,0,0,0h0.1h0.3c0.9,0.1,1.8,0.2,2.6,0.4c1.7,0.4,3.4,1,5,1.9c3.2,1.8,5.9,4.5,7.5,7.8
+	c0.8,1.6,1.4,3.4,1.7,5.3c0.1,0.5,0.1,0.9,0.2,1.4v0.3V66c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3v0.3v0.3c0,0.2,0,0.6,0,0.8
+	c0,0.5-0.1,1-0.1,1.5c-0.1,0.5-0.1,1-0.2,1.5s-0.2,1-0.3,1.5c-0.2,1-0.6,1.9-0.9,2.9c-0.7,1.9-1.7,3.7-2.9,5.3
+	c-2.4,3.3-5.7,6-9.4,7.7c-1.9,0.8-3.8,1.5-5.8,1.8c-1,0.2-2,0.3-3,0.3H81h-0.2h-0.3H80h-0.3c0.1,0,0,0,0,0h-0.1
+	c-0.5,0-1.1,0-1.6-0.1c-2.2-0.2-4.3-0.6-6.4-1.2c-2.1-0.6-4.1-1.4-6-2.4c-3.8-2-7.2-4.9-9.9-8.2c-1.3-1.7-2.5-3.5-3.5-5.4
+	s-1.7-3.9-2.3-5.9c-0.6-2-0.9-4.1-1-6.2v-0.4v-0.1v-0.1v-0.2V60v-0.1v-0.1v-0.2v-0.5V59l0,0v-0.2c0-0.3,0-0.5,0-0.8
+	c0-1,0.1-2.1,0.3-3.2c0.1-1.1,0.3-2.1,0.5-3.2c0.2-1.1,0.5-2.1,0.8-3.2c0.6-2.1,1.3-4.1,2.2-6c1.8-3.8,4.1-7.2,6.8-9.9
+	c0.7-0.7,1.4-1.3,2.2-1.9c0.3-0.3,1-0.9,1.8-1.4c0.8-0.5,1.6-1,2.5-1.4c0.4-0.2,0.8-0.4,1.3-0.6c0.2-0.1,0.4-0.2,0.7-0.3
+	c0.2-0.1,0.4-0.2,0.7-0.3c0.9-0.4,1.8-0.7,2.7-1c0.2-0.1,0.5-0.1,0.7-0.2c0.2-0.1,0.5-0.1,0.7-0.2c0.5-0.1,0.9-0.2,1.4-0.4
+	c0.2-0.1,0.5-0.1,0.7-0.2c0.2,0,0.5-0.1,0.7-0.1c0.2,0,0.5-0.1,0.7-0.1l0.4-0.1l0.4-0.1c0.2,0,0.5-0.1,0.7-0.1
+	c0.3,0,0.5-0.1,0.8-0.1c0.2,0,0.6-0.1,0.8-0.1c0.2,0,0.3,0,0.5-0.1h0.3h0.2h0.2c0.3,0,0.5,0,0.8-0.1h0.4c0,0,0.1,0,0,0h0.1h0.2
+	c0.2,0,0.5,0,0.7,0c0.9,0,1.8,0,2.7,0c1.8,0.1,3.6,0.3,5.3,0.6c3.4,0.6,6.7,1.7,9.6,3.2c2.9,1.4,5.6,3.2,7.8,5.1
+	c0.1,0.1,0.3,0.2,0.4,0.4c0.1,0.1,0.3,0.2,0.4,0.4c0.3,0.2,0.5,0.5,0.8,0.7c0.3,0.2,0.5,0.5,0.8,0.7c0.2,0.3,0.5,0.5,0.7,0.8
+	c1,1,1.9,2.1,2.7,3.1c1.6,2.1,2.9,4.2,3.9,6.2c0.1,0.1,0.1,0.2,0.2,0.4c0.1,0.1,0.1,0.2,0.2,0.4s0.2,0.5,0.4,0.7
+	c0.1,0.2,0.2,0.5,0.3,0.7c0.1,0.2,0.2,0.5,0.3,0.7c0.4,0.9,0.7,1.8,1,2.7c0.5,1.4,0.8,2.6,1.1,3.6c0.1,0.4,0.5,0.7,0.9,0.7
+	c0.5,0,0.8-0.4,0.8-0.9C123,52.7,123,51.4,122.9,49.9z"/>
+</svg>

frontend/src/assets/Logos/quickstart.svg

@@ -1,21 +1,21 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 512 512" xml:space="preserve">
-<polygon style="fill:#FFD500;" points="382.395,228.568 291.215,228.568 330.762,10.199 129.603,283.43 220.785,283.43 
-	181.238,501.799 "/>
-<g>
-	<path style="fill:#3D3D3D;" d="M181.234,512c-1.355,0-2.726-0.271-4.033-0.833c-4.357-1.878-6.845-6.514-5.999-11.184
-		l37.371-206.353h-78.969c-3.846,0-7.367-2.164-9.103-5.597c-1.735-3.433-1.391-7.55,0.889-10.648L322.548,4.153
-		c2.814-3.822,7.891-5.196,12.25-3.32c4.357,1.878,6.845,6.514,5.999,11.184L303.427,218.37h78.969c3.846,0,7.367,2.164,9.103,5.597
-		c1.735,3.433,1.391,7.55-0.889,10.648L189.451,507.846C187.481,510.523,184.399,512,181.234,512z M149.777,273.231h71.007
-		c3.023,0,5.89,1.341,7.828,3.662c1.938,2.32,2.747,5.38,2.208,8.355l-31.704,175.065l163.105-221.545h-71.007
-		c-3.023,0-5.89-1.341-7.828-3.661c-1.938-2.32-2.747-5.38-2.208-8.355l31.704-175.065L149.777,273.231z"/>
-	<path style="fill:#3D3D3D;" d="M267.666,171.348c-0.604,0-1.215-0.054-1.829-0.165c-5.543-1.004-9.223-6.31-8.22-11.853l0.923-5.1
-		c1.003-5.543,6.323-9.225,11.852-8.219c5.543,1.004,9.223,6.31,8.22,11.853l-0.923,5.1
-		C276.797,167.892,272.503,171.348,267.666,171.348z"/>
-	<path style="fill:#3D3D3D;" d="M255.455,238.77c-0.604,0-1.215-0.054-1.83-0.165c-5.543-1.004-9.222-6.31-8.218-11.853
-		l7.037-38.864c1.004-5.543,6.317-9.225,11.854-8.219c5.543,1.004,9.222,6.31,8.219,11.853l-7.037,38.864
-		C264.587,235.314,260.293,238.77,255.455,238.77z"/>
-</g>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<polygon style="fill:#FFD500;" points="382.395,228.568 291.215,228.568 330.762,10.199 129.603,283.43 220.785,283.43 
+	181.238,501.799 "/>
+<g>
+	<path style="fill:#3D3D3D;" d="M181.234,512c-1.355,0-2.726-0.271-4.033-0.833c-4.357-1.878-6.845-6.514-5.999-11.184
+		l37.371-206.353h-78.969c-3.846,0-7.367-2.164-9.103-5.597c-1.735-3.433-1.391-7.55,0.889-10.648L322.548,4.153
+		c2.814-3.822,7.891-5.196,12.25-3.32c4.357,1.878,6.845,6.514,5.999,11.184L303.427,218.37h78.969c3.846,0,7.367,2.164,9.103,5.597
+		c1.735,3.433,1.391,7.55-0.889,10.648L189.451,507.846C187.481,510.523,184.399,512,181.234,512z M149.777,273.231h71.007
+		c3.023,0,5.89,1.341,7.828,3.662c1.938,2.32,2.747,5.38,2.208,8.355l-31.704,175.065l163.105-221.545h-71.007
+		c-3.023,0-5.89-1.341-7.828-3.661c-1.938-2.32-2.747-5.38-2.208-8.355l31.704-175.065L149.777,273.231z"/>
+	<path style="fill:#3D3D3D;" d="M267.666,171.348c-0.604,0-1.215-0.054-1.829-0.165c-5.543-1.004-9.223-6.31-8.22-11.853l0.923-5.1
+		c1.003-5.543,6.323-9.225,11.852-8.219c5.543,1.004,9.223,6.31,8.22,11.853l-0.923,5.1
+		C276.797,167.892,272.503,171.348,267.666,171.348z"/>
+	<path style="fill:#3D3D3D;" d="M255.455,238.77c-0.604,0-1.215-0.054-1.83-0.165c-5.543-1.004-9.222-6.31-8.218-11.853
+		l7.037-38.864c1.004-5.543,6.317-9.225,11.854-8.219c5.543,1.004,9.222,6.31,8.219,11.853l-7.037,38.864
+		C264.587,235.314,260.293,238.77,255.455,238.77z"/>
+</g>
 </svg>

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss

@@ -1,4 +1,6 @@
 .log-state-indicator {
+	padding-left: 8px;
+
 	.line {
 		margin: 0 8px;
 		min-height: 24px;

frontend/src/components/Logs/LogStateIndicator/getRowBackgroundColor.ts

@@ -1,43 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-
-import { LogType } from './LogStateIndicator';
-
-export function getRowBackgroundColor(
-	isDarkMode: boolean,
-	logType?: string,
-): string {
-	if (isDarkMode) {
-		switch (logType) {
-			case LogType.INFO:
-				return `${Color.BG_ROBIN_500}40`;
-			case LogType.WARN:
-				return `${Color.BG_AMBER_500}40`;
-			case LogType.ERROR:
-				return `${Color.BG_CHERRY_500}40`;
-			case LogType.TRACE:
-				return `${Color.BG_FOREST_400}40`;
-			case LogType.DEBUG:
-				return `${Color.BG_AQUA_500}40`;
-			case LogType.FATAL:
-				return `${Color.BG_SAKURA_500}40`;
-			default:
-				return `${Color.BG_ROBIN_500}40`;
-		}
-	}
-	switch (logType) {
-		case LogType.INFO:
-			return Color.BG_ROBIN_100;
-		case LogType.WARN:
-			return Color.BG_AMBER_100;
-		case LogType.ERROR:
-			return Color.BG_CHERRY_100;
-		case LogType.TRACE:
-			return Color.BG_FOREST_200;
-		case LogType.DEBUG:
-			return Color.BG_AQUA_100;
-		case LogType.FATAL:
-			return Color.BG_SAKURA_100;
-		default:
-			return Color.BG_VANILLA_300;
-	}
-}

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -1,114 +0,0 @@
-import type { ReactElement } from 'react';
-import { useMemo } from 'react';
-import TanStackTable from 'components/TanStackTableView';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
-import { FontSize } from 'container/OptionsMenu/types';
-import { FlatLogData } from 'lib/logs/flatLogData';
-import { useTimezone } from 'providers/Timezone';
-import { IField } from 'types/api/logs/fields';
-import { ILog } from 'types/api/logs/log';
-
-import type { TableColumnDef } from '../../TanStackTableView/types';
-import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
-
-type UseLogsTableColumnsProps = {
-	fields: IField[];
-	fontSize: FontSize;
-	appendTo?: 'center' | 'end';
-};
-
-export function useLogsTableColumns({
-	fields,
-	fontSize,
-	appendTo = 'center',
-}: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	return useMemo<TableColumnDef<ILog>[]>(() => {
-		const stateIndicatorCol: TableColumnDef<ILog> = {
-			id: 'state-indicator',
-			header: '',
-			pin: 'left',
-			enableMove: false,
-			enableResize: false,
-			enableRemove: false,
-			canBeHidden: false,
-			width: { fixed: 24 },
-			cell: ({ row }): ReactElement => (
-				<LogStateIndicator
-					fontSize={fontSize}
-					severityText={row.severity_text as string}
-					severityNumber={row.severity_number as number}
-				/>
-			),
-		};
-
-		const fieldColumns: TableColumnDef<ILog>[] = fields
-			.filter((f): boolean => !['id', 'body', 'timestamp'].includes(f.name))
-			.map(
-				(f): TableColumnDef<ILog> => ({
-					id: f.name,
-					header: f.name,
-					accessorFn: (log): unknown => FlatLogData(log)[f.name],
-					enableRemove: true,
-					width: { min: 192 },
-					cell: ({ value }): ReactElement => (
-						<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
-					),
-				}),
-			);
-
-		const timestampCol: TableColumnDef<ILog> | null = fields.some(
-			(f) => f.name === 'timestamp',
-		)
-			? {
-					id: 'timestamp',
-					header: 'Timestamp',
-					accessorFn: (log): unknown => log.timestamp,
-					width: { default: 170, min: 170 },
-					cell: ({ value }): ReactElement => {
-						const ts = value as string | number;
-						const formatted =
-							typeof ts === 'string'
-								? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
-								: formatTimezoneAdjustedTimestamp(
-										ts / 1e6,
-										DATE_TIME_FORMATS.ISO_DATETIME_MS,
-								  );
-						return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
-					},
-			  }
-			: null;
-
-		const bodyCol: TableColumnDef<ILog> | null = fields.some(
-			(f) => f.name === 'body',
-		)
-			? {
-					id: 'body',
-					header: 'Body',
-					accessorFn: (log): string => log.body,
-					canBeHidden: false,
-					width: { default: '100%', min: 300 },
-					cell: ({ value, isActive }): ReactElement => (
-						<TanStackTable.Text
-							dangerouslySetInnerHTML={{
-								__html: getSanitizedLogBody(value as string, {
-									shouldEscapeHtml: true,
-								}),
-							}}
-							data-active={isActive}
-						/>
-					),
-			  }
-			: null;
-
-		return [
-			stateIndicatorCol,
-			...(timestampCol ? [timestampCol] : []),
-			...(appendTo === 'center' ? fieldColumns : []),
-			...(bodyCol ? [bodyCol] : []),
-			...(appendTo === 'end' ? fieldColumns : []),
-		];
-	}, [fields, appendTo, fontSize, formatTimezoneAdjustedTimestamp]);
-}

frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx

@@ -17,7 +17,7 @@ function CodeCopyBtn({
 		let copiedText = '';
 		if (children && Array.isArray(children)) {
 			setIsSnippetCopied(true);
-			// eslint-disable-next-line no-restricted-properties
+			// oxlint-disable-next-line signoz/no-navigator-clipboard
 			navigator.clipboard.writeText(children[0].props.children[0]).finally(() => {
 				copiedText = (children[0].props.children[0] as string).slice(0, 200); // slicing is done due to the limitation in accepted char length in attributes
 				setTimeout(() => {

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -401,7 +401,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 		const textToCopy = selectedTexts.join(', ');
 
-		// eslint-disable-next-line no-restricted-properties
+		// oxlint-disable-next-line signoz/no-navigator-clipboard
 		navigator.clipboard.writeText(textToCopy).catch(console.error);
 	}, [selectedChips, selectedValues]);
 

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -1,135 +0,0 @@
-import { ComponentProps, memo } from 'react';
-import { TableComponents } from 'react-virtuoso';
-import cx from 'classnames';
-
-import TanStackRowCells from './TanStackRow';
-import {
-	useClearRowHovered,
-	useSetRowHovered,
-} from './TanStackTableStateContext';
-import { FlatItem, TableRowContext } from './types';
-
-import tableStyles from './TanStackTable.module.scss';
-
-type VirtuosoTableRowProps<TData> = ComponentProps<
-	NonNullable<
-		TableComponents<FlatItem<TData>, TableRowContext<TData>>['TableRow']
-	>
->;
-
-function TanStackCustomTableRow<TData>({
-	item,
-	context,
-	...props
-}: VirtuosoTableRowProps<TData>): JSX.Element {
-	const rowId = item.row.id;
-	const rowData = item.row.original;
-
-	// Stable callbacks for hover state management
-	const setHovered = useSetRowHovered(rowId);
-	const clearHovered = useClearRowHovered(rowId);
-
-	if (item.kind === 'expansion') {
-		return (
-			<tr {...props} className={tableStyles.tableRowExpansion}>
-				<TanStackRowCells
-					row={item.row}
-					itemKind={item.kind}
-					context={context}
-					hasSingleColumn={context?.hasSingleColumn ?? false}
-					columnOrderKey={context?.columnOrderKey ?? ''}
-					columnVisibilityKey={context?.columnVisibilityKey ?? ''}
-				/>
-			</tr>
-		);
-	}
-
-	const isActive = context?.isRowActive?.(rowData) ?? false;
-	const extraClass = context?.getRowClassName?.(rowData) ?? '';
-	const rowStyle = context?.getRowStyle?.(rowData);
-
-	const rowClassName = cx(
-		tableStyles.tableRow,
-		isActive && tableStyles.tableRowActive,
-		extraClass,
-	);
-
-	return (
-		<tr
-			{...props}
-			className={rowClassName}
-			style={rowStyle}
-			onMouseEnter={setHovered}
-			onMouseLeave={clearHovered}
-		>
-			<TanStackRowCells
-				row={item.row}
-				itemKind={item.kind}
-				context={context}
-				hasSingleColumn={context?.hasSingleColumn ?? false}
-				columnOrderKey={context?.columnOrderKey ?? ''}
-				columnVisibilityKey={context?.columnVisibilityKey ?? ''}
-			/>
-		</tr>
-	);
-}
-
-// Custom comparison - only re-render when row identity or computed values change
-// This looks overkill but ensures the table is stable and doesn't re-render on every change
-// If you add any new prop to context, remember to update this function
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function areTableRowPropsEqual<TData>(
-	prev: Readonly<VirtuosoTableRowProps<TData>>,
-	next: Readonly<VirtuosoTableRowProps<TData>>,
-): boolean {
-	if (prev.item.row.id !== next.item.row.id) {
-		return false;
-	}
-	if (prev.item.kind !== next.item.kind) {
-		return false;
-	}
-
-	const prevData = prev.item.row.original;
-	const nextData = next.item.row.original;
-
-	if (prevData !== nextData) {
-		return false;
-	}
-
-	if (prev.context?.hasSingleColumn !== next.context?.hasSingleColumn) {
-		return false;
-	}
-	if (prev.context?.columnOrderKey !== next.context?.columnOrderKey) {
-		return false;
-	}
-	if (prev.context?.columnVisibilityKey !== next.context?.columnVisibilityKey) {
-		return false;
-	}
-
-	if (prev.context !== next.context) {
-		const prevActive = prev.context?.isRowActive?.(prevData) ?? false;
-		const nextActive = next.context?.isRowActive?.(nextData) ?? false;
-		if (prevActive !== nextActive) {
-			return false;
-		}
-
-		const prevClass = prev.context?.getRowClassName?.(prevData) ?? '';
-		const nextClass = next.context?.getRowClassName?.(nextData) ?? '';
-		if (prevClass !== nextClass) {
-			return false;
-		}
-
-		const prevStyle = prev.context?.getRowStyle?.(prevData);
-		const nextStyle = next.context?.getRowStyle?.(nextData);
-		if (prevStyle !== nextStyle) {
-			return false;
-		}
-	}
-
-	return true;
-}
-
-export default memo(
-	TanStackCustomTableRow,
-	areTableRowPropsEqual,
-) as typeof TanStackCustomTableRow;

frontend/src/components/TanStackTableView/TanStackHeaderRow.tsx

@@ -1,260 +0,0 @@
-import type {
-	CSSProperties,
-	MouseEvent as ReactMouseEvent,
-	TouchEvent as ReactTouchEvent,
-} from 'react';
-import { useCallback, useMemo } from 'react';
-import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
-import { useSortable } from '@dnd-kit/sortable';
-import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui';
-import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
-import cx from 'classnames';
-import { ChevronDown, ChevronUp, GripVertical } from 'lucide-react';
-
-import { SortState, TableColumnDef } from './types';
-
-import headerStyles from './TanStackHeaderRow.module.scss';
-import tableStyles from './TanStackTable.module.scss';
-
-type TanStackHeaderRowProps<TData = unknown> = {
-	column: TableColumnDef<TData>;
-	header?: TanStackHeader<TData, unknown>;
-	isDarkMode: boolean;
-	hasSingleColumn: boolean;
-	canRemoveColumn?: boolean;
-	onRemoveColumn?: (columnId: string) => void;
-	orderBy?: SortState | null;
-	onSort?: (sort: SortState | null) => void;
-	/** Last column cannot be resized */
-	isLastColumn?: boolean;
-};
-
-const GRIP_ICON_SIZE = 12;
-
-const SORT_ICON_SIZE = 14;
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackHeaderRow<TData>({
-	column,
-	header,
-	isDarkMode,
-	hasSingleColumn,
-	canRemoveColumn = false,
-	onRemoveColumn,
-	orderBy,
-	onSort,
-	isLastColumn = false,
-}: TanStackHeaderRowProps<TData>): JSX.Element {
-	const columnId = column.id;
-	const isDragColumn = column.enableMove !== false && column.pin == null;
-	const isResizableColumn =
-		!isLastColumn &&
-		column.enableResize !== false &&
-		Boolean(header?.column.getCanResize());
-	const isColumnRemovable = Boolean(
-		canRemoveColumn && onRemoveColumn && column.enableRemove,
-	);
-	const isSortable = column.enableSort === true && Boolean(onSort);
-	const currentSortDirection =
-		orderBy?.columnName === columnId ? orderBy.order : null;
-	const isResizing = Boolean(header?.column.getIsResizing());
-	const resizeHandler = header?.getResizeHandler();
-	const headerText =
-		typeof column.header === 'string' && column.header
-			? column.header
-			: String(header?.id ?? columnId);
-	const headerTitleAttr = headerText.replace(/^\w/, (c) => c.toUpperCase());
-
-	const handleSortClick = useCallback((): void => {
-		if (!isSortable || !onSort) {
-			return;
-		}
-		if (currentSortDirection === null) {
-			onSort({ columnName: columnId, order: 'asc' });
-		} else if (currentSortDirection === 'asc') {
-			onSort({ columnName: columnId, order: 'desc' });
-		} else {
-			onSort(null);
-		}
-	}, [isSortable, onSort, currentSortDirection, columnId]);
-
-	const handleResizeStart = (
-		event: ReactMouseEvent<HTMLElement> | ReactTouchEvent<HTMLElement>,
-	): void => {
-		event.preventDefault();
-		event.stopPropagation();
-		resizeHandler?.(event);
-	};
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		setActivatorNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({
-		id: columnId,
-		disabled: !isDragColumn,
-	});
-	const headerCellStyle = useMemo(
-		() =>
-			({
-				'--tanstack-header-translate-x': `${Math.round(transform?.x ?? 0)}px`,
-				'--tanstack-header-translate-y': `${Math.round(transform?.y ?? 0)}px`,
-				'--tanstack-header-transition': isResizing ? 'none' : transition || 'none',
-			} as CSSProperties),
-		[isResizing, transform?.x, transform?.y, transition],
-	);
-	const headerCellClassName = cx(
-		headerStyles.tanstackHeaderCell,
-		isDragging && headerStyles.isDragging,
-		isResizing && headerStyles.isResizing,
-	);
-	const headerContentClassName = cx(
-		headerStyles.tanstackHeaderContent,
-		isResizableColumn && headerStyles.hasResizeControl,
-		isColumnRemovable && headerStyles.hasActionControl,
-		isSortable && headerStyles.isSortable,
-	);
-
-	const thClassName = cx(
-		tableStyles.tableHeaderCell,
-		headerCellClassName,
-		column.id,
-	);
-
-	return (
-		<th
-			ref={setNodeRef}
-			className={thClassName}
-			key={columnId}
-			style={headerCellStyle}
-			data-dark-mode={isDarkMode}
-			data-single-column={hasSingleColumn || undefined}
-		>
-			<span className={headerContentClassName}>
-				{isDragColumn ? (
-					<span className={headerStyles.tanstackGripSlot}>
-						<span
-							ref={setActivatorNodeRef}
-							{...attributes}
-							{...listeners}
-							role="button"
-							aria-label={`Drag ${String(
-								(typeof column.header === 'string' && column.header) ||
-									header?.id ||
-									columnId,
-							)} column`}
-							className={headerStyles.tanstackGripActivator}
-						>
-							<GripVertical size={GRIP_ICON_SIZE} />
-						</span>
-					</span>
-				) : null}
-				{isSortable ? (
-					<button
-						type="button"
-						className={cx(
-							'tanstack-header-title',
-							headerStyles.tanstackSortButton,
-							currentSortDirection && headerStyles.isSorted,
-						)}
-						title={headerTitleAttr}
-						onClick={handleSortClick}
-						aria-sort={
-							currentSortDirection === 'asc'
-								? 'ascending'
-								: currentSortDirection === 'desc'
-								? 'descending'
-								: 'none'
-						}
-					>
-						<span className={headerStyles.tanstackSortLabel}>
-							{header?.column?.columnDef
-								? flexRender(header.column.columnDef.header, header.getContext())
-								: typeof column.header === 'function'
-								? column.header()
-								: String(column.header || '').replace(/^\w/, (c) => c.toUpperCase())}
-						</span>
-						<span className={headerStyles.tanstackSortIndicator}>
-							{currentSortDirection === 'asc' ? (
-								<ChevronUp size={SORT_ICON_SIZE} />
-							) : currentSortDirection === 'desc' ? (
-								<ChevronDown size={SORT_ICON_SIZE} />
-							) : null}
-						</span>
-					</button>
-				) : (
-					<span
-						className={cx('tanstack-header-title', headerStyles.tanstackHeaderTitle)}
-						title={headerTitleAttr}
-					>
-						{header?.column?.columnDef
-							? flexRender(header.column.columnDef.header, header.getContext())
-							: typeof column.header === 'function'
-							? column.header()
-							: String(column.header || '').replace(/^\w/, (c) => c.toUpperCase())}
-					</span>
-				)}
-				{isColumnRemovable && (
-					<Popover>
-						<PopoverTrigger asChild>
-							<span
-								role="button"
-								aria-label={`Column actions for ${headerTitleAttr}`}
-								className={headerStyles.tanstackHeaderActionTrigger}
-								onMouseDown={(event): void => {
-									event.stopPropagation();
-								}}
-							>
-								<MoreOutlined />
-							</span>
-						</PopoverTrigger>
-						<PopoverContent
-							align="end"
-							sideOffset={6}
-							className={headerStyles.tanstackColumnActionsContent}
-						>
-							<button
-								type="button"
-								className={headerStyles.tanstackRemoveColumnAction}
-								onClick={(event): void => {
-									event.preventDefault();
-									event.stopPropagation();
-									onRemoveColumn?.(column.id);
-								}}
-							>
-								<CloseOutlined
-									className={headerStyles.tanstackRemoveColumnActionIcon}
-								/>
-								Remove column
-							</button>
-						</PopoverContent>
-					</Popover>
-				)}
-			</span>
-			{isResizableColumn && (
-				<span
-					role="presentation"
-					className={headerStyles.cursorColResize}
-					title="Drag to resize column"
-					onClick={(event): void => {
-						event.preventDefault();
-						event.stopPropagation();
-					}}
-					onMouseDown={(event): void => {
-						handleResizeStart(event);
-					}}
-					onTouchStart={(event): void => {
-						handleResizeStart(event);
-					}}
-				>
-					<span className={headerStyles.tanstackResizeHandleLine} />
-				</span>
-			)}
-		</th>
-	);
-}
-
-export default TanStackHeaderRow;

frontend/src/components/TanStackTableView/TanStackRow.tsx

@@ -1,136 +0,0 @@
-import type { MouseEvent } from 'react';
-import { memo, useCallback } from 'react';
-import { Row as TanStackRowModel } from '@tanstack/react-table';
-
-import { TanStackRowCell } from './TanStackRowCell';
-import { useIsRowHovered } from './TanStackTableStateContext';
-import { TableRowContext } from './types';
-
-import tableStyles from './TanStackTable.module.scss';
-
-type TanStackRowCellsProps<TData> = {
-	row: TanStackRowModel<TData>;
-	context: TableRowContext<TData> | undefined;
-	itemKind: 'row' | 'expansion';
-	hasSingleColumn: boolean;
-	columnOrderKey: string;
-	columnVisibilityKey: string;
-};
-
-function TanStackRowCellsInner<TData>({
-	row,
-	context,
-	itemKind,
-	hasSingleColumn,
-	columnOrderKey: _columnOrderKey,
-	columnVisibilityKey: _columnVisibilityKey,
-}: TanStackRowCellsProps<TData>): JSX.Element {
-	const hasHovered = useIsRowHovered(row.id);
-	const rowData = row.original;
-	const visibleCells = row.getVisibleCells();
-	const lastCellIndex = visibleCells.length - 1;
-
-	// Stable references via destructuring, keep them as is
-	const onRowClick = context?.onRowClick;
-	const onRowClickNewTab = context?.onRowClickNewTab;
-	const onRowDeactivate = context?.onRowDeactivate;
-	const isRowActive = context?.isRowActive;
-	const getRowKeyData = context?.getRowKeyData;
-	const rowIndex = row.index;
-
-	const handleClick = useCallback(
-		(event: MouseEvent<HTMLTableCellElement>) => {
-			const keyData = getRowKeyData?.(rowIndex);
-			const itemKey = keyData?.itemKey ?? '';
-
-			// Handle ctrl+click or cmd+click (open in new tab)
-			if ((event.ctrlKey || event.metaKey) && onRowClickNewTab) {
-				onRowClickNewTab(rowData, itemKey);
-				return;
-			}
-
-			const isActive = isRowActive?.(rowData) ?? false;
-			if (isActive && onRowDeactivate) {
-				onRowDeactivate();
-			} else {
-				onRowClick?.(rowData, itemKey);
-			}
-		},
-		[
-			isRowActive,
-			onRowDeactivate,
-			onRowClick,
-			onRowClickNewTab,
-			rowData,
-			getRowKeyData,
-			rowIndex,
-		],
-	);
-
-	if (itemKind === 'expansion') {
-		const keyData = getRowKeyData?.(rowIndex);
-		return (
-			<td
-				colSpan={context?.colCount ?? 1}
-				className={tableStyles.tableCellExpansion}
-			>
-				{context?.renderExpandedRow?.(
-					rowData,
-					keyData?.finalKey ?? '',
-					keyData?.groupMeta,
-				)}
-			</td>
-		);
-	}
-
-	return (
-		<>
-			{visibleCells.map((cell, index) => {
-				const isLastCell = index === lastCellIndex;
-				return (
-					<TanStackRowCell
-						key={cell.id}
-						cell={cell}
-						hasSingleColumn={hasSingleColumn}
-						isLastCell={isLastCell}
-						hasHovered={hasHovered}
-						rowData={rowData}
-						onClick={handleClick}
-						renderRowActions={context?.renderRowActions}
-					/>
-				);
-			})}
-		</>
-	);
-}
-
-// Custom comparison - only re-render when row data changes
-// If you add any new prop to context, remember to update this function
-function areRowCellsPropsEqual<TData>(
-	prev: Readonly<TanStackRowCellsProps<TData>>,
-	next: Readonly<TanStackRowCellsProps<TData>>,
-): boolean {
-	return (
-		prev.row.id === next.row.id &&
-		prev.itemKind === next.itemKind &&
-		prev.hasSingleColumn === next.hasSingleColumn &&
-		prev.columnOrderKey === next.columnOrderKey &&
-		prev.columnVisibilityKey === next.columnVisibilityKey &&
-		prev.context?.onRowClick === next.context?.onRowClick &&
-		prev.context?.onRowClickNewTab === next.context?.onRowClickNewTab &&
-		prev.context?.onRowDeactivate === next.context?.onRowDeactivate &&
-		prev.context?.isRowActive === next.context?.isRowActive &&
-		prev.context?.getRowKeyData === next.context?.getRowKeyData &&
-		prev.context?.renderRowActions === next.context?.renderRowActions &&
-		prev.context?.renderExpandedRow === next.context?.renderExpandedRow &&
-		prev.context?.colCount === next.context?.colCount
-	);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TanStackRowCells = memo(
-	TanStackRowCellsInner,
-	areRowCellsPropsEqual as any,
-) as <T>(props: TanStackRowCellsProps<T>) => JSX.Element;
-
-export default TanStackRowCells;

frontend/src/components/TanStackTableView/TanStackRowCell.tsx

@@ -1,88 +0,0 @@
-import type { MouseEvent, ReactNode } from 'react';
-import { memo } from 'react';
-import type { Cell } from '@tanstack/react-table';
-import { flexRender } from '@tanstack/react-table';
-import { Skeleton } from 'antd';
-import cx from 'classnames';
-
-import { useShouldShowCellSkeleton } from './TanStackTableStateContext';
-
-import tableStyles from './TanStackTable.module.scss';
-import skeletonStyles from './TanStackTableSkeleton.module.scss';
-
-export type TanStackRowCellProps<TData> = {
-	cell: Cell<TData, unknown>;
-	hasSingleColumn: boolean;
-	isLastCell: boolean;
-	hasHovered: boolean;
-	rowData: TData;
-	onClick: (event: MouseEvent<HTMLTableCellElement>) => void;
-	renderRowActions?: (row: TData) => ReactNode;
-};
-
-function TanStackRowCellInner<TData>({
-	cell,
-	hasSingleColumn,
-	isLastCell,
-	hasHovered,
-	rowData,
-	onClick,
-	renderRowActions,
-}: TanStackRowCellProps<TData>): JSX.Element {
-	const showSkeleton = useShouldShowCellSkeleton();
-
-	return (
-		<td
-			className={cx(tableStyles.tableCell, 'tanstack-cell-' + cell.column.id)}
-			data-single-column={hasSingleColumn || undefined}
-			onClick={onClick}
-		>
-			{showSkeleton ? (
-				<Skeleton.Input
-					active
-					size="small"
-					className={skeletonStyles.cellSkeleton}
-				/>
-			) : (
-				flexRender(cell.column.columnDef.cell, cell.getContext())
-			)}
-			{isLastCell && hasHovered && renderRowActions && !showSkeleton && (
-				<span className={tableStyles.tableViewRowActions}>
-					{renderRowActions(rowData)}
-				</span>
-			)}
-		</td>
-	);
-}
-
-// Custom comparison - only re-render when row data changes
-// If you add any new prop to context, remember to update this function
-function areTanStackRowCellPropsEqual<TData>(
-	prev: Readonly<TanStackRowCellProps<TData>>,
-	next: Readonly<TanStackRowCellProps<TData>>,
-): boolean {
-	if (next.cell.id.startsWith('skeleton-')) {
-		return false;
-	}
-
-	return (
-		prev.cell.id === next.cell.id &&
-		prev.cell.column.id === next.cell.column.id &&
-		Object.is(prev.cell.getValue(), next.cell.getValue()) &&
-		prev.hasSingleColumn === next.hasSingleColumn &&
-		prev.isLastCell === next.isLastCell &&
-		prev.hasHovered === next.hasHovered &&
-		prev.onClick === next.onClick &&
-		prev.renderRowActions === next.renderRowActions &&
-		prev.rowData === next.rowData
-	);
-}
-
-const TanStackRowCellMemo = memo(
-	TanStackRowCellInner,
-	areTanStackRowCellPropsEqual,
-);
-
-TanStackRowCellMemo.displayName = 'TanStackRowCell';
-
-export const TanStackRowCell = TanStackRowCellMemo as typeof TanStackRowCellInner;

frontend/src/components/TanStackTableView/TanStackTable.module.scss

@@ -1,100 +0,0 @@
-.tanStackTable {
-	width: 100%;
-	border-collapse: separate;
-	border-spacing: 0;
-	table-layout: fixed;
-
-	& td,
-	& th {
-		overflow: hidden;
-		min-width: 0;
-		box-sizing: border-box;
-		vertical-align: middle;
-	}
-}
-
-.tableCellText {
-	font-style: normal;
-	font-weight: 400;
-	letter-spacing: -0.07px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	width: auto;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: var(--tanstack-plain-body-line-clamp, 1);
-	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
-	font-size: var(--tanstack-plain-cell-font-size, 14px);
-	line-height: var(--tanstack-plain-cell-line-height, 18px);
-	color: var(--l2-foreground);
-	max-width: 100%;
-	word-break: break-all;
-}
-
-.tableViewRowActions {
-	position: absolute;
-	top: 50%;
-	right: 8px;
-	left: auto;
-	transform: translateY(-50%);
-	margin: 0;
-	z-index: 5;
-}
-
-.tableCell {
-	padding: 0.3rem;
-	font-style: normal;
-	font-weight: 400;
-	letter-spacing: -0.07px;
-	font-size: var(--tanstack-plain-cell-font-size, 14px);
-	line-height: var(--tanstack-plain-cell-line-height, 18px);
-	color: var(--l2-foreground);
-}
-
-.tableRow {
-	cursor: pointer;
-	position: relative;
-	overflow-anchor: none;
-
-	&:hover {
-		.tableCell {
-			background-color: var(--row-hover-bg) !important;
-		}
-	}
-
-	&.tableRowActive {
-		.tableCell {
-			background-color: var(--row-active-bg) !important;
-		}
-	}
-}
-
-.tableHeaderCell {
-	padding: 0.3rem;
-	height: 36px;
-	text-align: left;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 18px;
-	letter-spacing: -0.07px;
-	color: var(--l1-foreground);
-
-	// TODO: Remove this once background color (l1) is matching the actual background color of the page
-	&[data-dark-mode='true'] {
-		background: #0b0c0d;
-	}
-
-	&[data-dark-mode='false'] {
-		background: #fdfdfd;
-	}
-}
-
-.tableRowExpansion {
-	display: table-row;
-}
-
-.tableCellExpansion {
-	padding: 0.5rem;
-	vertical-align: top;
-}

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -1,572 +0,0 @@
-import type { ComponentProps, CSSProperties } from 'react';
-import {
-	forwardRef,
-	memo,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-} from 'react';
-import type { TableComponents } from 'react-virtuoso';
-import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso';
-import { LoadingOutlined } from '@ant-design/icons';
-import { DndContext, pointerWithin } from '@dnd-kit/core';
-import {
-	horizontalListSortingStrategy,
-	SortableContext,
-} from '@dnd-kit/sortable';
-import {
-	ComboboxSimple,
-	ComboboxSimpleItem,
-	TooltipProvider,
-} from '@signozhq/ui';
-import { Pagination } from '@signozhq/ui';
-import type { Row } from '@tanstack/react-table';
-import {
-	ColumnDef,
-	ColumnPinningState,
-	getCoreRowModel,
-	useReactTable,
-} from '@tanstack/react-table';
-import { Spin } from 'antd';
-import cx from 'classnames';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import TanStackCustomTableRow from './TanStackCustomTableRow';
-import TanStackHeaderRow from './TanStackHeaderRow';
-import {
-	ColumnVisibilitySync,
-	TableLoadingSync,
-	TanStackTableStateProvider,
-} from './TanStackTableStateContext';
-import {
-	FlatItem,
-	TableRowContext,
-	TanStackTableHandle,
-	TanStackTableProps,
-} from './types';
-import { useColumnDnd } from './useColumnDnd';
-import { useColumnHandlers } from './useColumnHandlers';
-import { useColumnState } from './useColumnState';
-import { useEffectiveData } from './useEffectiveData';
-import { useFlatItems } from './useFlatItems';
-import { useRowKeyData } from './useRowKeyData';
-import { useTableParams } from './useTableParams';
-import { buildTanstackColumnDef } from './utils';
-import { VirtuosoTableColGroup } from './VirtuosoTableColGroup';
-
-import tableStyles from './TanStackTable.module.scss';
-import viewStyles from './TanStackTableView.module.scss';
-
-const COLUMN_DND_AUTO_SCROLL = {
-	layoutShiftCompensation: false as const,
-	threshold: { x: 0.2, y: 0 },
-};
-
-const INCREASE_VIEWPORT_BY = { top: 500, bottom: 500 };
-
-const noopColumnVisibility = (): void => {};
-
-const paginationPageSizeItems: ComboboxSimpleItem[] = [10, 20, 30, 50, 100].map(
-	(value) => ({
-		value: value.toString(),
-		label: value.toString(),
-		displayValue: value.toString(),
-	}),
-);
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackTableInner<TData>(
-	{
-		data,
-		columns,
-		columnStorageKey,
-		columnSizing: columnSizingProp,
-		onColumnSizingChange,
-		onColumnOrderChange,
-		onColumnRemove,
-		isLoading = false,
-		skeletonRowCount = 10,
-		enableQueryParams,
-		pagination,
-		onEndReached,
-		getRowKey,
-		getItemKey,
-		groupBy,
-		getGroupKey,
-		getRowStyle,
-		getRowClassName,
-		isRowActive,
-		renderRowActions,
-		onRowClick,
-		onRowClickNewTab,
-		onRowDeactivate,
-		activeRowIndex,
-		renderExpandedRow,
-		getRowCanExpand,
-		tableScrollerProps,
-		plainTextCellLineClamp,
-		cellTypographySize,
-		className,
-		testId,
-		prefixPaginationContent,
-		suffixPaginationContent,
-	}: TanStackTableProps<TData>,
-	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
-): JSX.Element {
-	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
-	const isDarkMode = useIsDarkMode();
-
-	const {
-		page,
-		limit,
-		setPage,
-		setLimit,
-		orderBy,
-		setOrderBy,
-		expanded,
-		setExpanded,
-	} = useTableParams(enableQueryParams, {
-		page: pagination?.defaultPage,
-		limit: pagination?.defaultLimit,
-	});
-
-	const isGrouped = (groupBy?.length ?? 0) > 0;
-
-	const {
-		columnVisibility: storeVisibility,
-		columnSizing: storeSizing,
-		sortedColumns,
-		hideColumn,
-		setColumnSizing: storeSetSizing,
-		setColumnOrder: storeSetOrder,
-	} = useColumnState({
-		storageKey: columnStorageKey,
-		columns,
-		isGrouped,
-	});
-
-	// Use store values when columnStorageKey is provided, otherwise fall back to props/defaults
-	const effectiveColumns = columnStorageKey ? sortedColumns : columns;
-	const effectiveVisibility = columnStorageKey ? storeVisibility : {};
-	const effectiveSizing = columnStorageKey
-		? storeSizing
-		: columnSizingProp ?? {};
-
-	const effectiveData = useEffectiveData<TData>({
-		data,
-		isLoading,
-		limit,
-		skeletonRowCount,
-	});
-
-	const { rowKeyData, getRowKeyData } = useRowKeyData({
-		data: effectiveData,
-		isLoading,
-		getRowKey,
-		getItemKey,
-		groupBy,
-		getGroupKey,
-	});
-
-	const {
-		handleColumnSizingChange,
-		handleColumnOrderChange,
-		handleRemoveColumn,
-	} = useColumnHandlers({
-		columnStorageKey,
-		effectiveSizing,
-		storeSetSizing,
-		storeSetOrder,
-		hideColumn,
-		onColumnSizingChange,
-		onColumnOrderChange,
-		onColumnRemove,
-	});
-
-	const columnPinning = useMemo<ColumnPinningState>(
-		() => ({
-			left: effectiveColumns.filter((c) => c.pin === 'left').map((c) => c.id),
-			right: effectiveColumns.filter((c) => c.pin === 'right').map((c) => c.id),
-		}),
-		[effectiveColumns],
-	);
-
-	const tanstackColumns = useMemo<ColumnDef<TData>[]>(
-		() =>
-			effectiveColumns.map((colDef) =>
-				buildTanstackColumnDef(colDef, isRowActive, getRowKeyData),
-			),
-		[effectiveColumns, isRowActive, getRowKeyData],
-	);
-
-	const getRowId = useCallback(
-		(row: TData, index: number): string => {
-			if (rowKeyData) {
-				return rowKeyData[index]?.finalKey ?? String(index);
-			}
-			const r = row as Record<string, unknown>;
-			if (r != null && typeof r.id !== 'undefined') {
-				return String(r.id);
-			}
-			return String(index);
-		},
-		[rowKeyData],
-	);
-
-	const tableGetRowCanExpand = useCallback(
-		(row: Row<TData>): boolean =>
-			getRowCanExpand ? getRowCanExpand(row.original) : true,
-		[getRowCanExpand],
-	);
-
-	const table = useReactTable({
-		data: effectiveData,
-		columns: tanstackColumns,
-		enableColumnResizing: true,
-		enableColumnPinning: true,
-		columnResizeMode: 'onChange',
-		getCoreRowModel: getCoreRowModel(),
-		getRowId,
-		enableExpanding: Boolean(renderExpandedRow),
-		getRowCanExpand: renderExpandedRow ? tableGetRowCanExpand : undefined,
-		onColumnSizingChange: handleColumnSizingChange,
-		onColumnVisibilityChange: noopColumnVisibility,
-		onExpandedChange: setExpanded,
-		state: {
-			columnSizing: effectiveSizing,
-			columnVisibility: effectiveVisibility,
-			columnPinning,
-			expanded,
-		},
-	});
-
-	// Keep refs to avoid recreating virtuosoComponents on every resize/render
-	const tableRef = useRef(table);
-	tableRef.current = table;
-	const columnsRef = useRef(effectiveColumns);
-	columnsRef.current = effectiveColumns;
-
-	const tableRows = table.getRowModel().rows;
-
-	const { flatItems, flatIndexForActiveRow } = useFlatItems({
-		tableRows,
-		renderExpandedRow,
-		expanded,
-		activeRowIndex,
-	});
-
-	// keep previous count just to avoid flashing the pagination component
-	const prevTotalCountRef = useRef(pagination?.total || 0);
-	if (pagination?.total && pagination?.total > 0) {
-		prevTotalCountRef.current = pagination?.total;
-	}
-	const effectiveTotalCount = !isLoading
-		? pagination?.total || 0
-		: prevTotalCountRef.current;
-
-	useEffect(() => {
-		if (flatIndexForActiveRow < 0) {
-			return;
-		}
-		virtuosoRef.current?.scrollToIndex({
-			index: flatIndexForActiveRow,
-			align: 'center',
-			behavior: 'auto',
-		});
-	}, [flatIndexForActiveRow]);
-
-	const { sensors, columnIds, handleDragEnd } = useColumnDnd({
-		columns: effectiveColumns,
-		onColumnOrderChange: handleColumnOrderChange,
-	});
-
-	const hasSingleColumn = useMemo(
-		() =>
-			effectiveColumns.filter((c) => !c.pin && c.enableRemove !== false).length <=
-			1,
-		[effectiveColumns],
-	);
-
-	const canRemoveColumn = !hasSingleColumn;
-
-	const flatHeaders = useMemo(
-		() => table.getFlatHeaders().filter((header) => !header.isPlaceholder),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[tanstackColumns, columnPinning, effectiveVisibility],
-	);
-
-	const columnsById = useMemo(
-		() => new Map(effectiveColumns.map((c) => [c.id, c] as const)),
-		[effectiveColumns],
-	);
-
-	const visibleColumnsCount = table.getVisibleFlatColumns().length;
-
-	const columnOrderKey = useMemo(() => columnIds.join(','), [columnIds]);
-	const columnVisibilityKey = useMemo(
-		() =>
-			table
-				.getVisibleFlatColumns()
-				.map((c) => c.id)
-				.join(','),
-		// we want to explicitly have table out of this deps
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[effectiveVisibility, columnIds],
-	);
-
-	const virtuosoContext = useMemo<TableRowContext<TData>>(
-		() => ({
-			getRowStyle,
-			getRowClassName,
-			isRowActive,
-			renderRowActions,
-			onRowClick,
-			onRowClickNewTab,
-			onRowDeactivate,
-			renderExpandedRow,
-			getRowKeyData,
-			colCount: visibleColumnsCount,
-			isDarkMode,
-			plainTextCellLineClamp,
-			hasSingleColumn,
-			columnOrderKey,
-			columnVisibilityKey,
-		}),
-		[
-			getRowStyle,
-			getRowClassName,
-			isRowActive,
-			renderRowActions,
-			onRowClick,
-			onRowClickNewTab,
-			onRowDeactivate,
-			renderExpandedRow,
-			getRowKeyData,
-			visibleColumnsCount,
-			isDarkMode,
-			plainTextCellLineClamp,
-			hasSingleColumn,
-			columnOrderKey,
-			columnVisibilityKey,
-		],
-	);
-
-	const tableHeader = useCallback(() => {
-		return (
-			<DndContext
-				sensors={sensors}
-				collisionDetection={pointerWithin}
-				onDragEnd={handleDragEnd}
-				autoScroll={COLUMN_DND_AUTO_SCROLL}
-			>
-				<SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>
-					<tr>
-						{flatHeaders.map((header, index) => {
-							const column = columnsById.get(header.id);
-							if (!column) {
-								return null;
-							}
-							return (
-								<TanStackHeaderRow
-									key={header.id}
-									column={column}
-									header={header}
-									isDarkMode={isDarkMode}
-									hasSingleColumn={hasSingleColumn}
-									onRemoveColumn={handleRemoveColumn}
-									canRemoveColumn={canRemoveColumn}
-									orderBy={orderBy}
-									onSort={setOrderBy}
-									isLastColumn={index === flatHeaders.length - 1}
-								/>
-							);
-						})}
-					</tr>
-				</SortableContext>
-			</DndContext>
-		);
-	}, [
-		sensors,
-		handleDragEnd,
-		columnIds,
-		flatHeaders,
-		columnsById,
-		isDarkMode,
-		hasSingleColumn,
-		handleRemoveColumn,
-		canRemoveColumn,
-		orderBy,
-		setOrderBy,
-	]);
-
-	const handleEndReached = useCallback(
-		(index: number): void => {
-			onEndReached?.(index);
-		},
-		[onEndReached],
-	);
-
-	const isInfiniteScrollMode = Boolean(onEndReached);
-	const showInfiniteScrollLoader = isInfiniteScrollMode && isLoading;
-
-	useImperativeHandle(
-		forwardedRef,
-		(): TanStackTableHandle =>
-			new Proxy(
-				{
-					goToPage: (p: number): void => {
-						setPage(p);
-						virtuosoRef.current?.scrollToIndex({
-							index: 0,
-							align: 'start',
-						});
-					},
-				} as TanStackTableHandle,
-				{
-					get(target, prop): unknown {
-						if (prop in target) {
-							return Reflect.get(target, prop);
-						}
-						const v = (virtuosoRef.current as unknown) as Record<string, unknown>;
-						const value = v?.[prop as string];
-						if (typeof value === 'function') {
-							return (value as (...a: unknown[]) => unknown).bind(virtuosoRef.current);
-						}
-						return value;
-					},
-				},
-			),
-		[setPage],
-	);
-
-	const showPagination = Boolean(pagination && !onEndReached);
-
-	const { className: tableScrollerClassName, ...restTableScrollerProps } =
-		tableScrollerProps ?? {};
-
-	const cellTypographyClass = useMemo((): string | undefined => {
-		if (cellTypographySize === 'small') {
-			return viewStyles.cellTypographySmall;
-		}
-		if (cellTypographySize === 'medium') {
-			return viewStyles.cellTypographyMedium;
-		}
-		if (cellTypographySize === 'large') {
-			return viewStyles.cellTypographyLarge;
-		}
-		return undefined;
-	}, [cellTypographySize]);
-
-	const virtuosoClassName = useMemo(
-		() =>
-			cx(
-				viewStyles.tanstackTableVirtuosoScroll,
-				cellTypographyClass,
-				tableScrollerClassName,
-			),
-		[cellTypographyClass, tableScrollerClassName],
-	);
-
-	const virtuosoTableStyle = useMemo(
-		() =>
-			({
-				'--tanstack-plain-body-line-clamp': plainTextCellLineClamp,
-			} as CSSProperties),
-		[plainTextCellLineClamp],
-	);
-
-	type VirtuosoTableComponentProps = ComponentProps<
-		NonNullable<TableComponents<FlatItem<TData>, TableRowContext<TData>>['Table']>
-	>;
-
-	// Use refs in virtuosoComponents to keep the component reference stable during resize
-	// This prevents Virtuoso from re-rendering all rows when columns are resized
-	const virtuosoComponents = useMemo(
-		() => ({
-			Table: ({ style, children }: VirtuosoTableComponentProps): JSX.Element => (
-				<table className={tableStyles.tanStackTable} style={style}>
-					<VirtuosoTableColGroup
-						columns={columnsRef.current}
-						table={tableRef.current}
-					/>
-					{children}
-				</table>
-			),
-			TableRow: TanStackCustomTableRow,
-		}),
-		[],
-	);
-
-	return (
-		<div className={cx(viewStyles.tanstackTableViewWrapper, className)}>
-			<TanStackTableStateProvider>
-				<TableLoadingSync
-					isLoading={isLoading}
-					isInfiniteScrollMode={isInfiniteScrollMode}
-				/>
-				<ColumnVisibilitySync visibility={effectiveVisibility} />
-				<TooltipProvider>
-					<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
-						className={virtuosoClassName}
-						ref={virtuosoRef}
-						{...restTableScrollerProps}
-						data={flatItems}
-						totalCount={flatItems.length}
-						context={virtuosoContext}
-						increaseViewportBy={INCREASE_VIEWPORT_BY}
-						initialTopMostItemIndex={
-							flatIndexForActiveRow >= 0 ? flatIndexForActiveRow : 0
-						}
-						fixedHeaderContent={tableHeader}
-						style={virtuosoTableStyle}
-						components={virtuosoComponents}
-						endReached={onEndReached ? handleEndReached : undefined}
-						data-testid={testId}
-					/>
-					{showInfiniteScrollLoader && (
-						<div
-							className={viewStyles.tanstackLoadingOverlay}
-							data-testid="tanstack-infinite-loader"
-						>
-							<Spin indicator={<LoadingOutlined spin />} tip="Loading more..." />
-						</div>
-					)}
-					{showPagination && pagination && (
-						<div className={viewStyles.paginationContainer}>
-							{prefixPaginationContent}
-							<Pagination
-								current={page}
-								pageSize={limit}
-								total={effectiveTotalCount}
-								onPageChange={(p): void => {
-									setPage(p);
-								}}
-							/>
-							<div className={viewStyles.paginationPageSize}>
-								<ComboboxSimple
-									value={limit?.toString()}
-									defaultValue="10"
-									onChange={(value): void => setLimit(+value)}
-									items={paginationPageSizeItems}
-								/>
-							</div>
-							{suffixPaginationContent}
-						</div>
-					)}
-				</TooltipProvider>
-			</TanStackTableStateProvider>
-		</div>
-	);
-}
-
-const TanStackTableForward = forwardRef(TanStackTableInner) as <TData>(
-	props: TanStackTableProps<TData> & {
-		ref?: React.Ref<TanStackTableHandle>;
-	},
-) => JSX.Element;
-
-export const TanStackTableBase = memo(
-	TanStackTableForward,
-) as typeof TanStackTableForward;

frontend/src/components/TanStackTableView/TanStackTableSkeleton.module.scss

@@ -1,21 +0,0 @@
-.headerSkeleton {
-	width: 60% !important;
-	min-width: 50px !important;
-	height: 16px !important;
-
-	:global(.ant-skeleton-input) {
-		min-width: 50px !important;
-		height: 16px !important;
-	}
-}
-
-.cellSkeleton {
-	width: 80% !important;
-	min-width: 40px !important;
-	height: 14px !important;
-
-	:global(.ant-skeleton-input) {
-		min-width: 40px !important;
-		height: 14px !important;
-	}
-}

frontend/src/components/TanStackTableView/TanStackTableSkeleton.tsx

@@ -1,72 +0,0 @@
-import { useMemo } from 'react';
-import type { ColumnSizingState } from '@tanstack/react-table';
-import { Skeleton } from 'antd';
-
-import { TableColumnDef } from './types';
-import { getColumnWidthStyle } from './utils';
-
-import tableStyles from './TanStackTable.module.scss';
-import styles from './TanStackTableSkeleton.module.scss';
-
-type TanStackTableSkeletonProps<TData> = {
-	columns: TableColumnDef<TData>[];
-	rowCount: number;
-	isDarkMode: boolean;
-	columnSizing?: ColumnSizingState;
-};
-
-export function TanStackTableSkeleton<TData>({
-	columns,
-	rowCount,
-	isDarkMode,
-	columnSizing,
-}: TanStackTableSkeletonProps<TData>): JSX.Element {
-	const rows = useMemo(() => Array.from({ length: rowCount }, (_, i) => i), [
-		rowCount,
-	]);
-
-	return (
-		<table className={tableStyles.tanStackTable}>
-			<colgroup>
-				{columns.map((column, index) => (
-					<col
-						key={column.id}
-						style={getColumnWidthStyle(
-							column,
-							columnSizing?.[column.id],
-							index === columns.length - 1,
-						)}
-					/>
-				))}
-			</colgroup>
-			<thead>
-				<tr>
-					{columns.map((column) => (
-						<th
-							key={column.id}
-							className={tableStyles.tableHeaderCell}
-							data-dark-mode={isDarkMode}
-						>
-							{typeof column.header === 'function' ? (
-								<Skeleton.Input active size="small" className={styles.headerSkeleton} />
-							) : (
-								column.header
-							)}
-						</th>
-					))}
-				</tr>
-			</thead>
-			<tbody>
-				{rows.map((rowIndex) => (
-					<tr key={rowIndex} className={tableStyles.tableRow}>
-						{columns.map((column) => (
-							<td key={column.id} className={tableStyles.tableCell}>
-								<Skeleton.Input active size="small" className={styles.cellSkeleton} />
-							</td>
-						))}
-					</tr>
-				))}
-			</tbody>
-		</table>
-	);
-}

frontend/src/components/TanStackTableView/TanStackTableStateContext.tsx

@@ -1,206 +0,0 @@
-/* eslint-disable no-restricted-imports */
-import {
-	createContext,
-	ReactNode,
-	useCallback,
-	useContext,
-	useEffect,
-	useRef,
-} from 'react';
-/* eslint-enable no-restricted-imports */
-import { VisibilityState } from '@tanstack/react-table';
-import { createStore, StoreApi, useStore } from 'zustand';
-
-const CLEAR_HOVER_DELAY_MS = 100;
-
-type TanStackTableState = {
-	hoveredRowId: string | null;
-	clearTimeoutId: ReturnType<typeof setTimeout> | null;
-	setHoveredRowId: (id: string | null) => void;
-	scheduleClearHover: (rowId: string) => void;
-	isLoading: boolean;
-	setIsLoading: (loading: boolean) => void;
-	isInfiniteScrollMode: boolean;
-	setIsInfiniteScrollMode: (enabled: boolean) => void;
-	columnVisibility: VisibilityState;
-	setColumnVisibility: (visibility: VisibilityState) => void;
-};
-
-const createTableStateStore = (): StoreApi<TanStackTableState> =>
-	createStore<TanStackTableState>((set, get) => ({
-		hoveredRowId: null,
-		clearTimeoutId: null,
-		setHoveredRowId: (id: string | null): void => {
-			const { clearTimeoutId } = get();
-			if (clearTimeoutId) {
-				clearTimeout(clearTimeoutId);
-				set({ clearTimeoutId: null });
-			}
-			set({ hoveredRowId: id });
-		},
-		scheduleClearHover: (rowId: string): void => {
-			const { clearTimeoutId } = get();
-			if (clearTimeoutId) {
-				clearTimeout(clearTimeoutId);
-			}
-			const timeoutId = setTimeout(() => {
-				const current = get().hoveredRowId;
-				if (current === rowId) {
-					set({ hoveredRowId: null, clearTimeoutId: null });
-				}
-			}, CLEAR_HOVER_DELAY_MS);
-			set({ clearTimeoutId: timeoutId });
-		},
-		isLoading: false,
-		setIsLoading: (loading: boolean): void => {
-			set({ isLoading: loading });
-		},
-		isInfiniteScrollMode: false,
-		setIsInfiniteScrollMode: (enabled: boolean): void => {
-			set({ isInfiniteScrollMode: enabled });
-		},
-		columnVisibility: {},
-		setColumnVisibility: (visibility: VisibilityState): void => {
-			set({ columnVisibility: visibility });
-		},
-	}));
-
-type TableStateStore = StoreApi<TanStackTableState>;
-
-const TanStackTableStateContext = createContext<TableStateStore | null>(null);
-
-export function TanStackTableStateProvider({
-	children,
-}: {
-	children: ReactNode;
-}): JSX.Element {
-	const storeRef = useRef<TableStateStore | null>(null);
-	if (!storeRef.current) {
-		storeRef.current = createTableStateStore();
-	}
-	return (
-		<TanStackTableStateContext.Provider value={storeRef.current}>
-			{children}
-		</TanStackTableStateContext.Provider>
-	);
-}
-
-const defaultStore = createTableStateStore();
-
-export const useIsRowHovered = (rowId: string): boolean => {
-	const store = useContext(TanStackTableStateContext);
-	const isHovered = useStore(
-		store ?? defaultStore,
-		(s) => s.hoveredRowId === rowId,
-	);
-	return store ? isHovered : false;
-};
-
-export const useSetRowHovered = (rowId: string): (() => void) => {
-	const store = useContext(TanStackTableStateContext);
-	return useCallback(() => {
-		if (store) {
-			const current = store.getState().hoveredRowId;
-			if (current !== rowId) {
-				store.getState().setHoveredRowId(rowId);
-			}
-		}
-	}, [store, rowId]);
-};
-
-export const useClearRowHovered = (rowId: string): (() => void) => {
-	const store = useContext(TanStackTableStateContext);
-	return useCallback(() => {
-		if (store) {
-			store.getState().scheduleClearHover(rowId);
-		}
-	}, [store, rowId]);
-};
-
-export const useIsTableLoading = (): boolean => {
-	const store = useContext(TanStackTableStateContext);
-	return useStore(store ?? defaultStore, (s) => s.isLoading);
-};
-
-export const useSetTableLoading = (): ((loading: boolean) => void) => {
-	const store = useContext(TanStackTableStateContext);
-	return useCallback(
-		(loading: boolean) => {
-			if (store) {
-				store.getState().setIsLoading(loading);
-			}
-		},
-		[store],
-	);
-};
-
-export function TableLoadingSync({
-	isLoading,
-	isInfiniteScrollMode,
-}: {
-	isLoading: boolean;
-	isInfiniteScrollMode: boolean;
-}): null {
-	const store = useContext(TanStackTableStateContext);
-
-	// Sync on mount and when props change
-	useEffect(() => {
-		if (store) {
-			store.getState().setIsLoading(isLoading);
-			store.getState().setIsInfiniteScrollMode(isInfiniteScrollMode);
-		}
-	}, [isLoading, isInfiniteScrollMode, store]);
-
-	return null;
-}
-
-export const useShouldShowCellSkeleton = (): boolean => {
-	const store = useContext(TanStackTableStateContext);
-	return useStore(
-		store ?? defaultStore,
-		(s) => s.isLoading && !s.isInfiniteScrollMode,
-	);
-};
-
-export const useColumnVisibility = (): VisibilityState => {
-	const store = useContext(TanStackTableStateContext);
-	return useStore(store ?? defaultStore, (s) => s.columnVisibility);
-};
-
-export const useIsColumnVisible = (columnId: string): boolean => {
-	const store = useContext(TanStackTableStateContext);
-	return useStore(
-		store ?? defaultStore,
-		(s) => s.columnVisibility[columnId] !== false,
-	);
-};
-
-export const useSetColumnVisibility = (): ((
-	visibility: VisibilityState,
-) => void) => {
-	const store = useContext(TanStackTableStateContext);
-	return useCallback(
-		(visibility: VisibilityState) => {
-			if (store) {
-				store.getState().setColumnVisibility(visibility);
-			}
-		},
-		[store],
-	);
-};
-
-export function ColumnVisibilitySync({
-	visibility,
-}: {
-	visibility: VisibilityState;
-}): null {
-	const setVisibility = useSetColumnVisibility();
-
-	useEffect(() => {
-		setVisibility(visibility);
-	}, [visibility, setVisibility]);
-
-	return null;
-}
-
-export default TanStackTableStateContext;

frontend/src/components/TanStackTableView/TanStackTableText.tsx

@@ -1,42 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import cx from 'classnames';
-
-import tableStyles from './TanStackTable.module.scss';
-
-type BaseProps = Omit<
-	HTMLAttributes<HTMLSpanElement>,
-	'children' | 'dangerouslySetInnerHTML'
-> & {
-	className?: string;
-};
-
-type WithChildren = BaseProps & {
-	children: ReactNode;
-	dangerouslySetInnerHTML?: never;
-};
-
-type WithDangerousHtml = BaseProps & {
-	children?: never;
-	dangerouslySetInnerHTML: { __html: string };
-};
-
-export type TanStackTableTextProps = WithChildren | WithDangerousHtml;
-
-function TanStackTableText({
-	children,
-	className,
-	dangerouslySetInnerHTML,
-	...rest
-}: TanStackTableTextProps): JSX.Element {
-	return (
-		<span
-			className={cx(tableStyles.tableCellText, className)}
-			dangerouslySetInnerHTML={dangerouslySetInnerHTML}
-			{...rest}
-		>
-			{children}
-		</span>
-	);
-}
-
-export default TanStackTableText;

frontend/src/components/TanStackTableView/TanStackTableView.module.scss

@@ -1,152 +0,0 @@
-.tanstackTableViewWrapper {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	width: 100%;
-	position: relative;
-	min-height: 0;
-}
-
-.tanstackFixedCol {
-	width: 32px;
-	min-width: 32px;
-	max-width: 32px;
-}
-
-.tanstackFillerCol {
-	width: 100%;
-	min-width: 0;
-}
-
-.tanstackActionsCol {
-	width: 0;
-	min-width: 0;
-	max-width: 0;
-}
-
-.tanstackLoadMoreContainer {
-	width: 100%;
-	min-height: 56px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 8px 0 12px;
-	flex-shrink: 0;
-}
-
-.tanstackTableVirtuoso {
-	width: 100%;
-	overflow-x: auto;
-}
-
-.tanstackTableFootLoaderCell {
-	text-align: center;
-	padding: 8px 0;
-}
-
-.tanstackTableVirtuosoScroll {
-	flex: 1;
-	width: 100%;
-	overflow-x: auto;
-	scrollbar-width: thin;
-	scrollbar-color: var(--bg-slate-300) transparent;
-
-	&::-webkit-scrollbar {
-		width: 4px;
-		height: 4px;
-	}
-
-	&::-webkit-scrollbar-corner {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--bg-slate-300);
-		border-radius: 9999px;
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-slate-200);
-	}
-
-	&.cellTypographySmall {
-		--tanstack-plain-cell-font-size: 11px;
-		--tanstack-plain-cell-line-height: 16px;
-
-		:global(table tr td),
-		:global(table thead th) {
-			font-size: 11px;
-			line-height: 16px;
-			letter-spacing: -0.07px;
-		}
-	}
-
-	&.cellTypographyMedium {
-		--tanstack-plain-cell-font-size: 13px;
-		--tanstack-plain-cell-line-height: 20px;
-
-		:global(table tr td),
-		:global(table thead th) {
-			font-size: 13px;
-			line-height: 20px;
-			letter-spacing: -0.07px;
-		}
-	}
-
-	&.cellTypographyLarge {
-		--tanstack-plain-cell-font-size: 14px;
-		--tanstack-plain-cell-line-height: 24px;
-
-		:global(table tr td),
-		:global(table thead th) {
-			font-size: 14px;
-			line-height: 24px;
-			letter-spacing: -0.07px;
-		}
-	}
-}
-
-.paginationContainer {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 12px;
-	margin-top: 12px;
-}
-
-.paginationPageSize {
-	width: 80px;
-	--combobox-trigger-height: 2rem;
-}
-
-.tanstackLoadingOverlay {
-	position: absolute;
-	left: 50%;
-	bottom: 2rem;
-	transform: translateX(-50%);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	pointer-events: none;
-	z-index: 3;
-	border-radius: 8px;
-	padding: 8px 16px;
-	background: var(--l1-background);
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-:global(.lightMode) .tanstackTableVirtuosoScroll {
-	scrollbar-color: var(--bg-vanilla-300) transparent;
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--bg-vanilla-300);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-vanilla-100);
-	}
-}

frontend/src/components/TanStackTableView/VirtuosoTableColGroup.tsx

@@ -1,35 +0,0 @@
-import type { Table } from '@tanstack/react-table';
-
-import type { TableColumnDef } from './types';
-import { getColumnWidthStyle } from './utils';
-
-export function VirtuosoTableColGroup<TData>({
-	columns,
-	table,
-}: {
-	columns: TableColumnDef<TData>[];
-	table: Table<TData>;
-}): JSX.Element {
-	const visibleTanstackColumns = table.getVisibleFlatColumns();
-	const columnDefsById = new Map(columns.map((c) => [c.id, c]));
-	const columnSizing = table.getState().columnSizing;
-
-	return (
-		<colgroup>
-			{visibleTanstackColumns.map((tanstackCol, index) => {
-				const colDef = columnDefsById.get(tanstackCol.id);
-				if (!colDef) {
-					return <col key={tanstackCol.id} />;
-				}
-				const persistedWidth = columnSizing[tanstackCol.id];
-				const isLastColumn = index === visibleTanstackColumns.length - 1;
-				return (
-					<col
-						key={tanstackCol.id}
-						style={getColumnWidthStyle(colDef, persistedWidth, isLastColumn)}
-					/>
-				);
-			})}
-		</colgroup>
-	);
-}

frontend/src/components/TanStackTableView/__tests__/TanStackCustomTableRow.test.tsx

@@ -1,253 +0,0 @@
-jest.mock('../TanStackTable.module.scss', () => ({
-	__esModule: true,
-	default: {
-		tableRow: 'tableRow',
-		tableRowActive: 'tableRowActive',
-		tableRowExpansion: 'tableRowExpansion',
-	},
-}));
-
-jest.mock('../TanStackRow', () => ({
-	__esModule: true,
-	default: (): JSX.Element => (
-		<td data-testid="mocked-row-cells">mocked cells</td>
-	),
-}));
-
-const mockSetRowHovered = jest.fn();
-const mockClearRowHovered = jest.fn();
-
-jest.mock('../TanStackTableStateContext', () => ({
-	useSetRowHovered: (_rowId: string): (() => void) => mockSetRowHovered,
-	useClearRowHovered: (_rowId: string): (() => void) => mockClearRowHovered,
-}));
-
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import TanStackCustomTableRow from '../TanStackCustomTableRow';
-import type { FlatItem, TableRowContext } from '../types';
-
-const makeItem = (id: string): FlatItem<{ id: string }> => ({
-	kind: 'row',
-	row: { original: { id }, id } as never,
-});
-
-const virtuosoAttrs = {
-	'data-index': 0,
-	'data-item-index': 0,
-	'data-known-size': 40,
-} as const;
-
-const baseContext: TableRowContext<{ id: string }> = {
-	colCount: 1,
-	hasSingleColumn: false,
-	columnOrderKey: 'col1',
-	columnVisibilityKey: 'col1',
-};
-
-describe('TanStackCustomTableRow', () => {
-	beforeEach(() => {
-		mockSetRowHovered.mockClear();
-		mockClearRowHovered.mockClear();
-	});
-
-	it('renders cells via TanStackRowCells', async () => {
-		render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoAttrs}
-						item={makeItem('1')}
-						context={baseContext}
-					/>
-				</tbody>
-			</table>,
-		);
-		expect(await screen.findByTestId('mocked-row-cells')).toBeInTheDocument();
-	});
-
-	it('applies active class when isRowActive returns true', () => {
-		const ctx: TableRowContext<{ id: string }> = {
-			...baseContext,
-			isRowActive: (row) => row.id === '1',
-		};
-		const { container } = render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoAttrs}
-						item={makeItem('1')}
-						context={ctx}
-					/>
-				</tbody>
-			</table>,
-		);
-		expect(container.querySelector('tr')).toHaveClass('tableRowActive');
-	});
-
-	it('does not apply active class when isRowActive returns false', () => {
-		const ctx: TableRowContext<{ id: string }> = {
-			...baseContext,
-			isRowActive: (row) => row.id === 'other',
-		};
-		const { container } = render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoAttrs}
-						item={makeItem('1')}
-						context={ctx}
-					/>
-				</tbody>
-			</table>,
-		);
-		expect(container.querySelector('tr')).not.toHaveClass('tableRowActive');
-	});
-
-	it('renders expansion row with expansion class', () => {
-		const item: FlatItem<{ id: string }> = {
-			kind: 'expansion',
-			row: { original: { id: '1' }, id: '1' } as never,
-		};
-		const { container } = render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoAttrs}
-						item={item}
-						context={baseContext}
-					/>
-				</tbody>
-			</table>,
-		);
-		expect(container.querySelector('tr')).toHaveClass('tableRowExpansion');
-	});
-
-	describe('hover state management', () => {
-		it('calls setRowHovered on mouse enter', () => {
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={baseContext}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			fireEvent.mouseEnter(row);
-			expect(mockSetRowHovered).toHaveBeenCalled();
-		});
-
-		it('calls clearRowHovered on mouse leave', () => {
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={baseContext}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			fireEvent.mouseLeave(row);
-			expect(mockClearRowHovered).toHaveBeenCalled();
-		});
-	});
-
-	describe('virtuoso integration', () => {
-		it('forwards data-index attribute to tr element', () => {
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={baseContext}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			expect(row).toHaveAttribute('data-index', '0');
-		});
-
-		it('forwards data-item-index attribute to tr element', () => {
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={baseContext}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			expect(row).toHaveAttribute('data-item-index', '0');
-		});
-
-		it('forwards data-known-size attribute to tr element', () => {
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={baseContext}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			expect(row).toHaveAttribute('data-known-size', '40');
-		});
-	});
-
-	describe('row interaction', () => {
-		it('applies custom style from getRowStyle in context', () => {
-			const ctx: TableRowContext<{ id: string }> = {
-				...baseContext,
-				getRowStyle: () => ({ backgroundColor: 'red' }),
-			};
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={ctx}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			expect(row).toHaveStyle({ backgroundColor: 'red' });
-		});
-
-		it('applies custom className from getRowClassName in context', () => {
-			const ctx: TableRowContext<{ id: string }> = {
-				...baseContext,
-				getRowClassName: () => 'custom-row-class',
-			};
-			const { container } = render(
-				<table>
-					<tbody>
-						<TanStackCustomTableRow
-							{...virtuosoAttrs}
-							item={makeItem('1')}
-							context={ctx}
-						/>
-					</tbody>
-				</table>,
-			);
-			const row = container.querySelector('tr')!;
-			expect(row).toHaveClass('custom-row-class');
-		});
-	});
-});

frontend/src/components/TanStackTableView/__tests__/TanStackHeaderRow.test.tsx

@@ -1,368 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import TanStackHeaderRow from '../TanStackHeaderRow';
-import type { TableColumnDef } from '../types';
-
-jest.mock('@dnd-kit/sortable', () => ({
-	useSortable: (): any => ({
-		attributes: {},
-		listeners: {},
-		setNodeRef: jest.fn(),
-		setActivatorNodeRef: jest.fn(),
-		transform: null,
-		transition: null,
-		isDragging: false,
-	}),
-}));
-
-const col = (
-	id: string,
-	overrides?: Partial<TableColumnDef<unknown>>,
-): TableColumnDef<unknown> => ({
-	id,
-	header: id,
-	cell: (): null => null,
-	...overrides,
-});
-
-const header = {
-	id: 'col',
-	column: {
-		getCanResize: () => true,
-		getIsResizing: () => false,
-		columnDef: { header: 'col' },
-	},
-	getResizeHandler: () => jest.fn(),
-	getContext: () => ({}),
-} as never;
-
-describe('TanStackHeaderRow', () => {
-	it('renders column title', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={col('timestamp', { header: 'timestamp' })}
-							header={header}
-							isDarkMode={false}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-		expect(screen.getByTitle('Timestamp')).toBeInTheDocument();
-	});
-
-	it('shows grip icon when enableMove is not false and pin is not set', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={col('body')}
-							header={header}
-							isDarkMode={false}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-		expect(
-			screen.getByRole('button', { name: /drag body/i }),
-		).toBeInTheDocument();
-	});
-
-	it('does NOT show grip icon when pin is set', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={col('indicator', { pin: 'left' })}
-							header={header}
-							isDarkMode={false}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-		expect(
-			screen.queryByRole('button', { name: /drag/i }),
-		).not.toBeInTheDocument();
-	});
-
-	it('shows remove button when enableRemove and canRemoveColumn are true', async () => {
-		const user = userEvent.setup();
-		const onRemoveColumn = jest.fn();
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={col('name', { enableRemove: true })}
-							header={header}
-							isDarkMode={false}
-							hasSingleColumn={false}
-							canRemoveColumn
-							onRemoveColumn={onRemoveColumn}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-		await user.click(screen.getByRole('button', { name: /column actions/i }));
-		await user.click(await screen.findByText(/remove column/i));
-		expect(onRemoveColumn).toHaveBeenCalledWith('name');
-	});
-
-	it('does NOT show remove button when enableRemove is absent', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={col('name')}
-							header={header}
-							isDarkMode={false}
-							hasSingleColumn={false}
-							canRemoveColumn
-							onRemoveColumn={jest.fn()}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-		expect(
-			screen.queryByRole('button', { name: /column actions/i }),
-		).not.toBeInTheDocument();
-	});
-
-	describe('sorting', () => {
-		const sortableCol = col('sortable', { enableSort: true, header: 'Sortable' });
-		const sortableHeader = {
-			id: 'sortable',
-			column: {
-				id: 'sortable',
-				getCanResize: (): boolean => true,
-				getIsResizing: (): boolean => false,
-				columnDef: { header: 'Sortable', enableSort: true },
-			},
-			getResizeHandler: (): jest.Mock => jest.fn(),
-			getContext: (): Record<string, unknown> => ({}),
-		} as never;
-
-		it('calls onSort with asc when clicking unsorted column', async () => {
-			const user = userEvent.setup();
-			const onSort = jest.fn();
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={sortableCol}
-								header={sortableHeader}
-								isDarkMode={false}
-								hasSingleColumn={false}
-								onSort={onSort}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			// Sort button uses the column header as title
-			const sortButton = screen.getByTitle('Sortable');
-			await user.click(sortButton);
-			expect(onSort).toHaveBeenCalledWith({
-				columnName: 'sortable',
-				order: 'asc',
-			});
-		});
-
-		it('calls onSort with desc when clicking asc-sorted column', async () => {
-			const user = userEvent.setup();
-			const onSort = jest.fn();
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={sortableCol}
-								header={sortableHeader}
-								isDarkMode={false}
-								hasSingleColumn={false}
-								onSort={onSort}
-								orderBy={{ columnName: 'sortable', order: 'asc' }}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			const sortButton = screen.getByTitle('Sortable');
-			await user.click(sortButton);
-			expect(onSort).toHaveBeenCalledWith({
-				columnName: 'sortable',
-				order: 'desc',
-			});
-		});
-
-		it('calls onSort with null when clicking desc-sorted column', async () => {
-			const user = userEvent.setup();
-			const onSort = jest.fn();
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={sortableCol}
-								header={sortableHeader}
-								isDarkMode={false}
-								hasSingleColumn={false}
-								onSort={onSort}
-								orderBy={{ columnName: 'sortable', order: 'desc' }}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			const sortButton = screen.getByTitle('Sortable');
-			await user.click(sortButton);
-			expect(onSort).toHaveBeenCalledWith(null);
-		});
-
-		it('shows ascending indicator when orderBy matches column with asc', () => {
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={sortableCol}
-								header={sortableHeader}
-								isDarkMode={false}
-								hasSingleColumn={false}
-								onSort={jest.fn()}
-								orderBy={{ columnName: 'sortable', order: 'asc' }}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			const sortButton = screen.getByTitle('Sortable');
-			expect(sortButton).toHaveAttribute('aria-sort', 'ascending');
-		});
-
-		it('shows descending indicator when orderBy matches column with desc', () => {
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={sortableCol}
-								header={sortableHeader}
-								isDarkMode={false}
-								hasSingleColumn={false}
-								onSort={jest.fn()}
-								orderBy={{ columnName: 'sortable', order: 'desc' }}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			const sortButton = screen.getByTitle('Sortable');
-			expect(sortButton).toHaveAttribute('aria-sort', 'descending');
-		});
-
-		it('does not show sort button when enableSort is false', () => {
-			const nonSortableCol = col('nonsort', {
-				enableSort: false,
-				header: 'Nonsort',
-			});
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={nonSortableCol}
-								header={header}
-								isDarkMode={false}
-								hasSingleColumn={false}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			// When enableSort is false, the header text is rendered as a span, not a button
-			// The title 'Nonsort' exists on the span, not on a button
-			const titleElement = screen.getByTitle('Nonsort');
-			expect(titleElement.tagName.toLowerCase()).not.toBe('button');
-		});
-	});
-
-	describe('resizing', () => {
-		it('shows resize handle when enableResize is not false', () => {
-			const resizableCol = col('resizable', { enableResize: true });
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={resizableCol}
-								header={header}
-								isDarkMode={false}
-								hasSingleColumn={false}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			// Resize handle has title "Drag to resize column"
-			expect(screen.getByTitle('Drag to resize column')).toBeInTheDocument();
-		});
-
-		it('hides resize handle when enableResize is false', () => {
-			const nonResizableCol = col('noresize', { enableResize: false });
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={nonResizableCol}
-								header={header}
-								isDarkMode={false}
-								hasSingleColumn={false}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			expect(screen.queryByTitle('Drag to resize column')).not.toBeInTheDocument();
-		});
-	});
-
-	describe('column movement', () => {
-		it('does not show grip when enableMove is false', () => {
-			const noMoveCol = col('nomove', { enableMove: false });
-			render(
-				<table>
-					<thead>
-						<tr>
-							<TanStackHeaderRow
-								column={noMoveCol}
-								header={header}
-								isDarkMode={false}
-								hasSingleColumn={false}
-							/>
-						</tr>
-					</thead>
-				</table>,
-			);
-			expect(
-				screen.queryByRole('button', { name: /drag/i }),
-			).not.toBeInTheDocument();
-		});
-	});
-});

frontend/src/components/TanStackTableView/__tests__/TanStackRow.test.tsx

@@ -1,288 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import TanStackRowCells from '../TanStackRow';
-import type { TableRowContext } from '../types';
-
-const flexRenderMock = jest.fn((def: unknown) =>
-	typeof def === 'function' ? def({}) : def,
-);
-jest.mock('@tanstack/react-table', () => ({
-	flexRender: (def: unknown, _ctx?: unknown): unknown => flexRenderMock(def),
-}));
-
-type Row = { id: string };
-
-function buildMockRow(
-	cells: { id: string }[],
-	rowData: Row = { id: 'r1' },
-): Parameters<typeof TanStackRowCells>[0]['row'] {
-	return {
-		original: rowData,
-		getVisibleCells: () =>
-			cells.map((c, i) => ({
-				id: `cell-${i}`,
-				column: {
-					id: c.id,
-					columnDef: { cell: (): string => `content-${c.id}` },
-				},
-				getContext: (): Record<string, unknown> => ({}),
-				getValue: (): string => `content-${c.id}`,
-			})),
-	} as never;
-}
-
-describe('TanStackRowCells', () => {
-	beforeEach(() => flexRenderMock.mockClear());
-
-	it('renders a cell per visible column', () => {
-		const row = buildMockRow([{ id: 'col-a' }, { id: 'col-b' }]);
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells<Row>
-							row={row as never}
-							context={undefined}
-							itemKind="row"
-							hasSingleColumn={false}
-							columnOrderKey=""
-							columnVisibilityKey=""
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-		expect(screen.getAllByRole('cell')).toHaveLength(2);
-	});
-
-	it('calls onRowClick when a cell is clicked', async () => {
-		const user = userEvent.setup();
-		const onRowClick = jest.fn();
-		const ctx: TableRowContext<Row> = {
-			colCount: 1,
-			onRowClick,
-			hasSingleColumn: false,
-			columnOrderKey: '',
-			columnVisibilityKey: '',
-		};
-		const row = buildMockRow([{ id: 'body' }]);
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells<Row>
-							row={row as never}
-							context={ctx}
-							itemKind="row"
-							hasSingleColumn={false}
-							columnOrderKey=""
-							columnVisibilityKey=""
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-		await user.click(screen.getAllByRole('cell')[0]);
-		// onRowClick receives (rowData, itemKey) - itemKey is empty when getRowKeyData not provided
-		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '');
-	});
-
-	it('calls onRowDeactivate instead of onRowClick when row is active', async () => {
-		const user = userEvent.setup();
-		const onRowClick = jest.fn();
-		const onRowDeactivate = jest.fn();
-		const ctx: TableRowContext<Row> = {
-			colCount: 1,
-			onRowClick,
-			onRowDeactivate,
-			isRowActive: () => true,
-			hasSingleColumn: false,
-			columnOrderKey: '',
-			columnVisibilityKey: '',
-		};
-		const row = buildMockRow([{ id: 'body' }]);
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells<Row>
-							row={row as never}
-							context={ctx}
-							itemKind="row"
-							hasSingleColumn={false}
-							columnOrderKey=""
-							columnVisibilityKey=""
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowDeactivate).toHaveBeenCalled();
-		expect(onRowClick).not.toHaveBeenCalled();
-	});
-
-	it('does not render renderRowActions before hover', () => {
-		const ctx: TableRowContext<Row> = {
-			colCount: 1,
-			renderRowActions: () => <button type="button">action</button>,
-			hasSingleColumn: false,
-			columnOrderKey: '',
-			columnVisibilityKey: '',
-		};
-		const row = buildMockRow([{ id: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells<Row>
-							row={row as never}
-							context={ctx}
-							itemKind="row"
-							hasSingleColumn={false}
-							columnOrderKey=""
-							columnVisibilityKey=""
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-		// Row actions are not rendered until hover (useIsRowHovered returns false by default)
-		expect(
-			screen.queryByRole('button', { name: 'action' }),
-		).not.toBeInTheDocument();
-	});
-
-	it('renders expansion cell with renderExpandedRow content', async () => {
-		const row = {
-			original: { id: 'r1' },
-			getVisibleCells: () => [],
-		} as never;
-		const ctx: TableRowContext<Row> = {
-			colCount: 3,
-			renderExpandedRow: (r) => <div>expanded-{r.id}</div>,
-			hasSingleColumn: false,
-			columnOrderKey: '',
-			columnVisibilityKey: '',
-		};
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells<Row>
-							row={row as never}
-							context={ctx}
-							itemKind="expansion"
-							hasSingleColumn={false}
-							columnOrderKey=""
-							columnVisibilityKey=""
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-		expect(await screen.findByText('expanded-r1')).toBeInTheDocument();
-	});
-
-	describe('new tab click', () => {
-		it('calls onRowClickNewTab on ctrl+click', () => {
-			const onRowClick = jest.fn();
-			const onRowClickNewTab = jest.fn();
-			const ctx: TableRowContext<Row> = {
-				colCount: 1,
-				onRowClick,
-				onRowClickNewTab,
-				hasSingleColumn: false,
-				columnOrderKey: '',
-				columnVisibilityKey: '',
-			};
-			const row = buildMockRow([{ id: 'body' }]);
-			render(
-				<table>
-					<tbody>
-						<tr>
-							<TanStackRowCells<Row>
-								row={row as never}
-								context={ctx}
-								itemKind="row"
-								hasSingleColumn={false}
-								columnOrderKey=""
-								columnVisibilityKey=""
-							/>
-						</tr>
-					</tbody>
-				</table>,
-			);
-			fireEvent.click(screen.getAllByRole('cell')[0], { ctrlKey: true });
-			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, '');
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-
-		it('calls onRowClickNewTab on meta+click (cmd)', () => {
-			const onRowClick = jest.fn();
-			const onRowClickNewTab = jest.fn();
-			const ctx: TableRowContext<Row> = {
-				colCount: 1,
-				onRowClick,
-				onRowClickNewTab,
-				hasSingleColumn: false,
-				columnOrderKey: '',
-				columnVisibilityKey: '',
-			};
-			const row = buildMockRow([{ id: 'body' }]);
-			render(
-				<table>
-					<tbody>
-						<tr>
-							<TanStackRowCells<Row>
-								row={row as never}
-								context={ctx}
-								itemKind="row"
-								hasSingleColumn={false}
-								columnOrderKey=""
-								columnVisibilityKey=""
-							/>
-						</tr>
-					</tbody>
-				</table>,
-			);
-			fireEvent.click(screen.getAllByRole('cell')[0], { metaKey: true });
-			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, '');
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-
-		it('does not call onRowClick when modifier key is pressed', () => {
-			const onRowClick = jest.fn();
-			const onRowClickNewTab = jest.fn();
-			const ctx: TableRowContext<Row> = {
-				colCount: 1,
-				onRowClick,
-				onRowClickNewTab,
-				hasSingleColumn: false,
-				columnOrderKey: '',
-				columnVisibilityKey: '',
-			};
-			const row = buildMockRow([{ id: 'body' }]);
-			render(
-				<table>
-					<tbody>
-						<tr>
-							<TanStackRowCells<Row>
-								row={row as never}
-								context={ctx}
-								itemKind="row"
-								hasSingleColumn={false}
-								columnOrderKey=""
-								columnVisibilityKey=""
-							/>
-						</tr>
-					</tbody>
-				</table>,
-			);
-			fireEvent.click(screen.getAllByRole('cell')[0], { ctrlKey: true });
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-	});
-});

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

@@ -1,440 +0,0 @@
-import { fireEvent, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { UrlUpdateEvent } from 'nuqs/adapters/testing';
-
-import { renderTanStackTable } from './testUtils';
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('../TanStackTable.module.scss', () => ({
-	__esModule: true,
-	default: {
-		tanStackTable: 'tanStackTable',
-		tableRow: 'tableRow',
-		tableRowActive: 'tableRowActive',
-		tableRowExpansion: 'tableRowExpansion',
-		tableCell: 'tableCell',
-		tableCellExpansion: 'tableCellExpansion',
-		tableHeaderCell: 'tableHeaderCell',
-		tableCellText: 'tableCellText',
-		tableViewRowActions: 'tableViewRowActions',
-	},
-}));
-
-describe('TanStackTableView Integration', () => {
-	describe('rendering', () => {
-		it('renders all data rows', async () => {
-			renderTanStackTable({});
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-				expect(screen.getByText('Item 2')).toBeInTheDocument();
-				expect(screen.getByText('Item 3')).toBeInTheDocument();
-			});
-		});
-
-		it('renders column headers', async () => {
-			renderTanStackTable({});
-			await waitFor(() => {
-				expect(screen.getByText('ID')).toBeInTheDocument();
-				expect(screen.getByText('Name')).toBeInTheDocument();
-				expect(screen.getByText('Value')).toBeInTheDocument();
-			});
-		});
-
-		it('renders empty state when data is empty and not loading', async () => {
-			renderTanStackTable({
-				props: { data: [], isLoading: false },
-			});
-			// Table should still render but with no data rows
-			await waitFor(() => {
-				expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
-			});
-		});
-
-		it('renders table structure when loading with no previous data', async () => {
-			renderTanStackTable({
-				props: { data: [], isLoading: true },
-			});
-			// Table should render with skeleton rows
-			await waitFor(() => {
-				expect(screen.getByRole('table')).toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('loading states', () => {
-		it('keeps table mounted when loading with no data', () => {
-			renderTanStackTable({
-				props: { data: [], isLoading: true },
-			});
-			// Table should still be in the DOM for skeleton rows
-			expect(screen.getByRole('table')).toBeInTheDocument();
-		});
-
-		it('shows loading spinner for infinite scroll when loading', () => {
-			renderTanStackTable({
-				props: { isLoading: true, onEndReached: jest.fn() },
-			});
-			expect(screen.getByTestId('tanstack-infinite-loader')).toBeInTheDocument();
-		});
-
-		it('does not show loading spinner for infinite scroll when not loading', () => {
-			renderTanStackTable({
-				props: { isLoading: false, onEndReached: jest.fn() },
-			});
-			expect(
-				screen.queryByTestId('tanstack-infinite-loader'),
-			).not.toBeInTheDocument();
-		});
-
-		it('does not show loading spinner when not in infinite scroll mode', () => {
-			renderTanStackTable({
-				props: { isLoading: true },
-			});
-			expect(
-				screen.queryByTestId('tanstack-infinite-loader'),
-			).not.toBeInTheDocument();
-		});
-	});
-
-	describe('pagination', () => {
-		it('renders pagination when pagination prop is provided', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100, defaultPage: 1, defaultLimit: 10 },
-				},
-			});
-			await waitFor(() => {
-				// Look for pagination navigation or page number text
-				expect(screen.getByRole('navigation')).toBeInTheDocument();
-			});
-		});
-
-		it('updates page when clicking page number', async () => {
-			const user = userEvent.setup();
-			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100, defaultPage: 1, defaultLimit: 10 },
-					enableQueryParams: true,
-				},
-				onUrlUpdate,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByRole('navigation')).toBeInTheDocument();
-			});
-
-			// Find page 2 button/link within pagination navigation
-			const nav = screen.getByRole('navigation');
-			const page2 = Array.from(nav.querySelectorAll('button')).find(
-				(btn) => btn.textContent?.trim() === '2',
-			);
-			if (!page2) {
-				throw new Error('Page 2 button not found in pagination');
-			}
-			await user.click(page2);
-
-			await waitFor(() => {
-				const lastPage = onUrlUpdate.mock.calls
-					.map((call) => call[0].searchParams.get('page'))
-					.filter(Boolean)
-					.pop();
-				expect(lastPage).toBe('2');
-			});
-		});
-
-		it('does not render pagination in infinite scroll mode', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100 },
-					onEndReached: jest.fn(), // This enables infinite scroll mode
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Pagination should not be visible in infinite scroll mode
-			expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
-		});
-
-		it('renders prefixPaginationContent before pagination', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100 },
-					prefixPaginationContent: <span data-testid="prefix-content">Prefix</span>,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByTestId('prefix-content')).toBeInTheDocument();
-			});
-		});
-
-		it('renders suffixPaginationContent after pagination', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100 },
-					suffixPaginationContent: <span data-testid="suffix-content">Suffix</span>,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByTestId('suffix-content')).toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('sorting', () => {
-		it('updates orderBy URL param when clicking sortable header', async () => {
-			const user = userEvent.setup();
-			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-
-			renderTanStackTable({
-				props: { enableQueryParams: true },
-				onUrlUpdate,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Find the sortable column header's sort button (ID column has enableSort: true)
-			const sortButton = screen.getByTitle('ID');
-			await user.click(sortButton);
-
-			await waitFor(() => {
-				const lastOrderBy = onUrlUpdate.mock.calls
-					.map((call) => call[0].searchParams.get('order_by'))
-					.filter(Boolean)
-					.pop();
-				expect(lastOrderBy).toBeDefined();
-				const parsed = JSON.parse(lastOrderBy!);
-				expect(parsed.columnName).toBe('id');
-				expect(parsed.order).toBe('asc');
-			});
-		});
-
-		it('toggles sort order on subsequent clicks', async () => {
-			const user = userEvent.setup();
-			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-
-			renderTanStackTable({
-				props: { enableQueryParams: true },
-				onUrlUpdate,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			const sortButton = screen.getByTitle('ID');
-
-			// First click - asc
-			await user.click(sortButton);
-			// Second click - desc
-			await user.click(sortButton);
-
-			await waitFor(() => {
-				const lastOrderBy = onUrlUpdate.mock.calls
-					.map((call) => call[0].searchParams.get('order_by'))
-					.filter(Boolean)
-					.pop();
-				if (lastOrderBy) {
-					const parsed = JSON.parse(lastOrderBy);
-					expect(parsed.order).toBe('desc');
-				}
-			});
-		});
-	});
-
-	describe('row selection', () => {
-		it('calls onRowClick with row data and itemKey', async () => {
-			const user = userEvent.setup();
-			const onRowClick = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					onRowClick,
-					getRowKey: (row) => row.id,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			await user.click(screen.getByText('Item 1'));
-
-			expect(onRowClick).toHaveBeenCalledWith(
-				expect.objectContaining({ id: '1', name: 'Item 1' }),
-				'1',
-			);
-		});
-
-		it('applies active class when isRowActive returns true', async () => {
-			renderTanStackTable({
-				props: {
-					isRowActive: (row) => row.id === '1',
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Find the row containing Item 1 and check for active class
-			const cell = screen.getByText('Item 1');
-			const row = cell.closest('tr');
-			expect(row).toHaveClass('tableRowActive');
-		});
-
-		it('calls onRowDeactivate when clicking active row', async () => {
-			const user = userEvent.setup();
-			const onRowClick = jest.fn();
-			const onRowDeactivate = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					onRowClick,
-					onRowDeactivate,
-					isRowActive: (row) => row.id === '1',
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			await user.click(screen.getByText('Item 1'));
-
-			expect(onRowDeactivate).toHaveBeenCalled();
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-
-		it('opens in new tab on ctrl+click', async () => {
-			const onRowClick = jest.fn();
-			const onRowClickNewTab = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					onRowClick,
-					onRowClickNewTab,
-					getRowKey: (row) => row.id,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			fireEvent.click(screen.getByText('Item 1'), { ctrlKey: true });
-
-			expect(onRowClickNewTab).toHaveBeenCalledWith(
-				expect.objectContaining({ id: '1' }),
-				'1',
-			);
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-
-		it('opens in new tab on meta+click', async () => {
-			const onRowClick = jest.fn();
-			const onRowClickNewTab = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					onRowClick,
-					onRowClickNewTab,
-					getRowKey: (row) => row.id,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			fireEvent.click(screen.getByText('Item 1'), { metaKey: true });
-
-			expect(onRowClickNewTab).toHaveBeenCalledWith(
-				expect.objectContaining({ id: '1' }),
-				'1',
-			);
-			expect(onRowClick).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('row expansion', () => {
-		it('renders expanded content below the row when expanded', async () => {
-			renderTanStackTable({
-				props: {
-					renderExpandedRow: (row) => (
-						<div data-testid="expanded-content">Expanded: {row.name}</div>
-					),
-					getRowCanExpand: () => true,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Find and click expand button (if available in the row)
-			// The expansion is controlled by TanStack Table's expanded state
-			// For now, just verify the renderExpandedRow prop is wired correctly
-			// by checking the table renders without errors
-			expect(screen.getByRole('table')).toBeInTheDocument();
-		});
-	});
-
-	describe('infinite scroll', () => {
-		it('calls onEndReached when provided', async () => {
-			const onEndReached = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					onEndReached,
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// Virtuoso will call onEndReached based on scroll position
-			// In mock context, we verify the prop is wired correctly
-			expect(onEndReached).toBeDefined();
-		});
-
-		it('shows loading spinner at bottom when loading in infinite scroll mode', () => {
-			renderTanStackTable({
-				props: {
-					isLoading: true,
-					onEndReached: jest.fn(),
-				},
-			});
-
-			expect(screen.getByTestId('tanstack-infinite-loader')).toBeInTheDocument();
-		});
-
-		it('hides pagination in infinite scroll mode', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100 },
-					onEndReached: jest.fn(),
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// When onEndReached is provided, pagination should not render
-			expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
-		});
-	});
-});

frontend/src/components/TanStackTableView/__tests__/testUtils.tsx

@@ -1,94 +0,0 @@
-import { ReactNode } from 'react';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { TooltipProvider } from '@signozhq/ui';
-import { render, RenderResult } from '@testing-library/react';
-import { NuqsTestingAdapter, OnUrlUpdateFunction } from 'nuqs/adapters/testing';
-
-import TanStackTable from '../index';
-import type { TableColumnDef, TanStackTableProps } from '../types';
-
-// NOTE: Test files importing this utility must add this mock at the top of their file:
-// jest.mock('hooks/useDarkMode', () => ({ useIsDarkMode: (): boolean => false }));
-
-// Default test data types
-export type TestRow = { id: string; name: string; value: number };
-
-export const defaultColumns: TableColumnDef<TestRow>[] = [
-	{
-		id: 'id',
-		header: 'ID',
-		accessorKey: 'id',
-		enableSort: true,
-		cell: ({ value }): string => String(value),
-	},
-	{
-		id: 'name',
-		header: 'Name',
-		accessorKey: 'name',
-		cell: ({ value }): string => String(value),
-	},
-	{
-		id: 'value',
-		header: 'Value',
-		accessorKey: 'value',
-		enableSort: true,
-		cell: ({ value }): string => String(value),
-	},
-];
-
-export const defaultData: TestRow[] = [
-	{ id: '1', name: 'Item 1', value: 100 },
-	{ id: '2', name: 'Item 2', value: 200 },
-	{ id: '3', name: 'Item 3', value: 300 },
-];
-
-export type RenderTanStackTableOptions<T> = {
-	props?: Partial<TanStackTableProps<T>>;
-	queryParams?: Record<string, string>;
-	onUrlUpdate?: OnUrlUpdateFunction;
-};
-
-export function renderTanStackTable<T = TestRow>(
-	options: RenderTanStackTableOptions<T> = {},
-): RenderResult {
-	const { props = {}, queryParams, onUrlUpdate } = options;
-
-	const mergedProps = {
-		data: (defaultData as unknown) as T[],
-		columns: (defaultColumns as unknown) as TableColumnDef<T>[],
-		...props,
-	} as TanStackTableProps<T>;
-
-	return render(
-		<NuqsTestingAdapter searchParams={queryParams} onUrlUpdate={onUrlUpdate}>
-			<VirtuosoMockContext.Provider
-				value={{ viewportHeight: 500, itemHeight: 50 }}
-			>
-				<TooltipProvider>
-					<TanStackTable<T> {...mergedProps} />
-				</TooltipProvider>
-			</VirtuosoMockContext.Provider>
-		</NuqsTestingAdapter>,
-	);
-}
-
-// Helper to wrap any component with test providers (for unit tests)
-export function renderWithProviders(
-	ui: ReactNode,
-	options: {
-		queryParams?: Record<string, string>;
-		onUrlUpdate?: OnUrlUpdateFunction;
-	} = {},
-): RenderResult {
-	const { queryParams, onUrlUpdate } = options;
-
-	return render(
-		<NuqsTestingAdapter searchParams={queryParams} onUrlUpdate={onUrlUpdate}>
-			<VirtuosoMockContext.Provider
-				value={{ viewportHeight: 500, itemHeight: 50 }}
-			>
-				<TooltipProvider>{ui}</TooltipProvider>
-			</VirtuosoMockContext.Provider>
-		</NuqsTestingAdapter>,
-	);
-}

frontend/src/components/TanStackTableView/__tests__/useColumnState.test.tsx

@@ -1,247 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-import { act, renderHook } from '@testing-library/react';
-
-import { TableColumnDef } from '../types';
-import { useColumnState } from '../useColumnState';
-import { useColumnStore } from '../useColumnStore';
-
-const TEST_KEY = 'test-state';
-
-type TestRow = { id: string; name: string };
-
-const col = (
-	id: string,
-	overrides: Partial<TableColumnDef<TestRow>> = {},
-): TableColumnDef<TestRow> => ({
-	id,
-	header: id,
-	cell: (): null => null,
-	...overrides,
-});
-
-describe('useColumnState', () => {
-	beforeEach(() => {
-		useColumnStore.setState({ tables: {} });
-		localStorage.clear();
-	});
-
-	describe('initialization', () => {
-		it('initializes store from column defaults on mount', () => {
-			const columns = [
-				col('a', { defaultVisibility: true }),
-				col('b', { defaultVisibility: false }),
-				col('c'),
-			];
-
-			renderHook(() => useColumnState({ storageKey: TEST_KEY, columns }));
-
-			const state = useColumnStore.getState().tables[TEST_KEY];
-			expect(state.hiddenColumnIds).toEqual(['b']);
-		});
-
-		it('does not initialize without storageKey', () => {
-			const columns = [col('a', { defaultVisibility: false })];
-
-			renderHook(() => useColumnState({ columns }));
-
-			expect(useColumnStore.getState().tables[TEST_KEY]).toBeUndefined();
-		});
-	});
-
-	describe('columnVisibility', () => {
-		it('returns visibility state from hidden columns', () => {
-			const columns = [col('a'), col('b'), col('c')];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-				useColumnStore.getState().hideColumn(TEST_KEY, 'b');
-			});
-
-			const { result } = renderHook(() =>
-				useColumnState({ storageKey: TEST_KEY, columns }),
-			);
-
-			expect(result.current.columnVisibility).toEqual({ b: false });
-		});
-
-		it('applies visibilityBehavior for grouped state', () => {
-			const columns = [
-				col('ungrouped', { visibilityBehavior: 'hidden-on-expand' }),
-				col('grouped', { visibilityBehavior: 'hidden-on-collapse' }),
-				col('always'),
-			];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-			});
-
-			// Not grouped
-			const { result: notGrouped } = renderHook(() =>
-				useColumnState({ storageKey: TEST_KEY, columns, isGrouped: false }),
-			);
-			expect(notGrouped.current.columnVisibility).toEqual({ grouped: false });
-
-			// Grouped
-			const { result: grouped } = renderHook(() =>
-				useColumnState({ storageKey: TEST_KEY, columns, isGrouped: true }),
-			);
-			expect(grouped.current.columnVisibility).toEqual({ ungrouped: false });
-		});
-
-		it('combines store hidden + visibilityBehavior', () => {
-			const columns = [
-				col('a', { visibilityBehavior: 'hidden-on-expand' }),
-				col('b'),
-			];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-				useColumnStore.getState().hideColumn(TEST_KEY, 'b');
-			});
-
-			const { result } = renderHook(() =>
-				useColumnState({ storageKey: TEST_KEY, columns, isGrouped: true }),
-			);
-
-			expect(result.current.columnVisibility).toEqual({ a: false, b: false });
-		});
-	});
-
-	describe('sortedColumns', () => {
-		it('returns columns in original order when no order set', () => {
-			const columns = [col('a'), col('b'), col('c')];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-			});
-
-			const { result } = renderHook(() =>
-				useColumnState({ storageKey: TEST_KEY, columns }),
-			);
-
-			expect(result.current.sortedColumns.map((c) => c.id)).toEqual([
-				'a',
-				'b',
-				'c',
-			]);
-		});
-
-		it('returns columns sorted by stored order', () => {
-			const columns = [col('a'), col('b'), col('c')];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-				useColumnStore.getState().setColumnOrder(TEST_KEY, ['c', 'a', 'b']);
-			});
-
-			const { result } = renderHook(() =>
-				useColumnState({ storageKey: TEST_KEY, columns }),
-			);
-
-			expect(result.current.sortedColumns.map((c) => c.id)).toEqual([
-				'c',
-				'a',
-				'b',
-			]);
-		});
-
-		it('keeps pinned columns at the start', () => {
-			const columns = [col('a'), col('pinned', { pin: 'left' }), col('b')];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-				useColumnStore.getState().setColumnOrder(TEST_KEY, ['b', 'a']);
-			});
-
-			const { result } = renderHook(() =>
-				useColumnState({ storageKey: TEST_KEY, columns }),
-			);
-
-			expect(result.current.sortedColumns.map((c) => c.id)).toEqual([
-				'pinned',
-				'b',
-				'a',
-			]);
-		});
-	});
-
-	describe('actions', () => {
-		it('hideColumn hides a column', () => {
-			const columns = [col('a'), col('b')];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-			});
-
-			const { result } = renderHook(() =>
-				useColumnState({ storageKey: TEST_KEY, columns }),
-			);
-
-			act(() => {
-				result.current.hideColumn('a');
-			});
-
-			expect(result.current.columnVisibility).toEqual({ a: false });
-		});
-
-		it('showColumn shows a column', () => {
-			const columns = [col('a', { defaultVisibility: false })];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-			});
-
-			const { result } = renderHook(() =>
-				useColumnState({ storageKey: TEST_KEY, columns }),
-			);
-
-			expect(result.current.columnVisibility).toEqual({ a: false });
-
-			act(() => {
-				result.current.showColumn('a');
-			});
-
-			expect(result.current.columnVisibility).toEqual({});
-		});
-
-		it('setColumnSizing updates sizing', () => {
-			const columns = [col('a')];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-			});
-
-			const { result } = renderHook(() =>
-				useColumnState({ storageKey: TEST_KEY, columns }),
-			);
-
-			act(() => {
-				result.current.setColumnSizing({ a: 200 });
-			});
-
-			expect(result.current.columnSizing).toEqual({ a: 200 });
-		});
-
-		it('setColumnOrder updates order from column array', () => {
-			const columns = [col('a'), col('b'), col('c')];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-			});
-
-			const { result } = renderHook(() =>
-				useColumnState({ storageKey: TEST_KEY, columns }),
-			);
-
-			act(() => {
-				result.current.setColumnOrder([col('c'), col('a'), col('b')]);
-			});
-
-			expect(result.current.sortedColumns.map((c) => c.id)).toEqual([
-				'c',
-				'a',
-				'b',
-			]);
-		});
-	});
-});

frontend/src/components/TanStackTableView/__tests__/useColumnStore.test.ts

@@ -1,296 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-import { act, renderHook } from '@testing-library/react';
-
-import {
-	useColumnOrder,
-	useColumnSizing,
-	useColumnStore,
-	useHiddenColumnIds,
-} from '../useColumnStore';
-
-const TEST_KEY = 'test-table';
-
-describe('useColumnStore', () => {
-	beforeEach(() => {
-		useColumnStore.getState().tables = {};
-		localStorage.clear();
-	});
-
-	describe('initializeFromDefaults', () => {
-		it('initializes hidden columns from defaultVisibility: false', () => {
-			const columns = [
-				{ id: 'a', defaultVisibility: true },
-				{ id: 'b', defaultVisibility: false },
-				{ id: 'c' }, // defaults to visible
-			];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns as any);
-			});
-
-			const state = useColumnStore.getState().tables[TEST_KEY];
-			expect(state.hiddenColumnIds).toEqual(['b']);
-			expect(state.columnOrder).toEqual([]);
-			expect(state.columnSizing).toEqual({});
-		});
-
-		it('does not reinitialize if already exists', () => {
-			act(() => {
-				useColumnStore
-					.getState()
-					.initializeFromDefaults(TEST_KEY, [
-						{ id: 'a', defaultVisibility: false },
-					] as any);
-				useColumnStore.getState().hideColumn(TEST_KEY, 'x');
-				useColumnStore
-					.getState()
-					.initializeFromDefaults(TEST_KEY, [
-						{ id: 'b', defaultVisibility: false },
-					] as any);
-			});
-
-			const state = useColumnStore.getState().tables[TEST_KEY];
-			expect(state.hiddenColumnIds).toContain('a');
-			expect(state.hiddenColumnIds).toContain('x');
-			expect(state.hiddenColumnIds).not.toContain('b');
-		});
-	});
-
-	describe('hideColumn / showColumn / toggleColumn', () => {
-		beforeEach(() => {
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, []);
-			});
-		});
-
-		it('hideColumn adds to hiddenColumnIds', () => {
-			act(() => {
-				useColumnStore.getState().hideColumn(TEST_KEY, 'col1');
-			});
-			expect(useColumnStore.getState().tables[TEST_KEY].hiddenColumnIds).toContain(
-				'col1',
-			);
-		});
-
-		it('hideColumn is idempotent', () => {
-			act(() => {
-				useColumnStore.getState().hideColumn(TEST_KEY, 'col1');
-				useColumnStore.getState().hideColumn(TEST_KEY, 'col1');
-			});
-			expect(
-				useColumnStore
-					.getState()
-					.tables[TEST_KEY].hiddenColumnIds.filter((id) => id === 'col1'),
-			).toHaveLength(1);
-		});
-
-		it('showColumn removes from hiddenColumnIds', () => {
-			act(() => {
-				useColumnStore.getState().hideColumn(TEST_KEY, 'col1');
-				useColumnStore.getState().showColumn(TEST_KEY, 'col1');
-			});
-			expect(
-				useColumnStore.getState().tables[TEST_KEY].hiddenColumnIds,
-			).not.toContain('col1');
-		});
-
-		it('toggleColumn toggles visibility', () => {
-			act(() => {
-				useColumnStore.getState().toggleColumn(TEST_KEY, 'col1');
-			});
-			expect(useColumnStore.getState().tables[TEST_KEY].hiddenColumnIds).toContain(
-				'col1',
-			);
-
-			act(() => {
-				useColumnStore.getState().toggleColumn(TEST_KEY, 'col1');
-			});
-			expect(
-				useColumnStore.getState().tables[TEST_KEY].hiddenColumnIds,
-			).not.toContain('col1');
-		});
-	});
-
-	describe('setColumnSizing', () => {
-		beforeEach(() => {
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, []);
-			});
-		});
-
-		it('updates column sizing', () => {
-			act(() => {
-				useColumnStore
-					.getState()
-					.setColumnSizing(TEST_KEY, { col1: 200, col2: 300 });
-			});
-			expect(useColumnStore.getState().tables[TEST_KEY].columnSizing).toEqual({
-				col1: 200,
-				col2: 300,
-			});
-		});
-	});
-
-	describe('setColumnOrder', () => {
-		beforeEach(() => {
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, []);
-			});
-		});
-
-		it('updates column order', () => {
-			act(() => {
-				useColumnStore
-					.getState()
-					.setColumnOrder(TEST_KEY, ['col2', 'col1', 'col3']);
-			});
-			expect(useColumnStore.getState().tables[TEST_KEY].columnOrder).toEqual([
-				'col2',
-				'col1',
-				'col3',
-			]);
-		});
-	});
-
-	describe('resetToDefaults', () => {
-		it('resets to column defaults', () => {
-			const columns = [
-				{ id: 'a', defaultVisibility: false },
-				{ id: 'b', defaultVisibility: true },
-			];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns as any);
-				useColumnStore.getState().showColumn(TEST_KEY, 'a');
-				useColumnStore.getState().hideColumn(TEST_KEY, 'b');
-				useColumnStore.getState().setColumnOrder(TEST_KEY, ['b', 'a']);
-				useColumnStore.getState().setColumnSizing(TEST_KEY, { a: 100 });
-			});
-
-			act(() => {
-				useColumnStore.getState().resetToDefaults(TEST_KEY, columns as any);
-			});
-
-			const state = useColumnStore.getState().tables[TEST_KEY];
-			expect(state.hiddenColumnIds).toEqual(['a']);
-			expect(state.columnOrder).toEqual([]);
-			expect(state.columnSizing).toEqual({});
-		});
-	});
-
-	describe('cleanupStaleHiddenColumns', () => {
-		it('removes hidden column IDs that are not in validColumnIds', () => {
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, []);
-				useColumnStore.getState().hideColumn(TEST_KEY, 'col1');
-				useColumnStore.getState().hideColumn(TEST_KEY, 'col2');
-				useColumnStore.getState().hideColumn(TEST_KEY, 'col3');
-			});
-
-			// Only col1 and col3 are valid now
-			act(() => {
-				useColumnStore
-					.getState()
-					.cleanupStaleHiddenColumns(TEST_KEY, new Set(['col1', 'col3']));
-			});
-
-			const state = useColumnStore.getState().tables[TEST_KEY];
-			expect(state.hiddenColumnIds).toEqual(['col1', 'col3']);
-			expect(state.hiddenColumnIds).not.toContain('col2');
-		});
-
-		it('does nothing when all hidden columns are valid', () => {
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, []);
-				useColumnStore.getState().hideColumn(TEST_KEY, 'col1');
-				useColumnStore.getState().hideColumn(TEST_KEY, 'col2');
-			});
-
-			const stateBefore = useColumnStore.getState().tables[TEST_KEY];
-			const hiddenBefore = [...stateBefore.hiddenColumnIds];
-
-			act(() => {
-				useColumnStore
-					.getState()
-					.cleanupStaleHiddenColumns(TEST_KEY, new Set(['col1', 'col2', 'col3']));
-			});
-
-			const stateAfter = useColumnStore.getState().tables[TEST_KEY];
-			expect(stateAfter.hiddenColumnIds).toEqual(hiddenBefore);
-		});
-
-		it('does nothing for unknown storage key', () => {
-			act(() => {
-				useColumnStore
-					.getState()
-					.cleanupStaleHiddenColumns('unknown-key', new Set(['col1']));
-			});
-
-			// Should not throw or create state
-			expect(useColumnStore.getState().tables['unknown-key']).toBeUndefined();
-		});
-	});
-
-	describe('selector hooks', () => {
-		it('useHiddenColumnIds returns hidden columns', () => {
-			act(() => {
-				useColumnStore
-					.getState()
-					.initializeFromDefaults(TEST_KEY, [
-						{ id: 'a', defaultVisibility: false },
-					] as any);
-			});
-
-			const { result } = renderHook(() => useHiddenColumnIds(TEST_KEY));
-			expect(result.current).toEqual(['a']);
-		});
-
-		it('useHiddenColumnIds returns a stable snapshot for persisted state', () => {
-			localStorage.setItem(
-				'@signoz/table-columns/test-table',
-				JSON.stringify({
-					hiddenColumnIds: ['persisted'],
-					columnOrder: [],
-					columnSizing: {},
-				}),
-			);
-
-			const { result, rerender } = renderHook(() => useHiddenColumnIds(TEST_KEY));
-			const firstSnapshot = result.current;
-
-			rerender();
-
-			expect(result.current).toBe(firstSnapshot);
-		});
-
-		it('useColumnSizing returns sizing', () => {
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, []);
-				useColumnStore.getState().setColumnSizing(TEST_KEY, { col1: 150 });
-			});
-
-			const { result } = renderHook(() => useColumnSizing(TEST_KEY));
-			expect(result.current).toEqual({ col1: 150 });
-		});
-
-		it('useColumnOrder returns order', () => {
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, []);
-				useColumnStore.getState().setColumnOrder(TEST_KEY, ['c', 'b', 'a']);
-			});
-
-			const { result } = renderHook(() => useColumnOrder(TEST_KEY));
-			expect(result.current).toEqual(['c', 'b', 'a']);
-		});
-
-		it('returns empty defaults for unknown storageKey', () => {
-			const { result: hidden } = renderHook(() => useHiddenColumnIds('unknown'));
-			const { result: sizing } = renderHook(() => useColumnSizing('unknown'));
-			const { result: order } = renderHook(() => useColumnOrder('unknown'));
-
-			expect(hidden.current).toEqual([]);
-			expect(sizing.current).toEqual({});
-			expect(order.current).toEqual([]);
-		});
-	});
-});

frontend/src/components/TanStackTableView/__tests__/useTableParams.test.tsx

@@ -1,239 +0,0 @@
-import { ReactNode } from 'react';
-import { act, renderHook } from '@testing-library/react';
-import {
-	NuqsTestingAdapter,
-	OnUrlUpdateFunction,
-	UrlUpdateEvent,
-} from 'nuqs/adapters/testing';
-
-import { useTableParams } from '../useTableParams';
-
-function createNuqsWrapper(
-	queryParams?: Record<string, string>,
-	onUrlUpdate?: OnUrlUpdateFunction,
-): ({ children }: { children: ReactNode }) => JSX.Element {
-	return function NuqsWrapper({
-		children,
-	}: {
-		children: ReactNode;
-	}): JSX.Element {
-		return (
-			<NuqsTestingAdapter
-				searchParams={queryParams}
-				onUrlUpdate={onUrlUpdate}
-				hasMemory
-			>
-				{children}
-			</NuqsTestingAdapter>
-		);
-	};
-}
-
-describe('useTableParams (local mode — enableQueryParams not set)', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	it('returns default page=1 and limit=50', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams(), { wrapper });
-		expect(result.current.page).toBe(1);
-		expect(result.current.limit).toBe(50);
-		expect(result.current.orderBy).toBeNull();
-	});
-
-	it('respects custom defaults', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(
-			() => useTableParams(undefined, { page: 2, limit: 25 }),
-			{ wrapper },
-		);
-		expect(result.current.page).toBe(2);
-		expect(result.current.limit).toBe(25);
-	});
-
-	it('setPage updates page', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams(), { wrapper });
-		act(() => {
-			result.current.setPage(3);
-		});
-		expect(result.current.page).toBe(3);
-	});
-
-	it('setLimit updates limit', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams(), { wrapper });
-		act(() => {
-			result.current.setLimit(100);
-		});
-		expect(result.current.limit).toBe(100);
-	});
-
-	it('setOrderBy updates orderBy', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams(), { wrapper });
-		act(() => {
-			result.current.setOrderBy({ columnName: 'cpu', order: 'desc' });
-		});
-		expect(result.current.orderBy).toEqual({ columnName: 'cpu', order: 'desc' });
-	});
-});
-
-describe('useTableParams (URL mode — enableQueryParams set)', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	it('uses nuqs state when enableQueryParams=true', () => {
-		const wrapper = createNuqsWrapper();
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-		expect(result.current.page).toBe(1);
-		act(() => {
-			result.current.setPage(5);
-			jest.runAllTimers();
-		});
-		expect(result.current.page).toBe(5);
-	});
-
-	it('uses prefixed keys when enableQueryParams is a string', () => {
-		const wrapper = createNuqsWrapper({ pods_page: '2' });
-		const { result } = renderHook(() => useTableParams('pods', { page: 2 }), {
-			wrapper,
-		});
-		expect(result.current.page).toBe(2);
-		act(() => {
-			result.current.setPage(4);
-			jest.runAllTimers();
-		});
-		expect(result.current.page).toBe(4);
-	});
-
-	it('local state is ignored when enableQueryParams is set', () => {
-		const localWrapper = createNuqsWrapper();
-		const urlWrapper = createNuqsWrapper();
-		const { result: local } = renderHook(() => useTableParams(), {
-			wrapper: localWrapper,
-		});
-		const { result: url } = renderHook(() => useTableParams(true), {
-			wrapper: urlWrapper,
-		});
-		act(() => {
-			local.current.setPage(99);
-		});
-		// URL mode hook in a separate wrapper should still have its own state
-		expect(url.current.page).toBe(1);
-	});
-
-	it('reads initial page from URL params', () => {
-		const wrapper = createNuqsWrapper({ page: '3' });
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-		expect(result.current.page).toBe(3);
-	});
-
-	it('reads initial orderBy from URL params', () => {
-		const orderBy = JSON.stringify({ columnName: 'name', order: 'desc' });
-		const wrapper = createNuqsWrapper({ order_by: orderBy });
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-		expect(result.current.orderBy).toEqual({ columnName: 'name', order: 'desc' });
-	});
-
-	it('updates URL when setPage is called', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-
-		act(() => {
-			result.current.setPage(5);
-			jest.runAllTimers();
-		});
-
-		const lastPage = onUrlUpdate.mock.calls
-			.map((call) => call[0].searchParams.get('page'))
-			.filter(Boolean)
-			.pop();
-		expect(lastPage).toBe('5');
-	});
-
-	it('updates URL when setOrderBy is called', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-
-		act(() => {
-			result.current.setOrderBy({ columnName: 'value', order: 'asc' });
-			jest.runAllTimers();
-		});
-
-		const lastOrderBy = onUrlUpdate.mock.calls
-			.map((call) => call[0].searchParams.get('order_by'))
-			.filter(Boolean)
-			.pop();
-		expect(lastOrderBy).toBeDefined();
-		expect(JSON.parse(lastOrderBy!)).toEqual({
-			columnName: 'value',
-			order: 'asc',
-		});
-	});
-
-	it('uses custom param names from config object', () => {
-		const config = {
-			page: 'listPage',
-			limit: 'listLimit',
-			orderBy: 'listOrderBy',
-			expanded: 'listExpanded',
-		};
-		const wrapper = createNuqsWrapper({ listPage: '3' });
-		const { result } = renderHook(() => useTableParams(config, { page: 3 }), {
-			wrapper,
-		});
-		expect(result.current.page).toBe(3);
-	});
-
-	it('manages expanded state for row expansion', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-
-		act(() => {
-			result.current.setExpanded({ 'row-1': true });
-		});
-
-		expect(result.current.expanded).toEqual({ 'row-1': true });
-	});
-
-	it('toggles sort order correctly: null → asc → desc → null', () => {
-		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-		const wrapper = createNuqsWrapper({}, onUrlUpdate);
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
-
-		// Initial state
-		expect(result.current.orderBy).toBeNull();
-
-		// First click: null → asc
-		act(() => {
-			result.current.setOrderBy({ columnName: 'id', order: 'asc' });
-		});
-		expect(result.current.orderBy).toEqual({ columnName: 'id', order: 'asc' });
-
-		// Second click: asc → desc
-		act(() => {
-			result.current.setOrderBy({ columnName: 'id', order: 'desc' });
-		});
-		expect(result.current.orderBy).toEqual({ columnName: 'id', order: 'desc' });
-
-		// Third click: desc → null
-		act(() => {
-			result.current.setOrderBy(null);
-		});
-		expect(result.current.orderBy).toBeNull();
-	});
-});

frontend/src/components/TanStackTableView/index.tsx

@@ -1,179 +0,0 @@
-import { TanStackTableBase } from './TanStackTable';
-import TanStackTableText from './TanStackTableText';
-
-export * from './TanStackTableStateContext';
-export * from './types';
-export * from './useColumnState';
-export * from './useColumnStore';
-export * from './useTableParams';
-
-/**
- * Virtualized data table built on TanStack Table and `react-virtuoso`: resizable and pinnable columns,
- * optional drag-to-reorder headers, expandable rows, and pagination or infinite scroll.
- *
- * @example Minimal usage
- * ```tsx
- * import TanStackTable from 'components/TanStackTableView';
- * import type { TableColumnDef } from 'components/TanStackTableView';
- *
- * type Row = { id: string; name: string };
- *
- * const columns: TableColumnDef<Row>[] = [
- *   {
- *     id: 'name',
- *     header: 'Name',
- *     accessorKey: 'name',
- *     cell: ({ value }) => <TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>,
- *   },
- * ];
- *
- * function Example(): JSX.Element {
- *   return <TanStackTable<Row> data={rows} columns={columns} />;
- * }
- * ```
- *
- * @example Column definitions — `accessorFn`, custom header, pinned column, sortable
- * ```tsx
- * const columns: TableColumnDef<Row>[] = [
- *   {
- *     id: 'id',
- *     header: 'ID',
- *     accessorKey: 'id',
- *     pin: 'left',
- *     width: { min: 80, default: 120 },
- *     enableSort: true,
- *     cell: ({ value }) => <TanStackTable.Text>{String(value)}</TanStackTable.Text>,
- *   },
- *   {
- *     id: 'computed',
- *     header: () => <span>Computed</span>,
- *     accessorFn: (row) => row.first + row.last,
- *     enableMove: false,
- *     enableRemove: false,
- *     cell: ({ value }) => <TanStackTable.Text>{String(value)}</TanStackTable.Text>,
- *   },
- * ];
- * ```
- *
- * @example Column state persistence with store (recommended)
- * ```tsx
- * <TanStackTable
- *   data={data}
- *   columns={columns}
- *   columnStorageKey="my-table-columns"
- * />
- * ```
- *
- * @example Pagination with query params. Use `enableQueryParams` object to customize param names.
- * ```tsx
- * <TanStackTable
- *   data={pageRows}
- *   columns={columns}
- *   pagination={{ total: totalCount, defaultPage: 1, defaultLimit: 20 }}
- *   enableQueryParams={{
- *     page: 'listPage',
- *     limit: 'listPageSize',
- *     orderBy: 'orderBy',
- *     expanded: 'listExpanded',
- *   }}
- *   prefixPaginationContent={<span>Custom prefix</span>}
- *   suffixPaginationContent={<span>Custom suffix</span>}
- * />
- * ```
- *
- * @example Infinite scroll — use `onEndReached` (pagination UI is hidden when set).
- * ```tsx
- * <TanStackTable
- *   data={accumulatedRows}
- *   columns={columns}
- *   onEndReached={(lastIndex) => fetchMore(lastIndex)}
- *   isLoading={isFetching}
- * />
- * ```
- *
- * @example Loading state and typography for plain string/number cells
- * ```tsx
- * <TanStackTable
- *   data={data}
- *   columns={columns}
- *   isLoading={isFetching}
- *   skeletonRowCount={15}
- *   cellTypographySize="small"
- *   plainTextCellLineClamp={2}
- * />
- * ```
- *
- * @example Row styling, selection, and actions. `onRowClick` receives `(row, itemKey)`.
- * ```tsx
- * <TanStackTable
- *   data={data}
- *   columns={columns}
- *   getRowKey={(row) => row.id}
- *   getItemKey={(row) => row.id}
- *   isRowActive={(row) => row.id === selectedId}
- *   activeRowIndex={selectedIndex}
- *   onRowClick={(row, itemKey) => setSelectedId(itemKey)}
- *   onRowClickNewTab={(row, itemKey) => openInNewTab(itemKey)}
- *   onRowDeactivate={() => setSelectedId(undefined)}
- *   getRowClassName={(row) => (row.severity === 'error' ? 'row-error' : '')}
- *   getRowStyle={(row) => (row.dimmed ? { opacity: 0.5 } : {})}
- *   renderRowActions={(row) => <Button size="small">Open</Button>}
- * />
- * ```
- *
- * @example Expandable rows. `renderExpandedRow` receives `(row, rowKey, groupMeta?)`.
- * ```tsx
- * <TanStackTable
- *   data={data}
- *   columns={columns}
- *   getRowKey={(row) => row.id}
- *   renderExpandedRow={(row, rowKey, groupMeta) => (
- *     <pre>{JSON.stringify({ rowKey, groupMeta, raw: row.raw }, null, 2)}</pre>
- *   )}
- *   getRowCanExpand={(row) => Boolean(row.raw)}
- * />
- * ```
- *
- * @example Grouped rows — use `groupBy` + `getGroupKey` for group-aware key generation.
- * ```tsx
- * <TanStackTable
- *   data={data}
- *   columns={columns}
- *   getRowKey={(row) => row.id}
- *   groupBy={[{ key: 'namespace' }, { key: 'cluster' }]}
- *   getGroupKey={(row) => row.meta ?? {}}
- *   renderExpandedRow={(row, rowKey, groupMeta) => (
- *     <ExpandedDetails groupMeta={groupMeta} />
- *   )}
- *   getRowCanExpand={() => true}
- * />
- * ```
- *
- * @example Imperative handle — `goToPage` plus Virtuoso methods (e.g. `scrollToIndex`)
- * ```tsx
- * import type { TanStackTableHandle } from 'components/TanStackTableView';
- *
- * const ref = useRef<TanStackTableHandle>(null);
- *
- * <TanStackTable ref={ref} data={data} columns={columns} pagination={{ total, defaultLimit: 20 }} />;
- *
- * ref.current?.goToPage(2);
- * ref.current?.scrollToIndex({ index: 0, align: 'start' });
- * ```
- *
- * @example Scroll container props and testing
- * ```tsx
- * <TanStackTable
- *   data={data}
- *   columns={columns}
- *   className="my-table-wrapper"
- *   testId="logs-table"
- *   tableScrollerProps={{ className: 'my-table-scroll', 'data-testid': 'logs-scroller' }}
- * />
- * ```
- */
-const TanStackTable = Object.assign(TanStackTableBase, {
-	Text: TanStackTableText,
-});
-
-export default TanStackTable;

frontend/src/components/TanStackTableView/types.ts

@@ -1,191 +0,0 @@
-import {
-	CSSProperties,
-	Dispatch,
-	HTMLAttributes,
-	ReactNode,
-	SetStateAction,
-} from 'react';
-import type { TableVirtuosoHandle } from 'react-virtuoso';
-import type {
-	ColumnSizingState,
-	Row as TanStackRowType,
-} from '@tanstack/react-table';
-
-export type SortState = { columnName: string; order: 'asc' | 'desc' };
-
-/** Sets `--tanstack-plain-cell-*` on the scroll root via CSS module classes (no data attributes). */
-export type CellTypographySize = 'small' | 'medium' | 'large';
-
-export type TableCellContext<TData, TValue> = {
-	row: TData;
-	value: TValue;
-	isActive: boolean;
-	rowIndex: number;
-	isExpanded: boolean;
-	canExpand: boolean;
-	toggleExpanded: () => void;
-	/** Business/selection key for the row */
-	itemKey: string;
-	/** Group metadata when row is part of a grouped view */
-	groupMeta?: Record<string, string>;
-};
-
-export type RowKeyData = {
-	/** Final unique key (with duplicate suffix if needed) */
-	finalKey: string;
-	/** Business/selection key */
-	itemKey: string;
-	/** Group metadata */
-	groupMeta?: Record<string, string>;
-};
-
-export type TableColumnDef<
-	TData,
-	TKey extends keyof TData = any,
-	TValue = TData[TKey]
-> = {
-	id: string;
-	header: string | (() => ReactNode);
-	cell: (context: TableCellContext<TData, TValue>) => ReactNode;
-	accessorKey?: TKey;
-	accessorFn?: (row: TData) => TValue;
-	pin?: 'left' | 'right';
-	enableMove?: boolean;
-	enableResize?: boolean;
-	enableRemove?: boolean;
-	enableSort?: boolean;
-	/** Default visibility when no persisted state exists. Default: true */
-	defaultVisibility?: boolean;
-	/** Whether user can hide this column. Default: true */
-	canBeHidden?: boolean;
-	/**
-	 * Visibility behavior for grouped views:
-	 * - 'hidden-on-expand': Hide when rows are expanded (grouped view)
-	 * - 'hidden-on-collapse': Hide when rows are collapsed (ungrouped view)
-	 * - 'always-visible': Always show regardless of grouping
-	 * Default: 'always-visible'
-	 */
-	visibilityBehavior?:
-		| 'hidden-on-expand'
-		| 'hidden-on-collapse'
-		| 'always-visible';
-	width?: {
-		fixed?: number | string;
-		min?: number | string;
-		default?: number | string;
-		max?: number | string;
-	};
-};
-
-export type FlatItem<TData> =
-	| { kind: 'row'; row: TanStackRowType<TData> }
-	| { kind: 'expansion'; row: TanStackRowType<TData> };
-
-export type TableRowContext<TData> = {
-	getRowStyle?: (row: TData) => CSSProperties;
-	getRowClassName?: (row: TData) => string;
-	isRowActive?: (row: TData) => boolean;
-	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: string) => void;
-	/** Called when ctrl+click or cmd+click on a row */
-	onRowClickNewTab?: (row: TData, itemKey: string) => void;
-	onRowDeactivate?: () => void;
-	renderExpandedRow?: (
-		row: TData,
-		rowKey: string,
-		groupMeta?: Record<string, string>,
-	) => ReactNode;
-	/** Get key data for a row by index */
-	getRowKeyData?: (index: number) => RowKeyData | undefined;
-	colCount: number;
-	isDarkMode?: boolean;
-	/** When set, primitive cell output (string/number/boolean) is wrapped with typography + line-clamp (see `plainTextCellLineClamp` on the table). */
-	plainTextCellLineClamp?: number;
-	/** Whether there's only one non-pinned column that can be removed */
-	hasSingleColumn: boolean;
-	/** Column order key for memo invalidation on reorder */
-	columnOrderKey: string;
-	/** Column visibility key for memo invalidation on visibility change */
-	columnVisibilityKey: string;
-};
-
-export type PaginationProps = {
-	total: number;
-	defaultPage?: number;
-	defaultLimit?: number;
-};
-
-export type TanstackTableQueryParamsConfig = {
-	page: string;
-	limit: string;
-	orderBy: string;
-	expanded: string;
-};
-
-export type TanStackTableProps<TData> = {
-	data: TData[];
-	columns: TableColumnDef<TData>[];
-	/** Storage key for column state persistence (visibility, sizing, ordering). When set, enables unified column management. */
-	columnStorageKey?: string;
-	columnSizing?: ColumnSizingState;
-	onColumnSizingChange?: Dispatch<SetStateAction<ColumnSizingState>>;
-	onColumnOrderChange?: (cols: TableColumnDef<TData>[]) => void;
-	/** Called when a column is removed via the header menu. Use this to sync with external column preferences. */
-	onColumnRemove?: (columnId: string) => void;
-	isLoading?: boolean;
-	/** Number of skeleton rows to show when loading with no data. Default: 10 */
-	skeletonRowCount?: number;
-	enableQueryParams?: boolean | string | TanstackTableQueryParamsConfig;
-	pagination?: PaginationProps;
-	onEndReached?: (index: number) => void;
-	/** Function to get the unique key for a row (before duplicate handling).
-	 * When set, enables automatic duplicate key detection and group-aware key composition. */
-	getRowKey?: (row: TData) => string;
-	/** Function to get the business/selection key. Defaults to getRowKey result. */
-	getItemKey?: (row: TData) => string;
-	/** When set, enables group-aware key generation (prefixes rowKey with group values). */
-	groupBy?: Array<{ key: string }>;
-	/** Extract group metadata from a row. Required when groupBy is set. */
-	getGroupKey?: (row: TData) => Record<string, string>;
-	getRowStyle?: (row: TData) => CSSProperties;
-	getRowClassName?: (row: TData) => string;
-	isRowActive?: (row: TData) => boolean;
-	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: string) => void;
-	/** Called when ctrl+click or cmd+click on a row */
-	onRowClickNewTab?: (row: TData, itemKey: string) => void;
-	onRowDeactivate?: () => void;
-	activeRowIndex?: number;
-	renderExpandedRow?: (
-		row: TData,
-		rowKey: string,
-		groupMeta?: Record<string, string>,
-	) => ReactNode;
-	getRowCanExpand?: (row: TData) => boolean;
-	/**
-	 * Primitive cell values use `--tanstack-plain-cell-*` from the scroll container when `cellTypographySize` is set.
-	 */
-	plainTextCellLineClamp?: number;
-	/** Optional CSS-module typography tier for the scroll root (`--tanstack-plain-cell-font-size` / line-height + header `th`). */
-	cellTypographySize?: CellTypographySize;
-	/** Spread onto the Virtuoso scroll container. `data` is omitted — reserved by Virtuoso. */
-	tableScrollerProps?: Omit<HTMLAttributes<HTMLDivElement>, 'data'>;
-	className?: string;
-	testId?: string;
-	/** Content rendered before the pagination controls */
-	prefixPaginationContent?: ReactNode;
-	/** Content rendered after the pagination controls */
-	suffixPaginationContent?: ReactNode;
-};
-
-export type TanStackTableHandle = TableVirtuosoHandle & {
-	goToPage: (page: number) => void;
-};
-
-export type TableColumnsState<TData> = {
-	columns: TableColumnDef<TData>[];
-	columnSizing: ColumnSizingState;
-	onColumnSizingChange: Dispatch<SetStateAction<ColumnSizingState>>;
-	onColumnOrderChange: (cols: TableColumnDef<TData>[]) => void;
-	onRemoveColumn: (id: string) => void;
-};

frontend/src/components/TanStackTableView/useColumnDnd.ts

@@ -1,64 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import {
-	DragEndEvent,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from '@dnd-kit/core';
-import { arrayMove } from '@dnd-kit/sortable';
-
-import { TableColumnDef } from './types';
-
-export interface UseColumnDndOptions<TData> {
-	columns: TableColumnDef<TData>[];
-	onColumnOrderChange: (columns: TableColumnDef<TData>[]) => void;
-}
-
-export interface UseColumnDndResult {
-	sensors: ReturnType<typeof useSensors>;
-	columnIds: string[];
-	handleDragEnd: (event: DragEndEvent) => void;
-}
-
-/**
- * Sets up drag-and-drop for column reordering.
- */
-export function useColumnDnd<TData>({
-	columns,
-	onColumnOrderChange,
-}: UseColumnDndOptions<TData>): UseColumnDndResult {
-	const sensors = useSensors(
-		useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
-	);
-
-	const columnIds = useMemo(() => columns.map((c) => c.id), [columns]);
-
-	const handleDragEnd = useCallback(
-		(event: DragEndEvent): void => {
-			const { active, over } = event;
-			if (!over || active.id === over.id) {
-				return;
-			}
-			const activeCol = columns.find((c) => c.id === String(active.id));
-			const overCol = columns.find((c) => c.id === String(over.id));
-			if (
-				!activeCol ||
-				!overCol ||
-				activeCol.pin != null ||
-				overCol.pin != null ||
-				activeCol.enableMove === false
-			) {
-				return;
-			}
-			const oldIndex = columns.findIndex((c) => c.id === String(active.id));
-			const newIndex = columns.findIndex((c) => c.id === String(over.id));
-			if (oldIndex === -1 || newIndex === -1) {
-				return;
-			}
-			onColumnOrderChange(arrayMove(columns, oldIndex, newIndex));
-		},
-		[columns, onColumnOrderChange],
-	);
-
-	return { sensors, columnIds, handleDragEnd };
-}

frontend/src/components/TanStackTableView/useColumnHandlers.ts

@@ -1,76 +0,0 @@
-import type { SetStateAction } from 'react';
-import { useCallback } from 'react';
-import type { ColumnSizingState } from '@tanstack/react-table';
-
-import { TableColumnDef } from './types';
-
-export interface UseColumnHandlersOptions<TData> {
-	/** Storage key for persisting column state (enables store mode) */
-	columnStorageKey?: string;
-	effectiveSizing: ColumnSizingState;
-	storeSetSizing: (sizing: ColumnSizingState) => void;
-	storeSetOrder: (columns: TableColumnDef<TData>[]) => void;
-	hideColumn: (columnId: string) => void;
-	onColumnSizingChange?: (sizing: ColumnSizingState) => void;
-	onColumnOrderChange?: (columns: TableColumnDef<TData>[]) => void;
-	onColumnRemove?: (columnId: string) => void;
-}
-
-export interface UseColumnHandlersResult<TData> {
-	handleColumnSizingChange: (updater: SetStateAction<ColumnSizingState>) => void;
-	handleColumnOrderChange: (columns: TableColumnDef<TData>[]) => void;
-	handleRemoveColumn: (columnId: string) => void;
-}
-
-/**
- * Creates handlers for column state changes that delegate to either
- * the store (when columnStorageKey is provided) or prop callbacks.
- */
-export function useColumnHandlers<TData>({
-	columnStorageKey,
-	effectiveSizing,
-	storeSetSizing,
-	storeSetOrder,
-	hideColumn,
-	onColumnSizingChange,
-	onColumnOrderChange,
-	onColumnRemove,
-}: UseColumnHandlersOptions<TData>): UseColumnHandlersResult<TData> {
-	const handleColumnSizingChange = useCallback(
-		(updater: SetStateAction<ColumnSizingState>) => {
-			const next =
-				typeof updater === 'function' ? updater(effectiveSizing) : updater;
-			if (columnStorageKey) {
-				storeSetSizing(next);
-			}
-			onColumnSizingChange?.(next);
-		},
-		[columnStorageKey, effectiveSizing, storeSetSizing, onColumnSizingChange],
-	);
-
-	const handleColumnOrderChange = useCallback(
-		(cols: TableColumnDef<TData>[]) => {
-			if (columnStorageKey) {
-				storeSetOrder(cols);
-			}
-			onColumnOrderChange?.(cols);
-		},
-		[columnStorageKey, storeSetOrder, onColumnOrderChange],
-	);
-
-	const handleRemoveColumn = useCallback(
-		(columnId: string) => {
-			if (columnStorageKey) {
-				hideColumn(columnId);
-			}
-			onColumnRemove?.(columnId);
-		},
-		[columnStorageKey, hideColumn, onColumnRemove],
-	);
-
-	return {
-		handleColumnSizingChange,
-		handleColumnOrderChange,
-		handleRemoveColumn,
-	};
-}

frontend/src/components/TanStackTableView/useColumnState.ts

@@ -1,226 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { ColumnSizingState, VisibilityState } from '@tanstack/react-table';
-
-import { TableColumnDef } from './types';
-import {
-	cleanupStaleHiddenColumns as storeCleanupStaleHiddenColumns,
-	hideColumn as storeHideColumn,
-	initializeFromDefaults as storeInitializeFromDefaults,
-	resetToDefaults as storeResetToDefaults,
-	setColumnOrder as storeSetColumnOrder,
-	setColumnSizing as storeSetColumnSizing,
-	showColumn as storeShowColumn,
-	toggleColumn as storeToggleColumn,
-	useColumnOrder as useStoreOrder,
-	useColumnSizing as useStoreSizing,
-	useHiddenColumnIds,
-} from './useColumnStore';
-
-type UseColumnStateOptions<TData> = {
-	storageKey?: string;
-	columns: TableColumnDef<TData>[];
-	isGrouped?: boolean;
-};
-
-type UseColumnStateResult<TData> = {
-	columnVisibility: VisibilityState;
-	columnSizing: ColumnSizingState;
-	/** Columns sorted by persisted order (pinned first) */
-	sortedColumns: TableColumnDef<TData>[];
-	hiddenColumnIds: string[];
-	hideColumn: (columnId: string) => void;
-	showColumn: (columnId: string) => void;
-	toggleColumn: (columnId: string) => void;
-	setColumnSizing: (sizing: ColumnSizingState) => void;
-	setColumnOrder: (columns: TableColumnDef<TData>[]) => void;
-	resetToDefaults: () => void;
-};
-
-export function useColumnState<TData>({
-	storageKey,
-	columns,
-	isGrouped = false,
-}: UseColumnStateOptions<TData>): UseColumnStateResult<TData> {
-	useEffect(() => {
-		if (storageKey) {
-			storeInitializeFromDefaults(storageKey, columns);
-		}
-		// Only run on mount, not when columns change
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [storageKey]);
-
-	const rawHiddenColumnIds = useHiddenColumnIds(storageKey ?? '');
-
-	useEffect(
-		function cleanupHiddenColumnIdsNoLongerInDefinitions(): void {
-			if (!storageKey) {
-				return;
-			}
-
-			const validColumnIds = new Set(columns.map((c) => c.id));
-			storeCleanupStaleHiddenColumns(storageKey, validColumnIds);
-		},
-		[storageKey, columns],
-	);
-
-	const columnSizing = useStoreSizing(storageKey ?? '');
-	const prevColumnIdsRef = useRef<Set<string> | null>(null);
-
-	useEffect(
-		function autoShowNewlyAddedColumns(): void {
-			if (!storageKey) {
-				return;
-			}
-
-			const currentIds = new Set(columns.map((c) => c.id));
-
-			// Skip first render - just record the initial columns
-			if (prevColumnIdsRef.current === null) {
-				prevColumnIdsRef.current = currentIds;
-				return;
-			}
-
-			const prevIds = prevColumnIdsRef.current;
-
-			// Find columns that are new (in current but not in previous)
-			for (const id of currentIds) {
-				if (!prevIds.has(id) && rawHiddenColumnIds.includes(id)) {
-					// Column was just added and is hidden - show it
-					storeShowColumn(storageKey, id);
-				}
-			}
-
-			prevColumnIdsRef.current = currentIds;
-		},
-		[storageKey, columns, rawHiddenColumnIds],
-	);
-
-	const columnOrder = useStoreOrder(storageKey ?? '');
-	const columnMap = useMemo(() => new Map(columns.map((c) => [c.id, c])), [
-		columns,
-	]);
-
-	const hiddenColumnIds = useMemo(
-		() =>
-			rawHiddenColumnIds.filter((id) => {
-				const col = columnMap.get(id);
-				return col && col.canBeHidden !== false;
-			}),
-		[rawHiddenColumnIds, columnMap],
-	);
-
-	const columnVisibility = useMemo((): VisibilityState => {
-		const visibility: VisibilityState = {};
-
-		for (const id of hiddenColumnIds) {
-			visibility[id] = false;
-		}
-
-		for (const column of columns) {
-			if (column.visibilityBehavior === 'hidden-on-expand' && isGrouped) {
-				visibility[column.id] = false;
-			}
-			if (column.visibilityBehavior === 'hidden-on-collapse' && !isGrouped) {
-				visibility[column.id] = false;
-			}
-		}
-
-		return visibility;
-	}, [hiddenColumnIds, columns, isGrouped]);
-
-	const sortedColumns = useMemo((): TableColumnDef<TData>[] => {
-		if (columnOrder.length === 0) {
-			return columns;
-		}
-
-		const orderMap = new Map(columnOrder.map((id, i) => [id, i]));
-		const pinned = columns.filter((c) => c.pin != null);
-		const rest = columns.filter((c) => c.pin == null);
-		const sortedRest = [...rest].sort((a, b) => {
-			const ai = orderMap.get(a.id) ?? Infinity;
-			const bi = orderMap.get(b.id) ?? Infinity;
-			return ai - bi;
-		});
-
-		return [...pinned, ...sortedRest];
-	}, [columns, columnOrder]);
-
-	const hideColumn = useCallback(
-		(columnId: string) => {
-			if (!storageKey) {
-				return;
-			}
-			// Prevent hiding columns with canBeHidden: false
-			const col = columnMap.get(columnId);
-			if (col && col.canBeHidden === false) {
-				return;
-			}
-			storeHideColumn(storageKey, columnId);
-		},
-		[storageKey, columnMap],
-	);
-
-	const showColumn = useCallback(
-		(columnId: string) => {
-			if (storageKey) {
-				storeShowColumn(storageKey, columnId);
-			}
-		},
-		[storageKey],
-	);
-
-	const toggleColumn = useCallback(
-		(columnId: string) => {
-			if (!storageKey) {
-				return;
-			}
-			const col = columnMap.get(columnId);
-			const isCurrentlyHidden = hiddenColumnIds.includes(columnId);
-			if (col && col.canBeHidden === false && !isCurrentlyHidden) {
-				return;
-			}
-			storeToggleColumn(storageKey, columnId);
-		},
-		[storageKey, columnMap, hiddenColumnIds],
-	);
-
-	const setColumnSizing = useCallback(
-		(sizing: ColumnSizingState) => {
-			if (storageKey) {
-				storeSetColumnSizing(storageKey, sizing);
-			}
-		},
-		[storageKey],
-	);
-
-	const setColumnOrder = useCallback(
-		(cols: TableColumnDef<TData>[]) => {
-			if (storageKey) {
-				storeSetColumnOrder(
-					storageKey,
-					cols.map((c) => c.id),
-				);
-			}
-		},
-		[storageKey],
-	);
-
-	const resetToDefaults = useCallback(() => {
-		if (storageKey) {
-			storeResetToDefaults(storageKey, columns);
-		}
-	}, [storageKey, columns]);
-
-	return {
-		columnVisibility,
-		columnSizing,
-		sortedColumns,
-		hiddenColumnIds,
-		hideColumn,
-		showColumn,
-		toggleColumn,
-		setColumnSizing,
-		setColumnOrder,
-		resetToDefaults,
-	};
-}

frontend/src/components/TanStackTableView/useColumnStore.ts

@@ -1,328 +0,0 @@
-import { ColumnSizingState } from '@tanstack/react-table';
-import { create } from 'zustand';
-
-import { TableColumnDef } from './types';
-
-const STORAGE_PREFIX = '@signoz/table-columns/';
-
-const persistedTableCache = new Map<
-	string,
-	{ raw: string; parsed: ColumnState }
->();
-
-type ColumnState = {
-	hiddenColumnIds: string[];
-	columnOrder: string[];
-	columnSizing: ColumnSizingState;
-};
-
-const EMPTY_STATE: ColumnState = {
-	hiddenColumnIds: [],
-	columnOrder: [],
-	columnSizing: {},
-};
-
-type ColumnStoreState = {
-	tables: Record<string, ColumnState>;
-	hideColumn: (storageKey: string, columnId: string) => void;
-	showColumn: (storageKey: string, columnId: string) => void;
-	toggleColumn: (storageKey: string, columnId: string) => void;
-	setColumnSizing: (storageKey: string, sizing: ColumnSizingState) => void;
-	setColumnOrder: (storageKey: string, order: string[]) => void;
-	initializeFromDefaults: <TData>(
-		storageKey: string,
-		columns: TableColumnDef<TData>[],
-	) => void;
-	resetToDefaults: <TData>(
-		storageKey: string,
-		columns: TableColumnDef<TData>[],
-	) => void;
-	cleanupStaleHiddenColumns: (
-		storageKey: string,
-		validColumnIds: Set<string>,
-	) => void;
-};
-
-const getDefaultHiddenIds = <TData>(
-	columns: TableColumnDef<TData>[],
-): string[] =>
-	columns.filter((c) => c.defaultVisibility === false).map((c) => c.id);
-
-const getStorageKeyForTable = (tableKey: string): string =>
-	`${STORAGE_PREFIX}${tableKey}`;
-
-const loadTableFromStorage = (tableKey: string): ColumnState | null => {
-	try {
-		const raw = localStorage.getItem(getStorageKeyForTable(tableKey));
-		if (!raw) {
-			persistedTableCache.delete(tableKey);
-			return null;
-		}
-
-		const cached = persistedTableCache.get(tableKey);
-		if (cached && cached.raw === raw) {
-			return cached.parsed;
-		}
-
-		const parsed = JSON.parse(raw) as ColumnState;
-		persistedTableCache.set(tableKey, { raw, parsed });
-		return parsed;
-	} catch {
-		persistedTableCache.delete(tableKey);
-		return null;
-	}
-};
-
-const saveTableToStorage = (tableKey: string, state: ColumnState): void => {
-	try {
-		const raw = JSON.stringify(state);
-		localStorage.setItem(getStorageKeyForTable(tableKey), raw);
-		persistedTableCache.set(tableKey, { raw, parsed: state });
-	} catch {
-		// Ignore storage errors (e.g., private browsing quota exceeded)
-	}
-};
-
-export const useColumnStore = create<ColumnStoreState>()((set, get) => {
-	return {
-		tables: {},
-		hideColumn: (storageKey, columnId): void => {
-			const state = get();
-			let table = state.tables[storageKey];
-
-			// Lazy load from storage if not in memory
-			if (!table) {
-				const persisted = loadTableFromStorage(storageKey);
-				if (persisted) {
-					table = persisted;
-					set({ tables: { ...state.tables, [storageKey]: table } });
-				} else {
-					return;
-				}
-			}
-
-			if (table.hiddenColumnIds.includes(columnId)) {
-				return;
-			}
-
-			const nextTable = {
-				...table,
-				hiddenColumnIds: [...table.hiddenColumnIds, columnId],
-			};
-			set({ tables: { ...get().tables, [storageKey]: nextTable } });
-			saveTableToStorage(storageKey, nextTable);
-		},
-		showColumn: (storageKey, columnId): void => {
-			const state = get();
-			let table = state.tables[storageKey];
-
-			if (!table) {
-				const persisted = loadTableFromStorage(storageKey);
-				if (persisted) {
-					table = persisted;
-					set({ tables: { ...state.tables, [storageKey]: table } });
-				} else {
-					return;
-				}
-			}
-
-			if (!table.hiddenColumnIds.includes(columnId)) {
-				return;
-			}
-
-			const nextTable = {
-				...table,
-				hiddenColumnIds: table.hiddenColumnIds.filter((id) => id !== columnId),
-			};
-			set({ tables: { ...get().tables, [storageKey]: nextTable } });
-			saveTableToStorage(storageKey, nextTable);
-		},
-		toggleColumn: (storageKey, columnId): void => {
-			const state = get();
-			let table = state.tables[storageKey];
-
-			if (!table) {
-				const persisted = loadTableFromStorage(storageKey);
-				if (persisted) {
-					table = persisted;
-					set({ tables: { ...state.tables, [storageKey]: table } });
-				}
-			}
-
-			if (!table) {
-				return;
-			}
-
-			const isHidden = table.hiddenColumnIds.includes(columnId);
-			if (isHidden) {
-				get().showColumn(storageKey, columnId);
-			} else {
-				get().hideColumn(storageKey, columnId);
-			}
-		},
-		setColumnSizing: (storageKey, sizing): void => {
-			const state = get();
-			let table = state.tables[storageKey];
-
-			if (!table) {
-				const persisted = loadTableFromStorage(storageKey);
-				table = persisted ?? { ...EMPTY_STATE };
-			}
-
-			const nextTable = {
-				...table,
-				columnSizing: sizing,
-			};
-			set({ tables: { ...get().tables, [storageKey]: nextTable } });
-			saveTableToStorage(storageKey, nextTable);
-		},
-		setColumnOrder: (storageKey, order): void => {
-			const state = get();
-			let table = state.tables[storageKey];
-
-			if (!table) {
-				const persisted = loadTableFromStorage(storageKey);
-				table = persisted ?? { ...EMPTY_STATE };
-			}
-
-			const nextTable = {
-				...table,
-				columnOrder: order,
-			};
-			set({ tables: { ...get().tables, [storageKey]: nextTable } });
-			saveTableToStorage(storageKey, nextTable);
-		},
-		initializeFromDefaults: (storageKey, columns): void => {
-			const state = get();
-
-			if (state.tables[storageKey]) {
-				return;
-			}
-
-			const persisted = loadTableFromStorage(storageKey);
-			if (persisted) {
-				set({ tables: { ...state.tables, [storageKey]: persisted } });
-				return;
-			}
-
-			const newTable: ColumnState = {
-				hiddenColumnIds: getDefaultHiddenIds(columns),
-				columnOrder: [],
-				columnSizing: {},
-			};
-			set({ tables: { ...state.tables, [storageKey]: newTable } });
-			saveTableToStorage(storageKey, newTable);
-		},
-
-		resetToDefaults: (storageKey, columns): void => {
-			const newTable: ColumnState = {
-				hiddenColumnIds: getDefaultHiddenIds(columns),
-				columnOrder: [],
-				columnSizing: {},
-			};
-			set({ tables: { ...get().tables, [storageKey]: newTable } });
-			saveTableToStorage(storageKey, newTable);
-		},
-
-		cleanupStaleHiddenColumns: (storageKey, validColumnIds): void => {
-			const state = get();
-			let table = state.tables[storageKey];
-
-			if (!table) {
-				const persisted = loadTableFromStorage(storageKey);
-				if (!persisted) {
-					return;
-				}
-				table = persisted;
-			}
-
-			const filteredHiddenIds = table.hiddenColumnIds.filter((id) =>
-				validColumnIds.has(id),
-			);
-
-			// Only update if something changed
-			if (filteredHiddenIds.length === table.hiddenColumnIds.length) {
-				return;
-			}
-
-			const nextTable = {
-				...table,
-				hiddenColumnIds: filteredHiddenIds,
-			};
-			set({ tables: { ...get().tables, [storageKey]: nextTable } });
-			saveTableToStorage(storageKey, nextTable);
-		},
-	};
-});
-
-// Stable empty references to avoid `Object.is` false-negatives when a key
-// does not exist yet (returning a new `[]` / `{}` on every selector call
-// would trigger React's useSyncExternalStore tearing detection).
-const EMPTY_ARRAY: string[] = [];
-const EMPTY_SIZING: ColumnSizingState = {};
-
-export const useHiddenColumnIds = (storageKey: string): string[] =>
-	useColumnStore((s) => {
-		const table = s.tables[storageKey];
-		if (table) {
-			return table.hiddenColumnIds;
-		}
-		const persisted = loadTableFromStorage(storageKey);
-		return persisted?.hiddenColumnIds ?? EMPTY_ARRAY;
-	});
-
-export const useColumnSizing = (storageKey: string): ColumnSizingState =>
-	useColumnStore((s) => {
-		const table = s.tables[storageKey];
-		if (table) {
-			return table.columnSizing;
-		}
-		const persisted = loadTableFromStorage(storageKey);
-		return persisted?.columnSizing ?? EMPTY_SIZING;
-	});
-
-export const useColumnOrder = (storageKey: string): string[] =>
-	useColumnStore((s) => {
-		const table = s.tables[storageKey];
-		if (table) {
-			return table.columnOrder;
-		}
-		const persisted = loadTableFromStorage(storageKey);
-		return persisted?.columnOrder ?? EMPTY_ARRAY;
-	});
-
-export const initializeFromDefaults = <TData>(
-	storageKey: string,
-	columns: TableColumnDef<TData>[],
-): void =>
-	useColumnStore.getState().initializeFromDefaults(storageKey, columns);
-
-export const hideColumn = (storageKey: string, columnId: string): void =>
-	useColumnStore.getState().hideColumn(storageKey, columnId);
-
-export const showColumn = (storageKey: string, columnId: string): void =>
-	useColumnStore.getState().showColumn(storageKey, columnId);
-
-export const toggleColumn = (storageKey: string, columnId: string): void =>
-	useColumnStore.getState().toggleColumn(storageKey, columnId);
-
-export const setColumnSizing = (
-	storageKey: string,
-	sizing: ColumnSizingState,
-): void => useColumnStore.getState().setColumnSizing(storageKey, sizing);
-
-export const setColumnOrder = (storageKey: string, order: string[]): void =>
-	useColumnStore.getState().setColumnOrder(storageKey, order);
-
-export const resetToDefaults = <TData>(
-	storageKey: string,
-	columns: TableColumnDef<TData>[],
-): void => useColumnStore.getState().resetToDefaults(storageKey, columns);
-
-export const cleanupStaleHiddenColumns = (
-	storageKey: string,
-	validColumnIds: Set<string>,
-): void =>
-	useColumnStore
-		.getState()
-		.cleanupStaleHiddenColumns(storageKey, validColumnIds);

frontend/src/components/TanStackTableView/useEffectiveData.ts

@@ -1,43 +0,0 @@
-import { useMemo, useRef } from 'react';
-
-export interface UseEffectiveDataOptions {
-	data: unknown[];
-	isLoading: boolean;
-	limit?: number;
-	skeletonRowCount?: number;
-}
-
-/**
- * Manages effective data for the table, handling loading states gracefully.
- */
-export function useEffectiveData<TData>({
-	data,
-	isLoading,
-	limit,
-	skeletonRowCount = 10,
-}: UseEffectiveDataOptions): TData[] {
-	const prevDataRef = useRef<TData[]>(data as TData[]);
-	const prevDataSizeRef = useRef(data.length || limit || skeletonRowCount);
-
-	// Update refs when we have real data (not loading)
-	if (!isLoading && data.length > 0) {
-		prevDataRef.current = data as TData[];
-		prevDataSizeRef.current = data.length;
-	}
-
-	return useMemo((): TData[] => {
-		if (data.length > 0) {
-			return data as TData[];
-		}
-		if (prevDataRef.current.length > 0) {
-			return prevDataRef.current;
-		}
-		if (isLoading) {
-			const fakeCount = prevDataSizeRef.current || limit || skeletonRowCount;
-			return Array.from({ length: fakeCount }, (_, i) => ({
-				id: `skeleton-${i}`,
-			})) as TData[];
-		}
-		return data as TData[];
-	}, [isLoading, data, limit, skeletonRowCount]);
-}

frontend/src/components/TanStackTableView/useFlatItems.ts

@@ -1,60 +0,0 @@
-import { useMemo } from 'react';
-import type { ExpandedState, Row } from '@tanstack/react-table';
-
-import { FlatItem } from './types';
-
-export interface UseFlatItemsOptions<TData> {
-	tableRows: Row<TData>[];
-	/** Whether row expansion is enabled, needs to be unknown since it will be a function that can be updated/modified, boolean does not work well here */
-	renderExpandedRow?: unknown;
-	expanded: ExpandedState;
-	/** Index of the active row (for scroll-to behavior) */
-	activeRowIndex?: number;
-}
-
-export interface UseFlatItemsResult<TData> {
-	flatItems: FlatItem<TData>[];
-	/** Index of active row in flatItems (-1 if not found) */
-	flatIndexForActiveRow: number;
-}
-
-/**
- * Flattens table rows with their expansion rows into a single list.
- *
- * When a row is expanded, an expansion item is inserted immediately after it.
- * Also computes the flat index for the active row (used for scroll-to).
- */
-export function useFlatItems<TData>({
-	tableRows,
-	renderExpandedRow,
-	expanded,
-	activeRowIndex,
-}: UseFlatItemsOptions<TData>): UseFlatItemsResult<TData> {
-	const flatItems = useMemo<FlatItem<TData>[]>(() => {
-		const result: FlatItem<TData>[] = [];
-		for (const row of tableRows) {
-			result.push({ kind: 'row', row });
-			if (renderExpandedRow && row.getIsExpanded()) {
-				result.push({ kind: 'expansion', row });
-			}
-		}
-		return result;
-		// expanded needs to be here, otherwise the rows are not updated when you click to expand
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [tableRows, renderExpandedRow, expanded]);
-
-	const flatIndexForActiveRow = useMemo(() => {
-		if (activeRowIndex == null || activeRowIndex < 0) {
-			return -1;
-		}
-		for (let i = 0; i < flatItems.length; i++) {
-			const item = flatItems[i];
-			if (item.kind === 'row' && item.row.index === activeRowIndex) {
-				return i;
-			}
-		}
-		return -1;
-	}, [activeRowIndex, flatItems]);
-
-	return { flatItems, flatIndexForActiveRow };
-}

frontend/src/components/TanStackTableView/useRowKeyData.ts

@@ -1,79 +0,0 @@
-import { useCallback, useMemo } from 'react';
-
-export interface RowKeyDataItem {
-	/** Final unique key for the row (with dedup suffix if needed) */
-	finalKey: string;
-	/** Item key for tracking (may differ from finalKey) */
-	itemKey: string;
-	/** Group metadata when grouped */
-	groupMeta: Record<string, string> | undefined;
-}
-
-export interface UseRowKeyDataOptions<TData> {
-	data: TData[];
-	isLoading: boolean;
-	getRowKey?: (item: TData) => string;
-	getItemKey?: (item: TData) => string;
-	groupBy?: Array<{ key: string }>;
-	getGroupKey?: (item: TData) => Record<string, string>;
-}
-
-export interface UseRowKeyDataResult {
-	/** Array of key data for each row, undefined if getRowKey not provided or loading */
-	rowKeyData: RowKeyDataItem[] | undefined;
-	getRowKeyData: (index: number) => RowKeyDataItem | undefined;
-}
-
-/**
- * Computes unique row keys with duplicate handling and group prefixes.
- */
-export function useRowKeyData<TData>({
-	data,
-	isLoading,
-	getRowKey,
-	getItemKey,
-	groupBy,
-	getGroupKey,
-}: UseRowKeyDataOptions<TData>): UseRowKeyDataResult {
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const rowKeyData = useMemo((): RowKeyDataItem[] | undefined => {
-		if (!getRowKey || isLoading) {
-			return undefined;
-		}
-
-		const keyCount = new Map<string, number>();
-
-		return data.map(
-			(item, index): RowKeyDataItem => {
-				const itemIdentifier = getRowKey(item);
-				const itemKey = getItemKey?.(item) ?? itemIdentifier;
-				const groupMeta = groupBy?.length ? getGroupKey?.(item) : undefined;
-
-				// Build rowKey with group prefix when grouped
-				let rowKey: string;
-				if (groupBy?.length && groupMeta) {
-					const groupKeyStr = Object.values(groupMeta).join('-');
-					if (groupKeyStr && itemIdentifier) {
-						rowKey = `${groupKeyStr}-${itemIdentifier}`;
-					} else {
-						rowKey = groupKeyStr || itemIdentifier || String(index);
-					}
-				} else {
-					rowKey = itemIdentifier || String(index);
-				}
-
-				const count = keyCount.get(rowKey) || 0;
-				keyCount.set(rowKey, count + 1);
-				const finalKey = count > 0 ? `${rowKey}-${count}` : rowKey;
-
-				return { finalKey, itemKey, groupMeta };
-			},
-		);
-	}, [data, getRowKey, getItemKey, groupBy, getGroupKey, isLoading]);
-
-	const getRowKeyData = useCallback((index: number) => rowKeyData?.[index], [
-		rowKeyData,
-	]);
-
-	return { rowKeyData, getRowKeyData };
-}

frontend/src/components/TanStackTableView/useTableParams.ts

@@ -1,194 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { ExpandedState, Updater } from '@tanstack/react-table';
-import { parseAsInteger, useQueryState } from 'nuqs';
-import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
-
-import { SortState, TanstackTableQueryParamsConfig } from './types';
-
-const NUQS_OPTIONS = { history: 'push' as const };
-const DEFAULT_PAGE = 1;
-const DEFAULT_LIMIT = 50;
-
-type Defaults = {
-	page?: number;
-	limit?: number;
-	orderBy?: SortState | null;
-	expanded?: ExpandedState;
-};
-
-type TableParamsResult = {
-	page: number;
-	limit: number;
-	orderBy: SortState | null;
-	expanded: ExpandedState;
-	setPage: (p: number) => void;
-	setLimit: (l: number) => void;
-	setOrderBy: (s: SortState | null) => void;
-	setExpanded: (updaterOrValue: Updater<ExpandedState>) => void;
-};
-
-function expandedStateToArray(state: ExpandedState): string[] {
-	if (typeof state === 'boolean') {
-		return [];
-	}
-	return Object.entries(state)
-		.filter(([, v]) => v)
-		.map(([k]) => k);
-}
-
-function arrayToExpandedState(arr: string[]): ExpandedState {
-	const result: Record<string, boolean> = {};
-	for (const id of arr) {
-		result[id] = true;
-	}
-	return result;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function useTableParams(
-	enableQueryParams?: boolean | string | TanstackTableQueryParamsConfig,
-	defaults?: Defaults,
-): TableParamsResult {
-	const pageQueryParam =
-		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_page`
-			: typeof enableQueryParams === 'object'
-			? enableQueryParams.page
-			: 'page';
-	const limitQueryParam =
-		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_limit`
-			: typeof enableQueryParams === 'object'
-			? enableQueryParams.limit
-			: 'limit';
-	const orderByQueryParam =
-		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_order_by`
-			: typeof enableQueryParams === 'object'
-			? enableQueryParams.orderBy
-			: 'order_by';
-	const expandedQueryParam =
-		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_expanded`
-			: typeof enableQueryParams === 'object'
-			? enableQueryParams.expanded
-			: 'expanded';
-	const pageDefault = defaults?.page ?? DEFAULT_PAGE;
-	const limitDefault = defaults?.limit ?? DEFAULT_LIMIT;
-	const orderByDefault = defaults?.orderBy ?? null;
-	const expandedDefault = defaults?.expanded ?? {};
-	const expandedDefaultArray = useMemo(
-		() => expandedStateToArray(expandedDefault),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
-	);
-
-	const [localPage, setLocalPage] = useState(pageDefault);
-	const [localLimit, setLocalLimit] = useState(limitDefault);
-	const [localOrderBy, setLocalOrderBy] = useState<SortState | null>(
-		orderByDefault,
-	);
-	const [localExpanded, setLocalExpanded] = useState<ExpandedState>(
-		expandedDefault,
-	);
-
-	const [urlPage, setUrlPage] = useQueryState(
-		pageQueryParam,
-		parseAsInteger.withDefault(pageDefault).withOptions(NUQS_OPTIONS),
-	);
-	const [urlLimit, setUrlLimit] = useQueryState(
-		limitQueryParam,
-		parseAsInteger.withDefault(limitDefault).withOptions(NUQS_OPTIONS),
-	);
-	const [urlOrderBy, setUrlOrderBy] = useQueryState(
-		orderByQueryParam,
-		parseAsJsonNoValidate<SortState | null>()
-			.withDefault(orderByDefault as never)
-			.withOptions(NUQS_OPTIONS),
-	);
-	const [urlExpandedArray, setUrlExpandedArray] = useQueryState(
-		expandedQueryParam,
-		parseAsJsonNoValidate<string[]>()
-			.withDefault(expandedDefaultArray as never)
-			.withOptions(NUQS_OPTIONS),
-	);
-
-	// Convert URL array to ExpandedState
-	const urlExpanded = useMemo(
-		() => arrayToExpandedState(urlExpandedArray ?? []),
-		[urlExpandedArray],
-	);
-
-	// Keep ref for updater function access
-	const urlExpandedRef = useRef(urlExpanded);
-	urlExpandedRef.current = urlExpanded;
-
-	// Wrapper to convert ExpandedState to array when setting URL state
-	// Supports both direct values and updater functions (TanStack pattern)
-	const setUrlExpanded = useCallback(
-		(updaterOrValue: Updater<ExpandedState>): void => {
-			const newState =
-				typeof updaterOrValue === 'function'
-					? updaterOrValue(urlExpandedRef.current)
-					: updaterOrValue;
-			setUrlExpandedArray(expandedStateToArray(newState));
-		},
-		[setUrlExpandedArray],
-	);
-
-	// Wrapper for local expanded to match TanStack's Updater pattern
-	const handleSetLocalExpanded = useCallback(
-		(updaterOrValue: Updater<ExpandedState>): void => {
-			setLocalExpanded((prev) =>
-				typeof updaterOrValue === 'function'
-					? updaterOrValue(prev)
-					: updaterOrValue,
-			);
-		},
-		[],
-	);
-
-	const orderByDefaultMemoKey = `${orderByDefault?.columnName}${orderByDefault?.order}`;
-	const orderByUrlMemoKey = `${urlOrderBy?.columnName}${urlOrderBy?.order}`;
-	const isEnabledQueryParams =
-		typeof enableQueryParams === 'string' ||
-		typeof enableQueryParams === 'object';
-
-	useEffect(() => {
-		if (isEnabledQueryParams) {
-			setUrlPage(pageDefault);
-		} else {
-			setLocalPage(pageDefault);
-		}
-	}, [
-		isEnabledQueryParams,
-		orderByDefaultMemoKey,
-		orderByUrlMemoKey,
-		pageDefault,
-		setUrlPage,
-	]);
-
-	if (enableQueryParams) {
-		return {
-			page: urlPage,
-			limit: urlLimit,
-			orderBy: urlOrderBy as SortState | null,
-			expanded: urlExpanded,
-			setPage: setUrlPage,
-			setLimit: setUrlLimit,
-			setOrderBy: setUrlOrderBy,
-			setExpanded: setUrlExpanded,
-		};
-	}
-
-	return {
-		page: localPage,
-		limit: localLimit,
-		orderBy: localOrderBy,
-		expanded: localExpanded,
-		setPage: setLocalPage,
-		setLimit: setLocalLimit,
-		setOrderBy: setLocalOrderBy,
-		setExpanded: handleSetLocalExpanded,
-	};
-}

frontend/src/components/TanStackTableView/utils.ts

@@ -1,135 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-import type { ColumnDef } from '@tanstack/react-table';
-
-import { RowKeyData, TableColumnDef } from './types';
-
-export const getColumnId = <TData>(column: TableColumnDef<TData>): string =>
-	column.id;
-
-const DEFAULT_MIN_WIDTH = 192; // 12rem * 16px
-
-/**
- * Parse a numeric pixel value from a number or string (e.g., 200 or "200px").
- * Returns undefined for non-pixel strings like "100%" or "10rem".
- */
-const parsePixelValue = (
-	value: number | string | undefined,
-): number | undefined => {
-	if (value == null) {
-		return undefined;
-	}
-	if (typeof value === 'number') {
-		return value;
-	}
-	// Only parse pixel values, ignore %, rem, em, etc.
-	const match = /^(\d+(?:\.\d+)?)px$/.exec(value);
-	return match ? parseFloat(match[1]) : undefined;
-};
-
-export const getColumnWidthStyle = <TData>(
-	column: TableColumnDef<TData>,
-	/** Persisted width from user resizing (overrides defined width) */
-	persistedWidth?: number,
-	/** Last column always gets width: 100% and ignores other width settings */
-	isLastColumn?: boolean,
-): CSSProperties => {
-	// Last column always fills remaining space
-	if (isLastColumn) {
-		return { width: '100%' };
-	}
-
-	const { width } = column;
-	if (!width) {
-		return {
-			width: persistedWidth ?? DEFAULT_MIN_WIDTH,
-			minWidth: DEFAULT_MIN_WIDTH,
-		};
-	}
-	if (width.fixed != null) {
-		return {
-			width: width.fixed,
-			minWidth: width.fixed,
-			maxWidth: width.fixed,
-		};
-	}
-	return {
-		width: persistedWidth ?? width.default ?? width.min,
-		minWidth: width.min ?? DEFAULT_MIN_WIDTH,
-		maxWidth: width.max,
-	};
-};
-
-const buildAccessorFn = <TData>(
-	colDef: TableColumnDef<TData>,
-): ((row: TData) => unknown) => {
-	return (row: TData): unknown => {
-		if (colDef.accessorFn) {
-			return colDef.accessorFn(row);
-		}
-		if (colDef.accessorKey) {
-			return (row as Record<string, unknown>)[colDef.accessorKey];
-		}
-		return undefined;
-	};
-};
-
-export function buildTanstackColumnDef<TData>(
-	colDef: TableColumnDef<TData>,
-	isRowActive?: (row: TData) => boolean,
-	getRowKeyData?: (index: number) => RowKeyData | undefined,
-): ColumnDef<TData> {
-	const isFixed = colDef.width?.fixed != null;
-	const headerFn =
-		typeof colDef.header === 'function' ? colDef.header : undefined;
-
-	// Extract numeric size/minSize/maxSize for TanStack's resize behavior
-	// This ensures TanStack's internal resize state stays in sync with CSS constraints
-	let size: number | undefined;
-	let minSize: number | undefined;
-	let maxSize: number | undefined;
-
-	const fixedWidth = parsePixelValue(colDef.width?.fixed);
-	if (isFixed && fixedWidth != null) {
-		size = fixedWidth;
-		minSize = fixedWidth;
-		maxSize = fixedWidth;
-	} else {
-		// Match the logic in getColumnWidthStyle for initial size
-		const defaultSize = parsePixelValue(colDef.width?.default);
-		const minWidth = parsePixelValue(colDef.width?.min) ?? DEFAULT_MIN_WIDTH;
-		size = defaultSize ?? minWidth;
-		minSize = minWidth;
-		maxSize = parsePixelValue(colDef.width?.max);
-	}
-
-	return {
-		id: colDef.id,
-		size,
-		minSize,
-		maxSize,
-		header:
-			typeof colDef.header === 'string'
-				? colDef.header
-				: (): ReactNode => headerFn?.() ?? null,
-		accessorFn: buildAccessorFn(colDef),
-		enableResizing: colDef.enableResize !== false && !isFixed,
-		enableSorting: colDef.enableSort === true,
-		cell: ({ row, getValue }): ReactNode => {
-			const rowData = row.original;
-			const keyData = getRowKeyData?.(row.index);
-			return colDef.cell({
-				row: rowData,
-				value: getValue() as TData[any],
-				isActive: isRowActive?.(rowData) ?? false,
-				rowIndex: row.index,
-				isExpanded: row.getIsExpanded(),
-				canExpand: row.getCanExpand(),
-				toggleExpanded: (): void => {
-					row.toggleExpanded();
-				},
-				itemKey: keyData?.itemKey ?? '',
-				groupMeta: keyData?.groupMeta,
-			});
-		},
-	};
-}

frontend/src/container/FormAlertRules/labels/Labels.machine.ts

@@ -1,50 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { createMachine } from 'xstate';
-
-export const ResourceAttributesFilterMachine =
-	/** @xstate-layout N4IgpgJg5mDOIC5QBECGsAWAjA9qgThAAQDKYBAxhkQIIB2xAYgJYA2ALmPgHQAqqUANJgAngGIAcgFEAGr0SgADjljN2zHHQUgAHogAcAFgAM3AOz6ATAEYAzJdsA2Y4cOWAnABoQIxAFpDR2tuQ319AFYTcKdbFycAX3jvNExcAmIySmp6JjZOHn4hUTFNACFWAFd8bWVVdU1tPQQzY1MXY2tDdzNHM3dHd0NvXwR7biMTa313S0i+63DE5PRsPEJScnwqWgYiFg4uPgFhcQAlKRIpeSQQWrUNLRumx3Czbg8TR0sbS31jfUcw38fW47gBHmm4XCVms3SWIBSq3SGyyO1yBx4AHlFFxUOwcPhJLJrkoVPcGk9ENYFuF3i5YR0wtEHECEAEgiEmV8zH1DLYzHZ4Yi0utMltsrt9vluNjcfjCWVKtUbnd6o9QE1rMYBtxbGFvsZ3NrZj1WdYOfotUZLX0XEFHEKViKMpttjk9nlDrL8HiCWJzpcSbcyWrGoh3NCQj0zK53P1ph1WeFLLqnJZ2s5vmZLA6kginWsXaj3VLDoUAGqoSpgEp0cpVGohh5hhDWDy0sz8zruakzamWVm-Qyg362V5-AZOayO1KFlHitEejFHKCV6v+i5XRt1ZuU1s52zjNOOaZfdOWIY+RDZ0Hc6ZmKEXqyLPPCudit2Sz08ACSEFYNbSHI27kuquiIOEjiONwjJgrM3RWJYZisgEIJgnYPTmuEdi2OaiR5nQOAQHA2hvsiH4Sui0qFCcIGhnuLSmP0YJuJ2xjJsmKELG8XZTK0tjdHG06vgW5GupRS7St6vrKqSO4UhqVL8TBWp8o4eqdl0A5Xmy3G6gK56-B4uERDOSKiuJi6lgUAhrhUYB0buimtrEKZBDYrxaS0OZca8+ltheybOI4hivGZzrzp+VGHH+AGOQp4EIHy+ghNYnawtG4TsbYvk8QKfHGAJfQ9uF76WSW37xWBTSGJ0qXpd0vRZdEKGPqC2YeO2-zfO4+HxEAA */
-	createMachine({
-		tsTypes: {} as import('./Labels.machine.typegen').Typegen0,
-		initial: 'Idle',
-		states: {
-			LabelKey: {
-				on: {
-					NEXT: {
-						actions: 'onSelectLabelValue',
-						target: 'LabelValue',
-					},
-					onBlur: {
-						actions: 'onSelectLabelValue',
-						target: 'LabelValue',
-					},
-					RESET: {
-						target: 'Idle',
-					},
-				},
-			},
-			LabelValue: {
-				on: {
-					NEXT: {
-						actions: ['onValidateQuery'],
-					},
-					onBlur: {
-						actions: ['onValidateQuery'],
-						// target: 'Idle',
-					},
-					RESET: {
-						target: 'Idle',
-					},
-				},
-			},
-			Idle: {
-				on: {
-					NEXT: {
-						actions: 'onSelectLabelKey',
-						description: 'Enter a label key',
-						target: 'LabelKey',
-					},
-				},
-			},
-		},
-		id: 'Label Key Values',
-	});

frontend/src/container/FormAlertRules/labels/Labels.machine.typegen.ts

@@ -1,25 +0,0 @@
-// This file was automatically generated. Edits will be overwritten
-
-export interface Typegen0 {
-	'@@xstate/typegen': true;
-	eventsCausingActions: {
-		onSelectLabelValue: 'NEXT' | 'onBlur';
-		onValidateQuery: 'NEXT' | 'onBlur';
-		onSelectLabelKey: 'NEXT';
-	};
-	internalEvents: {
-		'xstate.init': { type: 'xstate.init' };
-	};
-	invokeSrcNameMap: {};
-	missingImplementations: {
-		actions: 'onSelectLabelValue' | 'onValidateQuery' | 'onSelectLabelKey';
-		services: never;
-		guards: never;
-		delays: never;
-	};
-	eventsCausingServices: {};
-	eventsCausingGuards: {};
-	eventsCausingDelays: {};
-	matchesStates: 'LabelKey' | 'LabelValue' | 'Idle';
-	tags: never;
-}

frontend/src/container/FormAlertRules/labels/index.tsx

@@ -4,20 +4,20 @@ import {
 	CloseCircleFilled,
 	ExclamationCircleOutlined,
 } from '@ant-design/icons';
-// eslint-disable-next-line no-restricted-imports
-import { useMachine } from '@xstate/react';
 import { Button, Input, message, Modal } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { map } from 'lodash-es';
 import { Labels } from 'types/api/alerts/def';
 import { v4 as uuid } from 'uuid';
 
-import { ResourceAttributesFilterMachine } from './Labels.machine';
 import QueryChip from './QueryChip';
 import { QueryChipItem, SearchContainer } from './styles';
 import { ILabelRecord } from './types';
 import { createQuery, flattenLabels, prepareLabels } from './utils';
 
+type LabelStep = 'Idle' | 'LabelKey' | 'LabelValue';
+type LabelEvent = 'NEXT' | 'onBlur' | 'RESET';
+
 interface LabelSelectProps {
 	onSetLabels: (q: Labels) => void;
 	initialValues: Labels | undefined;
@@ -35,42 +35,65 @@ function LabelSelect({
 	const [queries, setQueries] = useState<ILabelRecord[]>(
 		initialValues ? flattenLabels(initialValues) : [],
 	);
+	const [step, setStep] = useState<LabelStep>('Idle');
 
 	const dispatchChanges = (updatedRecs: ILabelRecord[]): void => {
 		onSetLabels(prepareLabels(updatedRecs, initialValues));
 		setQueries(updatedRecs);
 	};
 
-	const [state, send] = useMachine(ResourceAttributesFilterMachine, {
-		actions: {
-			onSelectLabelKey: () => {},
-			onSelectLabelValue: () => {
-				if (currentVal !== '') {
-					setStaging((prevState) => [...prevState, currentVal]);
-				} else {
-					return;
-				}
-				setCurrentVal('');
-			},
-			onValidateQuery: (): void => {
-				if (currentVal === '') {
-					return;
-				}
+	const onSelectLabelValue = (): void => {
+		if (currentVal !== '') {
+			setStaging((prevState) => [...prevState, currentVal]);
+		} else {
+			return;
+		}
+		setCurrentVal('');
+	};
 
-				const generatedQuery = createQuery([...staging, currentVal]);
+	const onValidateQuery = (): void => {
+		if (currentVal === '') {
+			return;
+		}
 
-				if (generatedQuery) {
-					dispatchChanges([...queries, generatedQuery]);
-					setStaging([]);
-					setCurrentVal('');
-					send('RESET');
-				}
-			},
-		},
-	});
+		const generatedQuery = createQuery([...staging, currentVal]);
+
+		if (generatedQuery) {
+			dispatchChanges([...queries, generatedQuery]);
+			setStaging([]);
+			setCurrentVal('');
+			setStep('Idle');
+		}
+	};
+
+	const send = (event: LabelEvent): void => {
+		if (event === 'RESET') {
+			setStep('Idle');
+			return;
+		}
+		if (event === 'NEXT') {
+			if (step === 'Idle') {
+				setStep('LabelKey');
+			} else if (step === 'LabelKey') {
+				onSelectLabelValue();
+				setStep('LabelValue');
+			} else if (step === 'LabelValue') {
+				onValidateQuery();
+			}
+			return;
+		}
+		if (event === 'onBlur') {
+			if (step === 'LabelKey') {
+				onSelectLabelValue();
+				setStep('LabelValue');
+			} else if (step === 'LabelValue') {
+				onValidateQuery();
+			}
+		}
+	};
 
 	const handleFocus = (): void => {
-		if (state.value === 'Idle') {
+		if (step === 'Idle') {
 			send('NEXT');
 		}
 	};
@@ -79,7 +102,7 @@ function LabelSelect({
 		if (staging.length === 1 && staging[0] !== undefined) {
 			send('onBlur');
 		}
-	}, [send, staging]);
+	}, [staging]);
 
 	useEffect(() => {
 		handleBlur();
@@ -115,14 +138,14 @@ function LabelSelect({
 		});
 	};
 	const renderPlaceholder = useCallback((): string => {
-		if (state.value === 'LabelKey') {
+		if (step === 'LabelKey') {
 			return 'Enter a label key then press ENTER.';
 		}
-		if (state.value === 'LabelValue') {
+		if (step === 'LabelValue') {
 			return `Enter a value for label key(${staging[0]}) then press ENTER.`;
 		}
 		return t('placeholder_label_key_pair');
-	}, [t, state, staging]);
+	}, [t, step, staging]);
 	return (
 		<SearchContainer isDarkMode={isDarkMode} disabled={false}>
 			<div style={{ display: 'inline-flex', flexWrap: 'wrap' }}>
@@ -148,7 +171,7 @@ function LabelSelect({
 						if (e.key === 'Enter' || e.code === 'Enter' || e.key === ':') {
 							send('NEXT');
 						}
-						if (state.value === 'Idle') {
+						if (step === 'Idle') {
 							send('NEXT');
 						}
 					}}
@@ -159,7 +182,7 @@ function LabelSelect({
 					onBlur={handleBlur}
 				/>
 
-				{queries.length || staging.length || currentVal ? (
+				{queries.length > 0 || staging.length > 0 || currentVal ? (
 					<Button
 						onClick={handleClearAll}
 						icon={<CloseCircleFilled />}

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

@@ -103,8 +103,8 @@ function renderComponent<T>({
 
 describe('K8sBaseList', () => {
 	describe('with items in the list', () => {
-		const itemId = Math.random().toString(36).substring(7);
-		const itemId2 = Math.random().toString(36).substring(7);
+		const itemId = Math.random().toString(36).slice(7);
+		const itemId2 = Math.random().toString(36).slice(7);
 		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
 		const fetchListDataMock = jest.fn<
 			ReturnType<K8sBaseListProps<{ id: string; title: string }>['fetchListData']>,
@@ -163,10 +163,10 @@ describe('K8sBaseList', () => {
 
 		it('should render all the items in the list', async () => {
 			await waitFor(async () => {
-				expect(await screen.findByText(`PodId:${itemId}`)).toBeInTheDocument();
-				expect(await screen.findByText(`PodTitle:${itemId}`)).toBeInTheDocument();
-				expect(await screen.findByText(`PodId:${itemId2}`)).toBeInTheDocument();
-				expect(await screen.findByText(`PodTitle:${itemId2}`)).toBeInTheDocument();
+				await expect(screen.findByText(`PodId:${itemId}`)).resolves.toBeInTheDocument();
+				await expect(screen.findByText(`PodTitle:${itemId}`)).resolves.toBeInTheDocument();
+				await expect(screen.findByText(`PodId:${itemId2}`)).resolves.toBeInTheDocument();
+				await expect(screen.findByText(`PodTitle:${itemId2}`)).resolves.toBeInTheDocument();
 			});
 		});
 
@@ -178,7 +178,7 @@ describe('K8sBaseList', () => {
 			const [filters] = fetchListDataMock.mock.calls[0];
 			expect(filters.limit).toBe(10);
 			expect(filters.offset).toBe(0);
-			expect(filters.filters).toEqual({ items: [], op: 'AND' });
+			expect(filters.filters).toStrictEqual({ items: [], op: 'AND' });
 			expect(filters.groupBy).toBeUndefined();
 			expect(filters.orderBy).toBeUndefined();
 		});
@@ -358,8 +358,8 @@ describe('K8sBaseList', () => {
 			});
 
 			const [filters] = fetchListDataMock.mock.calls[0];
-			expect(filters.orderBy).toEqual({ columnName: 'cpu', order: 'desc' });
-			expect(filters.groupBy).toEqual(groupByValue);
+			expect(filters.orderBy).toStrictEqual({ columnName: 'cpu', order: 'desc' });
+			expect(filters.groupBy).toStrictEqual(groupByValue);
 			expect(filters.offset).toBe(20); // (3 - 1) * 10 = 20
 			expect(filters.limit).toBe(10);
 		});
@@ -1302,7 +1302,7 @@ describe('K8sBaseList', () => {
 
 			// Try to remove the Id column (canBeHidden=false)
 			act(() => {
-				// eslint-disable-next-line no-restricted-syntax
+				// oxlint-disable-next-line signoz/no-zustand-getstate-in-hooks
 				useInfraMonitoringTableColumnsStore
 					.getState()
 					.removeColumn(InfraMonitoringEntity.PODS, 'id');

frontend/src/container/ListOfDashboard/SearchFilter/Dashboard.machine.tsx

@@ -1,51 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { createMachine } from 'xstate';
-
-export const DashboardSearchAndFilter = createMachine({
-	tsTypes: {} as import('./Dashboard.machine.typegen').Typegen0,
-	initial: 'Idle',
-	states: {
-		Category: {
-			on: {
-				NEXT: {
-					actions: 'onSelectOperator',
-					target: 'Operator',
-				},
-				onBlur: {
-					actions: 'onBlurPurge',
-					target: 'Idle',
-				},
-			},
-		},
-		Operator: {
-			on: {
-				NEXT: {
-					actions: 'onSelectValue',
-					target: 'Value',
-				},
-				onBlur: {
-					actions: 'onBlurPurge',
-					target: 'Idle',
-				},
-			},
-		},
-		Value: {
-			on: {
-				onBlur: {
-					actions: ['onValidateQuery', 'onBlurPurge'],
-					target: 'Idle',
-				},
-			},
-		},
-		Idle: {
-			on: {
-				NEXT: {
-					actions: 'onSelectCategory',
-					description: 'Select Category',
-					target: 'Category',
-				},
-			},
-		},
-	},
-	id: 'Dashboard Search And Filter',
-});

frontend/src/container/ListOfDashboard/SearchFilter/Dashboard.machine.typegen.ts

@@ -1,32 +0,0 @@
-// This file was automatically generated. Edits will be overwritten
-
-export interface Typegen0 {
-	'@@xstate/typegen': true;
-	eventsCausingActions: {
-		onSelectOperator: 'NEXT';
-		onBlurPurge: 'onBlur';
-		onSelectValue: 'NEXT';
-		onValidateQuery: 'onBlur';
-		onSelectCategory: 'NEXT';
-	};
-	internalEvents: {
-		'xstate.init': { type: 'xstate.init' };
-	};
-	invokeSrcNameMap: {};
-	missingImplementations: {
-		actions:
-			| 'onSelectOperator'
-			| 'onBlurPurge'
-			| 'onSelectValue'
-			| 'onValidateQuery'
-			| 'onSelectCategory';
-		services: never;
-		guards: never;
-		delays: never;
-	};
-	eventsCausingServices: {};
-	eventsCausingGuards: {};
-	eventsCausingDelays: {};
-	matchesStates: 'Category' | 'Operator' | 'Value' | 'Idle';
-	tags: never;
-}

frontend/src/container/ListOfDashboard/SearchFilter/QueryChip.tsx

@@ -1,21 +0,0 @@
-import { QueryChipContainer, QueryChipItem } from './styles';
-import { IQueryStructure } from './types';
-
-export default function QueryChip({
-	queryData,
-	onRemove,
-}: {
-	queryData: IQueryStructure;
-	onRemove: (id: string) => void;
-}): JSX.Element {
-	const { category, operator, value, id } = queryData;
-	return (
-		<QueryChipContainer>
-			<QueryChipItem>{category}</QueryChipItem>
-			<QueryChipItem>{operator}</QueryChipItem>
-			<QueryChipItem closable onClose={(): void => onRemove(id)}>
-				{Array.isArray(value) ? value.join(', ') : null}
-			</QueryChipItem>
-		</QueryChipContainer>
-	);
-}

frontend/src/container/ListOfDashboard/SearchFilter/__tests__/utils.test.ts

@@ -1,64 +0,0 @@
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { v4 as uuid } from 'uuid';
-
-import { TOperator } from '../types';
-import { executeSearchQueries } from '../utils';
-
-describe('executeSearchQueries', () => {
-	const firstDashboard: Dashboard = {
-		id: uuid(),
-		createdAt: '',
-		updatedAt: '',
-		createdBy: '',
-		updatedBy: '',
-		data: {
-			title: 'first dashboard',
-			variables: {},
-		},
-	};
-	const secondDashboard: Dashboard = {
-		id: uuid(),
-		createdAt: '',
-		updatedAt: '',
-		createdBy: '',
-		updatedBy: '',
-		data: {
-			title: 'second dashboard',
-			variables: {},
-		},
-	};
-	const thirdDashboard: Dashboard = {
-		id: uuid(),
-		createdAt: '',
-		updatedAt: '',
-		createdBy: '',
-		updatedBy: '',
-		data: {
-			title: 'third dashboard (with special characters +?\\)',
-			variables: {},
-		},
-	};
-	const dashboards = [firstDashboard, secondDashboard, thirdDashboard];
-
-	it('should filter dashboards based on title', () => {
-		const query = {
-			category: 'title',
-			id: 'someid',
-			operator: '=' as TOperator,
-			value: 'first dashboard',
-		};
-
-		expect(executeSearchQueries([query], dashboards)).toEqual([firstDashboard]);
-	});
-
-	it('should filter dashboards with special characters', () => {
-		const query = {
-			category: 'title',
-			id: 'someid',
-			operator: '=' as TOperator,
-			value: 'third dashboard (with special characters +?\\)',
-		};
-
-		expect(executeSearchQueries([query], dashboards)).toEqual([thirdDashboard]);
-	});
-});

frontend/src/container/ListOfDashboard/SearchFilter/index.tsx

@@ -1,212 +0,0 @@
-import {
-	MutableRefObject,
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
-import { CloseCircleFilled } from '@ant-design/icons';
-// eslint-disable-next-line no-restricted-imports
-import { useMachine } from '@xstate/react';
-import { Button, RefSelectProps, Select } from 'antd';
-import history from 'lib/history';
-import { filter, map } from 'lodash-es';
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { v4 as uuidv4 } from 'uuid';
-
-import { DashboardSearchAndFilter } from './Dashboard.machine';
-import QueryChip from './QueryChip';
-import { QueryChipItem, SearchContainer } from './styles';
-import { IOptionsData, IQueryStructure, TCategory, TOperator } from './types';
-import {
-	convertQueriesToURLQuery,
-	convertURLQueryStringToQuery,
-	executeSearchQueries,
-	OptionsSchemas,
-	OptionsValueResolution,
-} from './utils';
-
-function SearchFilter({
-	searchData,
-	filterDashboards,
-}: {
-	searchData: Dashboard[];
-	filterDashboards: (filteredDashboards: Dashboard[]) => void;
-}): JSX.Element {
-	const [category, setCategory] = useState<TCategory>();
-	const [optionsData, setOptionsData] = useState<IOptionsData>(
-		OptionsSchemas.attribute,
-	);
-	const selectRef = useRef() as MutableRefObject<RefSelectProps>;
-	const [selectedValues, setSelectedValues] = useState<string[]>([]);
-	const [staging, setStaging] = useState<string[] | string[][] | unknown[]>([]);
-	const [queries, setQueries] = useState<IQueryStructure[]>([]);
-
-	useEffect(() => {
-		const searchQueryString = new URLSearchParams(history.location.search).get(
-			'search',
-		);
-		if (searchQueryString) {
-			setQueries(convertURLQueryStringToQuery(searchQueryString) || []);
-		}
-	}, []);
-	useEffect(() => {
-		filterDashboards(executeSearchQueries(queries, searchData));
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [queries, searchData]);
-
-	const updateURLWithQuery = useCallback(
-		(inputQueries?: IQueryStructure[]): void => {
-			history.push({
-				pathname: history.location.pathname,
-				search:
-					inputQueries || queries
-						? `?search=${convertQueriesToURLQuery(inputQueries || queries)}`
-						: '',
-			});
-		},
-		[queries],
-	);
-
-	useEffect(() => {
-		if (Array.isArray(queries) && queries.length > 0) {
-			updateURLWithQuery();
-		}
-	}, [queries, updateURLWithQuery]);
-
-	const [state, send] = useMachine(DashboardSearchAndFilter, {
-		actions: {
-			onSelectCategory: () => {
-				setOptionsData(OptionsSchemas.attribute);
-			},
-			onSelectOperator: () => {
-				setOptionsData(OptionsSchemas.operator);
-			},
-			onSelectValue: () => {
-				setOptionsData(
-					OptionsValueResolution(category as TCategory, searchData) as IOptionsData,
-				);
-			},
-			onBlurPurge: () => {
-				setSelectedValues([]);
-				setStaging([]);
-			},
-			onValidateQuery: () => {
-				if (staging.length <= 2 && selectedValues.length === 0) {
-					return;
-				}
-				setQueries([
-					...queries,
-					{
-						id: uuidv4(),
-						category: staging[0] as string,
-						operator: staging[1] as TOperator,
-						value: selectedValues,
-					},
-				]);
-			},
-		},
-	});
-
-	const nextState = (): void => {
-		send('NEXT');
-	};
-
-	const removeQueryById = (queryId: string): void => {
-		setQueries((queries) => {
-			const updatedQueries = filter(queries, ({ id }) => id !== queryId);
-			updateURLWithQuery(updatedQueries);
-			return updatedQueries;
-		});
-	};
-
-	const handleChange = (value: never | string[]): void => {
-		if (!value) {
-			return;
-		}
-		if (optionsData.mode) {
-			setSelectedValues(value.filter(Boolean));
-			return;
-		}
-		setStaging([...staging, value]);
-
-		if (state.value === 'Category') {
-			setCategory(`${value}`.toLowerCase() as TCategory);
-		}
-		nextState();
-		setSelectedValues([]);
-	};
-	const handleFocus = (): void => {
-		if (state.value === 'Idle') {
-			send('NEXT');
-			selectRef.current?.focus();
-		}
-	};
-
-	const handleBlur = (): void => {
-		send('onBlur');
-		selectRef?.current?.blur();
-	};
-
-	const clearQueries = (): void => {
-		setQueries([]);
-		history.push({
-			pathname: history.location.pathname,
-			search: ``,
-		});
-	};
-
-	return (
-		<SearchContainer>
-			<div>
-				{map(queries, (query) => (
-					<QueryChip key={query.id} queryData={query} onRemove={removeQueryById} />
-				))}
-				{map(staging, (value) => (
-					<QueryChipItem key={JSON.stringify(value)}>
-						{value as string}
-					</QueryChipItem>
-				))}
-			</div>
-			{optionsData && (
-				<Select
-					placeholder={
-						!queries.length &&
-						!staging.length &&
-						!selectedValues.length &&
-						'Search or Filter results'
-					}
-					size="small"
-					ref={selectRef}
-					mode={optionsData.mode as 'tags' | 'multiple'}
-					style={{ flex: 1 }}
-					onChange={handleChange}
-					bordered={false}
-					suffixIcon={null}
-					value={selectedValues}
-					onFocus={handleFocus}
-					onBlur={handleBlur}
-					showSearch
-				>
-					{optionsData.options &&
-						Array.isArray(optionsData.options) &&
-						optionsData.options.map(
-							(optionItem): JSX.Element => (
-								<Select.Option
-									key={(optionItem.value as string) || (optionItem.name as string)}
-									value={optionItem.value || optionItem.name}
-								>
-									{optionItem.name}
-								</Select.Option>
-							),
-						)}
-				</Select>
-			)}
-			{queries && queries.length > 0 && (
-				<Button icon={<CloseCircleFilled />} type="text" onClick={clearQueries} />
-			)}
-		</SearchContainer>
-	);
-}
-
-export default SearchFilter;

frontend/src/container/ListOfDashboard/SearchFilter/styles.ts

@@ -1,27 +0,0 @@
-import { grey } from '@ant-design/colors';
-import { Tag } from 'antd';
-import styled from 'styled-components';
-
-export const SearchContainer = styled.div`
-	width: 100%;
-	display: flex;
-	align-items: center;
-	gap: 0.2rem;
-	padding: 0.2rem 0;
-	margin: 1rem 0;
-	border: 1px solid #ccc5;
-`;
-export const QueryChipContainer = styled.span`
-	display: flex;
-	align-items: center;
-	margin-right: 0.5rem;
-	&:hover {
-		& > * {
-			background: ${grey.primary}44;
-		}
-	}
-`;
-
-export const QueryChipItem = styled(Tag)`
-	margin-right: 0.1rem;
-`;

frontend/src/container/ListOfDashboard/SearchFilter/types.ts

@@ -1,18 +0,0 @@
-export type TOperator = '=' | '!=';
-
-export type TCategory = 'title' | 'description' | 'tags';
-export interface IQueryStructure {
-	category: string;
-	id: string;
-	operator: TOperator;
-	value: string | string[];
-}
-
-interface IOptions {
-	name: string;
-	value?: string;
-}
-export interface IOptionsData {
-	mode: undefined | 'tags' | 'multiple';
-	options: IOptions[] | [];
-}

frontend/src/container/ListOfDashboard/SearchFilter/utils.ts

@@ -1,153 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { decode, encode } from 'js-base64';
-import { flattenDeep, map, uniqWith } from 'lodash-es';
-import { Dashboard } from 'types/api/dashboard/getAll';
-
-import { IOptionsData, IQueryStructure, TCategory, TOperator } from './types';
-
-export const convertQueriesToURLQuery = (
-	queries: IQueryStructure[],
-): string => {
-	if (!queries || !queries.length) {
-		return '';
-	}
-
-	return encode(JSON.stringify(queries));
-};
-
-export const convertURLQueryStringToQuery = (
-	queryString: string,
-): IQueryStructure[] => JSON.parse(decode(queryString));
-
-export const resolveOperator = (
-	result: unknown,
-	operator: TOperator,
-): boolean => {
-	if (operator === '!=') {
-		return !result;
-	}
-	if (operator === '=') {
-		return !!result;
-	}
-	return !!result;
-};
-export const executeSearchQueries = (
-	queries: IQueryStructure[] = [],
-	searchData: Dashboard[] = [],
-): Dashboard[] => {
-	if (!searchData.length || !queries.length) {
-		return searchData;
-	}
-	const escapeRegExp = (regExp: string): string =>
-		regExp.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-	queries.forEach((query: IQueryStructure) => {
-		const { operator } = query;
-		let { value } = query;
-		const categoryLowercase: TCategory = `${query.category}`.toLowerCase() as
-			| 'title'
-			| 'description';
-		value = flattenDeep([value]);
-
-		searchData = searchData.filter(({ data: searchPayload }: Dashboard) => {
-			try {
-				const searchSpace =
-					flattenDeep([searchPayload[categoryLowercase]]).filter(Boolean) || null;
-				if (!searchSpace || !searchSpace.length) {
-					return resolveOperator(false, operator);
-				}
-
-				for (const searchSpaceItem of searchSpace) {
-					if (searchSpaceItem) {
-						for (const queryValue of value) {
-							if (searchSpaceItem.match(escapeRegExp(queryValue))) {
-								return resolveOperator(true, operator);
-							}
-						}
-					}
-				}
-			} catch (error) {
-				console.error(error);
-			}
-			return resolveOperator(false, operator);
-		});
-	});
-	return searchData;
-};
-
-export const OptionsSchemas = {
-	attribute: {
-		mode: undefined,
-		options: [
-			{
-				name: 'Title',
-			},
-			{
-				name: 'Description',
-			},
-			{
-				name: 'Tags',
-			},
-		],
-	},
-	operator: {
-		mode: undefined,
-		options: [
-			{
-				value: '=',
-				name: 'Equal',
-			},
-			{
-				name: 'Not Equal',
-				value: '!=',
-			},
-		],
-	},
-};
-
-export function OptionsValueResolution(
-	category: TCategory,
-	searchData: Dashboard[],
-): Record<string, unknown> | IOptionsData {
-	const OptionsValueSchema = {
-		title: {
-			mode: 'tags',
-			options: uniqWith(
-				map(searchData, (searchItem) => ({ name: searchItem.data.title })),
-				(prev, next) => prev.name === next.name,
-			),
-		},
-		description: {
-			mode: 'tags',
-			options: uniqWith(
-				map(searchData, (searchItem) =>
-					searchItem.data.description
-						? {
-								name: searchItem.data.description,
-								value: searchItem.data.description,
-						  }
-						: null,
-				).filter(Boolean),
-				(prev, next) => prev?.name === next?.name,
-			),
-		},
-		tags: {
-			mode: 'tags',
-			options: uniqWith(
-				map(
-					flattenDeep(
-						// @ts-ignore
-						map(searchData, (searchItem) => searchItem.data.tags).filter(Boolean),
-					),
-					(tag) => ({ name: tag }),
-				),
-				(prev, next) => prev.name === next.name,
-			),
-		},
-	};
-
-	return (
-		OptionsValueSchema[category] ||
-		({ mode: undefined, options: [] } as IOptionsData)
-	);
-}

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -1,36 +1,22 @@
-import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
-import { toast } from '@signozhq/ui';
 import { Card, Typography } from 'antd';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
-import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
-import { getRowBackgroundColor } from 'components/Logs/LogStateIndicator/getRowBackgroundColor';
-import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import RawLogView from 'components/Logs/RawLogView';
-import { useLogsTableColumns } from 'components/Logs/TableView/useLogsTableColumns';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import type { TanStackTableHandle } from 'components/TanStackTableView';
-import TanStackTable from 'components/TanStackTableView';
-import { useHiddenColumnIds } from 'components/TanStackTableView/useColumnStore';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
-import { QueryParams } from 'constants/query';
 import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
+import TanStackTableView from 'container/LogsExplorerList/TanStackTableView';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useEventSource } from 'providers/EventSource';
-import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
 // interfaces
 import { ILog } from 'types/api/logs/log';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -46,17 +32,11 @@ function LiveLogsList({
 	isLoading,
 	handleChangeSelectedView,
 }: LiveLogsListProps): JSX.Element {
-	const ref = useRef<TanStackTableHandle | VirtuosoHandle | null>(null);
-	const { pathname } = useLocation();
-	const [, setCopy] = useCopyToClipboard();
-	const isDarkMode = useIsDarkMode();
+	const ref = useRef<VirtuosoHandle>(null);
 
 	const { isConnectionLoading } = useEventSource();
 
 	const { activeLogId } = useCopyLogLink();
-	const { logs: logsPreferences } = usePreferenceContext();
-	const hiddenColumnIds = useHiddenColumnIds(LOCALSTORAGE.LOGS_LIST_COLUMNS);
-	const hasReconciledHiddenColumnsRef = useRef(false);
 
 	const {
 		activeLog,
@@ -72,7 +52,7 @@ function LiveLogsList({
 		[logs],
 	);
 
-	const { options } = useOptionsMenu({
+	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator: StringOperators.NOOP,
@@ -88,63 +68,9 @@ function LiveLogsList({
 		...options.selectColumns,
 	]);
 
-	const syncedSelectedColumns = useMemo(
-		() =>
-			options.selectColumns.filter(({ name }) => !hiddenColumnIds.includes(name)),
-		[options.selectColumns, hiddenColumnIds],
-	);
-
-	const logsColumns = useLogsTableColumns({
-		fields: selectedFields,
-		fontSize: options.fontSize,
-		appendTo: 'end',
-	});
-
-	useEffect(() => {
-		if (hasReconciledHiddenColumnsRef.current) {
-			return;
-		}
-
-		hasReconciledHiddenColumnsRef.current = true;
-
-		if (syncedSelectedColumns.length === options.selectColumns.length) {
-			return;
-		}
-
-		logsPreferences.updateColumns(syncedSelectedColumns);
-	}, [logsPreferences, options.selectColumns.length, syncedSelectedColumns]);
-
-	const handleColumnRemove = useCallback(
-		(columnId: string) => {
-			const updatedColumns = options.selectColumns.filter(
-				({ name }) => name !== columnId,
-			);
-			logsPreferences.updateColumns(updatedColumns);
-		},
-		[options.selectColumns, logsPreferences],
-	);
-
-	const makeOnLogCopy = useCallback(
-		(log: ILog) => (event: MouseEvent<HTMLElement>): void => {
-			event.preventDefault();
-			event.stopPropagation();
-			const urlQuery = new URLSearchParams(window.location.search);
-			urlQuery.delete(QueryParams.activeLogId);
-			urlQuery.delete(QueryParams.relativeTime);
-			urlQuery.set(QueryParams.activeLogId, `"${log.id}"`);
-			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
-			setCopy(link);
-			toast.success('Copied to clipboard', { position: 'top-right' });
-		},
-		[pathname, setCopy],
-	);
-
 	const handleScrollToLog = useScrollToLog({
 		logs: formattedLogs,
-		virtuosoRef: ref as React.RefObject<Pick<
-			VirtuosoHandle,
-			'scrollToIndex'
-		> | null>,
+		virtuosoRef: ref,
 	});
 
 	const getItemContent = useCallback(
@@ -230,49 +156,29 @@ function LiveLogsList({
 			{formattedLogs.length !== 0 && (
 				<InfinityWrapperStyled>
 					{options.format === OptionFormatTypes.TABLE ? (
-						<TanStackTable<ILog>
-							ref={ref as React.Ref<TanStackTableHandle>}
-							columns={logsColumns}
-							columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
-							onColumnRemove={handleColumnRemove}
-							plainTextCellLineClamp={options.maxLines}
-							cellTypographySize={options.fontSize}
-							data={formattedLogs}
+						<TanStackTableView
+							ref={ref}
 							isLoading={false}
-							isRowActive={(log): boolean => log.id === activeLog?.id}
-							getRowStyle={(log): CSSProperties =>
-								({
-									'--row-active-bg': getRowBackgroundColor(
-										isDarkMode,
-										getLogIndicatorType(log),
-									),
-									'--row-hover-bg': getRowBackgroundColor(
-										isDarkMode,
-										getLogIndicatorType(log),
-									),
-								} as CSSProperties)
-							}
-							onRowClick={(log): void => {
-								handleSetActiveLog(log);
+							tableViewProps={{
+								logs: formattedLogs,
+								fields: selectedFields,
+								linesPerRow: options.maxLines,
+								fontSize: options.fontSize,
+								appendTo: 'end',
+								activeLogIndex,
 							}}
-							onRowDeactivate={handleCloseLogDetail}
-							activeRowIndex={activeLogIndex}
-							renderRowActions={(log): ReactNode => (
-								<LogLinesActionButtons
-									handleShowContext={(e): void => {
-										e.preventDefault();
-										e.stopPropagation();
-										handleSetActiveLog(log, VIEW_TYPES.CONTEXT);
-									}}
-									onLogCopy={makeOnLogCopy(log)}
-								/>
-							)}
+							handleChangeSelectedView={handleChangeSelectedView}
+							logs={formattedLogs}
+							onSetActiveLog={handleSetActiveLog}
+							onClearActiveLog={handleCloseLogDetail}
+							activeLog={activeLog}
+							onRemoveColumn={config.addColumn?.onRemove}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
 							<OverlayScrollbar isVirtuoso>
 								<Virtuoso
-									ref={ref as React.Ref<VirtuosoHandle>}
+									ref={ref}
 									initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
 									data={formattedLogs}
 									totalCount={formattedLogs.length}

frontend/src/container/LogsExplorerList/ColumnView/ColumnView.tsx

@@ -0,0 +1,276 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ColumnDef, DataTable, Row } from '@signozhq/ui';
+import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
+import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import { useTableView } from 'components/Logs/TableView/useTableView';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
+import { FontSize } from 'container/OptionsMenu/types';
+import dayjs from 'dayjs';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
+import useDragColumns from 'hooks/useDragColumns';
+import { getDraggedColumns } from 'hooks/useDragColumns/utils';
+import useUrlQueryData from 'hooks/useUrlQueryData';
+import { isEmpty, isEqual } from 'lodash-es';
+import { useTimezone } from 'providers/Timezone';
+import { ILog } from 'types/api/logs/log';
+
+interface ColumnViewProps {
+	logs: ILog[];
+	onLoadMore: () => void;
+	selectedFields: any[];
+	isLoading: boolean;
+	isFetching: boolean;
+
+	isFrequencyChartVisible: boolean;
+	options: {
+		maxLinesPerRow: number;
+		fontSize: FontSize;
+	};
+}
+
+function ColumnView({
+	logs,
+	onLoadMore,
+	selectedFields,
+	isLoading,
+	isFetching,
+	isFrequencyChartVisible,
+	options,
+}: ColumnViewProps): JSX.Element {
+	const {
+		activeLog,
+		onSetActiveLog: handleSetActiveLog,
+		onClearActiveLog: handleClearActiveLog,
+		onAddToQuery: handleAddToQuery,
+	} = useActiveLog();
+
+	const [showActiveLog, setShowActiveLog] = useState<boolean>(false);
+
+	const { queryData: activeLogId } = useUrlQueryData<string | null>(
+		QueryParams.activeLogId,
+		null,
+	);
+
+	const scrollToIndexRef = useRef<
+		| ((
+				rowIndex: number,
+				options?: { align?: 'start' | 'center' | 'end' },
+		  ) => void)
+		| undefined
+	>();
+
+	const { timezone } = useTimezone();
+
+	useEffect(() => {
+		if (activeLogId) {
+			const log = logs.find(({ id }) => id === activeLogId);
+
+			if (log) {
+				handleSetActiveLog(log);
+				setShowActiveLog(true);
+			}
+		}
+	}, []);
+
+	const tableViewProps = {
+		logs,
+		fields: selectedFields,
+		linesPerRow: options.maxLinesPerRow as number,
+		fontSize: options.fontSize as FontSize,
+		appendTo: 'end' as const,
+		activeLogIndex: 0,
+	};
+
+	const { dataSource, columns } = useTableView({
+		...tableViewProps,
+		onClickExpand: handleSetActiveLog,
+	});
+
+	const { draggedColumns, onColumnOrderChange } = useDragColumns<
+		Record<string, unknown>
+	>(LOCALSTORAGE.LOGS_LIST_COLUMNS);
+
+	const tableColumns = useMemo(
+		() => getDraggedColumns<Record<string, unknown>>(columns, draggedColumns),
+		[columns, draggedColumns],
+	);
+
+	const scrollToLog = useCallback(
+		(logId: string): void => {
+			const logIndex = logs.findIndex((log) => log.id === logId);
+
+			if (logIndex !== -1 && scrollToIndexRef.current) {
+				scrollToIndexRef.current(logIndex, { align: 'center' });
+			}
+		},
+		[logs],
+	);
+
+	useEffect(() => {
+		if (activeLogId) {
+			scrollToLog(activeLogId);
+		}
+	}, [activeLogId]);
+
+	const args = {
+		columns,
+		tableId: 'virtualized-infinite-reorder-resize',
+		enableSorting: false,
+		enableFiltering: false,
+		enableGlobalFilter: false,
+		enableColumnReordering: true,
+		enableColumnResizing: true,
+		enableColumnPinning: false,
+		enableRowSelection: false,
+		enablePagination: false,
+		showHeaders: true,
+		defaultColumnWidth: 180,
+		minColumnWidth: 80,
+		maxColumnWidth: 480,
+		// Virtualization + Infinite Scroll
+		enableVirtualization: true,
+		estimateRowSize: 56,
+		overscan: 50,
+		rowHeight: 56,
+		enableInfiniteScroll: true,
+		enableScrollRestoration: false,
+		fixedHeight: isFrequencyChartVisible ? 560 : 760,
+		enableDynamicRowHeight: true,
+	};
+
+	const selectedColumns = useMemo(
+		() =>
+			tableColumns.map((field) => ({
+				id: field.key?.toString().toLowerCase().replace(/\./g, '_'), // IMP - Replace dots with underscores as reordering does not work well for accessorKey with dots
+				// accessorKey: field.name,
+				accessorFn: (row: Record<string, string>): string =>
+					row[field.key as string] as string,
+				header: field.title as string,
+				size: field.key === 'state-indicator' ? 4 : 180,
+				minSize: field.key === 'state-indicator' ? 4 : 120,
+				maxSize: field.key === 'state-indicator' ? 4 : Number.MAX_SAFE_INTEGER,
+				disableReorder: field.key === 'state-indicator',
+				disableDropBefore: field.key === 'state-indicator',
+				disableResizing: field.key === 'state-indicator',
+				cell: ({
+					row,
+					getValue,
+				}: {
+					row: Row<Record<string, string>>;
+					getValue: () => string | JSX.Element;
+				}): string | JSX.Element => {
+					if (field.key === 'state-indicator') {
+						const fontSize = options.fontSize as FontSize;
+
+						return (
+							<LogStateIndicator
+								severityText={row.original?.severity_text}
+								fontSize={fontSize}
+							/>
+						);
+					}
+
+					const isTimestamp = field.key === 'timestamp';
+					const cellContent = getValue();
+
+					if (isTimestamp) {
+						const formattedTimestamp = dayjs(cellContent as string).tz(
+							timezone.value,
+						);
+
+						return (
+							<div className="table-cell-content">
+								{formattedTimestamp.format(DATE_TIME_FORMATS.ISO_DATETIME_MS)}
+							</div>
+						);
+					}
+
+					return (
+						<div
+							className={`table-cell-content ${
+								row.original.id === activeLog?.id ? 'active-log' : ''
+							}`}
+						>
+							{cellContent}
+						</div>
+					);
+				},
+			})),
+		[tableColumns, options.fontSize, activeLog?.id],
+	);
+
+	const handleColumnOrderChange = (newColumns: ColumnDef<any>[]): void => {
+		if (isEmpty(newColumns) || isEqual(newColumns, selectedColumns)) {
+			return;
+		}
+
+		const formattedColumns = newColumns.map((column) => ({
+			id: column.id,
+			header: column.header,
+			size: column.size,
+			minSize: column.minSize,
+			maxSize: column.maxSize,
+			key: column.id,
+			title: column.header as string,
+			dataIndex: column.id,
+		}));
+
+		onColumnOrderChange(formattedColumns);
+	};
+
+	const handleRowClick = (row: Row<Record<string, unknown>>): void => {
+		const currentLog = logs.find(({ id }) => id === row.original.id);
+
+		setShowActiveLog(true);
+		handleSetActiveLog(currentLog as ILog);
+	};
+
+	const removeQueryParam = (key: string): void => {
+		const url = new URL(window.location.href);
+		url.searchParams.delete(key);
+		window.history.replaceState({}, '', url);
+	};
+
+	const handleLogDetailClose = (): void => {
+		removeQueryParam(QueryParams.activeLogId);
+		handleClearActiveLog();
+		setShowActiveLog(false);
+	};
+
+	return (
+		<div
+			className={`logs-list-table-view-container ${
+				options.fontSize as FontSize
+			} max-lines-${options.maxLinesPerRow as number}`}
+			data-max-lines-per-row={options.maxLinesPerRow}
+			data-font-size={options.fontSize}
+		>
+			<DataTable
+				{...args}
+				columns={selectedColumns as ColumnDef<Record<string, string>, unknown>[]}
+				data={dataSource}
+				hasMore
+				onLoadMore={onLoadMore}
+				loadingMore={isLoading || isFetching}
+				onColumnOrderChange={handleColumnOrderChange}
+				onRowClick={handleRowClick}
+				scrollToIndexRef={scrollToIndexRef}
+			/>
+
+			{showActiveLog && activeLog && (
+				<LogDetail
+					selectedTab={VIEW_TYPES.OVERVIEW}
+					log={activeLog}
+					onClose={handleLogDetailClose}
+					onAddToQuery={handleAddToQuery}
+					onClickActionItem={handleAddToQuery}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default ColumnView;

frontend/src/container/LogsExplorerList/RowHoverContext.tsx

@@ -0,0 +1,8 @@
+// eslint-disable-next-line no-restricted-imports
+import { createContext, useContext } from 'react';
+
+const RowHoverContext = createContext(false);
+
+export const useRowHover = (): boolean => useContext(RowHoverContext);
+
+export default RowHoverContext;

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackCustomTableRow.tsx

@@ -0,0 +1,84 @@
+import { ComponentProps, memo, useCallback, useState } from 'react';
+import { TableComponents } from 'react-virtuoso';
+import {
+	getLogIndicatorType,
+	getLogIndicatorTypeForTable,
+} from 'components/Logs/LogStateIndicator/utils';
+import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { ILog } from 'types/api/logs/log';
+
+import { TableRowStyled } from '../InfinityTableView/styles';
+import RowHoverContext from '../RowHoverContext';
+import { TanStackTableRowData } from './types';
+
+export type TableRowContext = {
+	activeLog?: ILog | null;
+	activeContextLog?: ILog | null;
+	logsById: Map<string, ILog>;
+};
+
+type VirtuosoTableRowProps = ComponentProps<
+	NonNullable<TableComponents<TanStackTableRowData, TableRowContext>['TableRow']>
+>;
+
+type TanStackCustomTableRowProps = VirtuosoTableRowProps;
+
+function TanStackCustomTableRow({
+	children,
+	item,
+	context,
+	...props
+}: TanStackCustomTableRowProps): JSX.Element {
+	const { isHighlighted } = useCopyLogLink(item.currentLog.id);
+	const isDarkMode = useIsDarkMode();
+	const [hasHovered, setHasHovered] = useState(false);
+	const rowId = String(item.currentLog.id ?? '');
+	const activeLog = context?.activeLog;
+	const activeContextLog = context?.activeContextLog;
+	const logsById = context?.logsById;
+	const rowLog = logsById?.get(rowId) || item.currentLog;
+	const logType = rowLog
+		? getLogIndicatorType(rowLog)
+		: getLogIndicatorTypeForTable(item.log);
+
+	const handleMouseEnter = useCallback(() => {
+		if (!hasHovered) {
+			setHasHovered(true);
+		}
+	}, [hasHovered]);
+
+	return (
+		<RowHoverContext.Provider value={hasHovered}>
+			<TableRowStyled
+				{...props}
+				$isDarkMode={isDarkMode}
+				$isActiveLog={
+					isHighlighted ||
+					rowId === String(activeLog?.id ?? '') ||
+					rowId === String(activeContextLog?.id ?? '')
+				}
+				$logType={logType}
+				onMouseEnter={handleMouseEnter}
+			>
+				{children}
+			</TableRowStyled>
+		</RowHoverContext.Provider>
+	);
+}
+
+export default memo(TanStackCustomTableRow, (prev, next) => {
+	const prevId = String(prev.item.currentLog.id ?? '');
+	const nextId = String(next.item.currentLog.id ?? '');
+	if (prevId !== nextId) {
+		return false;
+	}
+
+	const prevIsActive =
+		prevId === String(prev.context?.activeLog?.id ?? '') ||
+		prevId === String(prev.context?.activeContextLog?.id ?? '');
+	const nextIsActive =
+		nextId === String(next.context?.activeLog?.id ?? '') ||
+		nextId === String(next.context?.activeContextLog?.id ?? '');
+	return prevIsActive === nextIsActive;
+});

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackHeaderRow.tsx

@@ -0,0 +1,193 @@
+import type {
+	CSSProperties,
+	MouseEvent as ReactMouseEvent,
+	TouchEvent as ReactTouchEvent,
+} from 'react';
+import { useMemo } from 'react';
+import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
+import { useSortable } from '@dnd-kit/sortable';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui';
+import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
+import { GripVertical } from 'lucide-react';
+
+import { TableHeaderCellStyled } from '../InfinityTableView/styles';
+import { InfinityTableProps } from '../InfinityTableView/types';
+import { OrderedColumn, TanStackTableRowData } from './types';
+import { getColumnId } from './utils';
+
+import './styles/TanStackHeaderRow.styles.scss';
+
+type TanStackHeaderRowProps = {
+	column: OrderedColumn;
+	header?: TanStackHeader<TanStackTableRowData, unknown>;
+	isDarkMode: boolean;
+	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
+	hasSingleColumn: boolean;
+	canRemoveColumn?: boolean;
+	onRemoveColumn?: (columnKey: string) => void;
+};
+
+const GRIP_ICON_SIZE = 12;
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function TanStackHeaderRow({
+	column,
+	header,
+	isDarkMode,
+	fontSize,
+	hasSingleColumn,
+	canRemoveColumn = false,
+	onRemoveColumn,
+}: TanStackHeaderRowProps): JSX.Element {
+	const columnId = getColumnId(column);
+	const isDragColumn =
+		column.key !== 'expand' && column.key !== 'state-indicator';
+	const isResizableColumn = Boolean(header?.column.getCanResize());
+	const isColumnRemovable = Boolean(
+		canRemoveColumn &&
+			onRemoveColumn &&
+			column.key !== 'expand' &&
+			column.key !== 'state-indicator',
+	);
+	const isResizing = Boolean(header?.column.getIsResizing());
+	const resizeHandler = header?.getResizeHandler();
+	const headerText =
+		typeof column.title === 'string' && column.title
+			? column.title
+			: String(header?.id ?? columnId);
+	const headerTitleAttr = headerText.replace(/^\w/, (c) => c.toUpperCase());
+	const handleResizeStart = (
+		event: ReactMouseEvent<HTMLElement> | ReactTouchEvent<HTMLElement>,
+	): void => {
+		event.preventDefault();
+		event.stopPropagation();
+		resizeHandler?.(event);
+	};
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		setActivatorNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({
+		id: columnId,
+		disabled: !isDragColumn,
+	});
+	const headerCellStyle = useMemo(
+		() =>
+			({
+				'--tanstack-header-translate-x': `${Math.round(transform?.x ?? 0)}px`,
+				'--tanstack-header-translate-y': `${Math.round(transform?.y ?? 0)}px`,
+				'--tanstack-header-transition': isResizing ? 'none' : transition || 'none',
+			} as CSSProperties),
+		[isResizing, transform?.x, transform?.y, transition],
+	);
+	const headerCellClassName = [
+		'tanstack-header-cell',
+		isDragging ? 'is-dragging' : '',
+		isResizing ? 'is-resizing' : '',
+	]
+		.filter(Boolean)
+		.join(' ');
+	const headerContentClassName = [
+		'tanstack-header-content',
+		isResizableColumn ? 'has-resize-control' : '',
+		isColumnRemovable ? 'has-action-control' : '',
+	]
+		.filter(Boolean)
+		.join(' ');
+
+	return (
+		<TableHeaderCellStyled
+			ref={setNodeRef}
+			$isLogIndicator={column.key === 'state-indicator'}
+			$isDarkMode={isDarkMode}
+			$isDragColumn={false}
+			className={headerCellClassName}
+			key={columnId}
+			fontSize={fontSize}
+			$hasSingleColumn={hasSingleColumn}
+			style={headerCellStyle}
+		>
+			<span className={headerContentClassName}>
+				{isDragColumn ? (
+					<span className="tanstack-grip-slot">
+						<span
+							ref={setActivatorNodeRef}
+							{...attributes}
+							{...listeners}
+							role="button"
+							aria-label={`Drag ${String(
+								column.title || header?.id || columnId,
+							)} column`}
+							className="tanstack-grip-activator"
+						>
+							<GripVertical size={GRIP_ICON_SIZE} />
+						</span>
+					</span>
+				) : null}
+				<span className="tanstack-header-title" title={headerTitleAttr}>
+					{header
+						? flexRender(header.column.columnDef.header, header.getContext())
+						: String(column.title || '').replace(/^\w/, (c) => c.toUpperCase())}
+				</span>
+				{isColumnRemovable && (
+					<Popover>
+						<PopoverTrigger asChild>
+							<span
+								role="button"
+								aria-label={`Column actions for ${headerTitleAttr}`}
+								className="tanstack-header-action-trigger"
+								onMouseDown={(event): void => {
+									event.stopPropagation();
+								}}
+							>
+								<MoreOutlined />
+							</span>
+						</PopoverTrigger>
+						<PopoverContent
+							align="end"
+							sideOffset={6}
+							className="tanstack-column-actions-content"
+						>
+							<button
+								type="button"
+								className="tanstack-remove-column-action"
+								onClick={(event): void => {
+									event.preventDefault();
+									event.stopPropagation();
+									onRemoveColumn?.(String(column.key));
+								}}
+							>
+								<CloseOutlined className="tanstack-remove-column-action-icon" />
+								Remove column
+							</button>
+						</PopoverContent>
+					</Popover>
+				)}
+			</span>
+			{isResizableColumn && (
+				<span
+					role="presentation"
+					className="cursor-col-resize"
+					title="Drag to resize column"
+					onClick={(event): void => {
+						event.preventDefault();
+						event.stopPropagation();
+					}}
+					onMouseDown={(event): void => {
+						handleResizeStart(event);
+					}}
+					onTouchStart={(event): void => {
+						handleResizeStart(event);
+					}}
+				>
+					<span className="tanstack-resize-handle-line" />
+				</span>
+			)}
+		</TableHeaderCellStyled>
+	);
+}
+
+export default TanStackHeaderRow;

frontend/src/container/LogsExplorerList/TanStackTableView/TanStackRow.tsx

@@ -0,0 +1,95 @@
+import {
+	MouseEvent as ReactMouseEvent,
+	MouseEventHandler,
+	useCallback,
+} from 'react';
+import { flexRender, Row as TanStackRowModel } from '@tanstack/react-table';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
+import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
+
+import { TableCellStyled } from '../InfinityTableView/styles';
+import { InfinityTableProps } from '../InfinityTableView/types';
+import { useRowHover } from '../RowHoverContext';
+import { TanStackTableRowData } from './types';
+
+type TanStackRowCellsProps = {
+	row: TanStackRowModel<TanStackTableRowData>;
+	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
+	onSetActiveLog?: InfinityTableProps['onSetActiveLog'];
+	onClearActiveLog?: InfinityTableProps['onClearActiveLog'];
+	isActiveLog?: boolean;
+	isDarkMode: boolean;
+	onLogCopy: (logId: string, event: ReactMouseEvent<HTMLElement>) => void;
+	isLogsExplorerPage: boolean;
+};
+
+function TanStackRowCells({
+	row,
+	fontSize,
+	onSetActiveLog,
+	onClearActiveLog,
+	isActiveLog = false,
+	isDarkMode,
+	onLogCopy,
+	isLogsExplorerPage,
+}: TanStackRowCellsProps): JSX.Element {
+	const { currentLog } = row.original;
+	const hasHovered = useRowHover();
+
+	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
+		(event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			onSetActiveLog?.(currentLog, VIEW_TYPES.CONTEXT);
+		},
+		[currentLog, onSetActiveLog],
+	);
+
+	const handleShowLogDetails = useCallback(() => {
+		if (!currentLog) {
+			return;
+		}
+
+		if (isActiveLog && onClearActiveLog) {
+			onClearActiveLog();
+			return;
+		}
+
+		onSetActiveLog?.(currentLog);
+	}, [currentLog, isActiveLog, onClearActiveLog, onSetActiveLog]);
+
+	const visibleCells = row.getVisibleCells();
+	const lastCellIndex = visibleCells.length - 1;
+
+	return (
+		<>
+			{visibleCells.map((cell, index) => {
+				const columnKey = cell.column.id;
+				const isLastCell = index === lastCellIndex;
+				return (
+					<TableCellStyled
+						$isDragColumn={false}
+						$isLogIndicator={columnKey === 'state-indicator'}
+						$hasSingleColumn={visibleCells.length <= 2}
+						$isDarkMode={isDarkMode}
+						key={cell.id}
+						fontSize={fontSize}
+						className={columnKey}
+						onClick={handleShowLogDetails}
+					>
+						{flexRender(cell.column.columnDef.cell, cell.getContext())}
+						{isLastCell && isLogsExplorerPage && hasHovered && (
+							<LogLinesActionButtons
+								handleShowContext={handleShowContext}
+								onLogCopy={(event): void => onLogCopy(currentLog.id, event)}
+								customClassName="table-view-log-actions"
+							/>
+						)}
+					</TableCellStyled>
+				);
+			})}
+		</>
+	);
+}
+
+export default TanStackRowCells;

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackCustomTableRow.test.tsx

@@ -0,0 +1,105 @@
+import { render, screen } from '@testing-library/react';
+
+import TanStackCustomTableRow, {
+	TableRowContext,
+} from '../TanStackCustomTableRow';
+import type { TanStackTableRowData } from '../types';
+
+jest.mock('../../InfinityTableView/styles', () => ({
+	TableRowStyled: 'tr',
+}));
+
+jest.mock('hooks/logs/useCopyLogLink', () => ({
+	useCopyLogLink: (): { isHighlighted: boolean } => ({ isHighlighted: false }),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+jest.mock('components/Logs/LogStateIndicator/utils', () => ({
+	getLogIndicatorType: (): string => 'info',
+	getLogIndicatorTypeForTable: (): string => 'info',
+}));
+
+const item: TanStackTableRowData = {
+	log: {},
+	currentLog: { id: 'row-1' } as TanStackTableRowData['currentLog'],
+	rowIndex: 0,
+};
+
+const virtuosoTableRowAttrs = {
+	'data-index': 0,
+	'data-item-index': 0,
+	'data-known-size': 40,
+} as const;
+
+const defaultContext: TableRowContext = {
+	activeLog: null,
+	activeContextLog: null,
+	logsById: new Map(),
+};
+
+describe('TanStackCustomTableRow', () => {
+	it('renders children inside TableRowStyled', () => {
+		render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoTableRowAttrs}
+						item={item}
+						context={defaultContext}
+					>
+						<td>cell</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+
+		expect(screen.getByText('cell')).toBeInTheDocument();
+	});
+
+	it('marks row active when activeLog matches item id', () => {
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoTableRowAttrs}
+						item={item}
+						context={{
+							...defaultContext,
+							activeLog: { id: 'row-1' } as never,
+						}}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+
+		const row = container.querySelector('tr');
+		expect(row).toBeTruthy();
+	});
+
+	it('uses logsById entry when present for indicator type', () => {
+		const logFromMap = { id: 'row-1', severity_text: 'error' } as never;
+		render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoTableRowAttrs}
+						item={item}
+						context={{
+							...defaultContext,
+							logsById: new Map([['row-1', logFromMap]]),
+						}}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+
+		expect(screen.getByText('x')).toBeInTheDocument();
+	});
+});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackHeaderRow.test.tsx

@@ -0,0 +1,152 @@
+import type { Header } from '@tanstack/react-table';
+import { render, screen } from '@testing-library/react';
+import { FontSize } from 'container/OptionsMenu/types';
+
+import TanStackHeaderRow from '../TanStackHeaderRow';
+import type { OrderedColumn, TanStackTableRowData } from '../types';
+
+jest.mock('../../InfinityTableView/styles', () => ({
+	TableHeaderCellStyled: 'th',
+}));
+
+const mockUseSortable = jest.fn((_args?: unknown) => ({
+	attributes: {},
+	listeners: {},
+	setNodeRef: jest.fn(),
+	setActivatorNodeRef: jest.fn(),
+	transform: null,
+	transition: undefined,
+	isDragging: false,
+}));
+
+jest.mock('@dnd-kit/sortable', () => ({
+	useSortable: (args: unknown): ReturnType<typeof mockUseSortable> =>
+		mockUseSortable(args),
+}));
+
+jest.mock('@tanstack/react-table', () => ({
+	flexRender: (def: unknown, ctx: unknown): unknown => {
+		if (typeof def === 'string') {
+			return def;
+		}
+		if (typeof def === 'function') {
+			return (def as (c: unknown) => unknown)(ctx);
+		}
+		return def;
+	},
+}));
+
+const column = (key: string): OrderedColumn =>
+	({ key, title: key } as OrderedColumn);
+
+const mockHeader = (
+	id: string,
+	canResize = true,
+): Header<TanStackTableRowData, unknown> =>
+	(({
+		id,
+		column: {
+			getCanResize: (): boolean => canResize,
+			getIsResizing: (): boolean => false,
+			columnDef: { header: id },
+		},
+		getContext: (): unknown => ({}),
+		getResizeHandler: (): (() => void) => jest.fn(),
+		flexRender: undefined,
+	} as unknown) as Header<TanStackTableRowData, unknown>);
+
+describe('TanStackHeaderRow', () => {
+	beforeEach(() => {
+		mockUseSortable.mockClear();
+	});
+
+	it('renders column title when header is undefined', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={column('timestamp')}
+							isDarkMode={false}
+							fontSize={FontSize.SMALL}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+
+		expect(screen.getByText('Timestamp')).toBeInTheDocument();
+	});
+
+	it('enables useSortable for draggable columns', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={column('body')}
+							header={mockHeader('body')}
+							isDarkMode={false}
+							fontSize={FontSize.SMALL}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+
+		expect(mockUseSortable).toHaveBeenCalledWith(
+			expect.objectContaining({
+				id: 'body',
+				disabled: false,
+			}),
+		);
+	});
+
+	it('disables sortable for expand column', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={column('expand')}
+							header={mockHeader('expand', false)}
+							isDarkMode={false}
+							fontSize={FontSize.SMALL}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+
+		expect(mockUseSortable).toHaveBeenCalledWith(
+			expect.objectContaining({
+				disabled: true,
+			}),
+		);
+	});
+
+	it('shows drag grip for draggable columns', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={column('body')}
+							header={mockHeader('body')}
+							isDarkMode={false}
+							fontSize={FontSize.SMALL}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+
+		expect(
+			screen.getByRole('button', { name: /Drag body column/i }),
+		).toBeInTheDocument();
+	});
+});

frontend/src/container/LogsExplorerList/TanStackTableView/__tests__/TanStackRow.test.tsx

@@ -0,0 +1,193 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import RowHoverContext from 'container/LogsExplorerList/RowHoverContext';
+import { FontSize } from 'container/OptionsMenu/types';
+
+import TanStackRowCells from '../TanStackRow';
+import type { TanStackTableRowData } from '../types';
+
+jest.mock('../../InfinityTableView/styles', () => ({
+	TableCellStyled: 'td',
+}));
+
+jest.mock(
+	'components/Logs/LogLinesActionButtons/LogLinesActionButtons',
+	() => ({
+		__esModule: true,
+		default: ({
+			onLogCopy,
+		}: {
+			onLogCopy: (e: React.MouseEvent) => void;
+		}): JSX.Element => (
+			<button type="button" data-testid="copy-btn" onClick={onLogCopy}>
+				copy
+			</button>
+		),
+	}),
+);
+
+const flexRenderMock = jest.fn((def: unknown, _ctx?: unknown) =>
+	typeof def === 'function' ? def({}) : def,
+);
+
+jest.mock('@tanstack/react-table', () => ({
+	flexRender: (def: unknown, ctx: unknown): unknown => flexRenderMock(def, ctx),
+}));
+
+function buildMockRow(
+	visibleCells: Array<{ columnId: string }>,
+): Parameters<typeof TanStackRowCells>[0]['row'] {
+	return {
+		original: {
+			currentLog: { id: 'log-1' } as TanStackTableRowData['currentLog'],
+			log: {},
+			rowIndex: 0,
+		},
+		getVisibleCells: () =>
+			visibleCells.map((cell, index) => ({
+				id: `cell-${index}`,
+				column: {
+					id: cell.columnId,
+					columnDef: {
+						cell: (): string => `content-${cell.columnId}`,
+					},
+				},
+				getContext: (): Record<string, unknown> => ({}),
+			})),
+	} as never;
+}
+
+describe('TanStackRowCells', () => {
+	beforeEach(() => {
+		flexRenderMock.mockClear();
+	});
+
+	it('renders a cell per visible column and calls flexRender', () => {
+		const row = buildMockRow([
+			{ columnId: 'state-indicator' },
+			{ columnId: 'body' },
+		]);
+
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells
+							row={row}
+							fontSize={FontSize.SMALL}
+							isDarkMode={false}
+							onLogCopy={jest.fn()}
+							isLogsExplorerPage={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+
+		expect(screen.getAllByRole('cell')).toHaveLength(2);
+		expect(flexRenderMock).toHaveBeenCalled();
+	});
+
+	it('applies state-indicator styling class on the indicator cell', () => {
+		const row = buildMockRow([{ columnId: 'state-indicator' }]);
+
+		const { container } = render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells
+							row={row}
+							fontSize={FontSize.SMALL}
+							isDarkMode={false}
+							onLogCopy={jest.fn()}
+							isLogsExplorerPage={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+
+		expect(container.querySelector('td.state-indicator')).toBeInTheDocument();
+	});
+
+	it('renders row actions on logs explorer page after hover', () => {
+		const row = buildMockRow([{ columnId: 'body' }]);
+
+		render(
+			<RowHoverContext.Provider value>
+				<table>
+					<tbody>
+						<tr>
+							<TanStackRowCells
+								row={row}
+								fontSize={FontSize.SMALL}
+								isDarkMode={false}
+								onLogCopy={jest.fn()}
+								isLogsExplorerPage
+							/>
+						</tr>
+					</tbody>
+				</table>
+			</RowHoverContext.Provider>,
+		);
+
+		expect(screen.getByTestId('copy-btn')).toBeInTheDocument();
+	});
+
+	it('click on a data cell calls onSetActiveLog with current log', () => {
+		const onSetActiveLog = jest.fn();
+		const row = buildMockRow([{ columnId: 'body' }]);
+
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells
+							row={row}
+							fontSize={FontSize.SMALL}
+							isDarkMode={false}
+							onSetActiveLog={onSetActiveLog}
+							onLogCopy={jest.fn()}
+							isLogsExplorerPage={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+
+		fireEvent.click(screen.getAllByRole('cell')[0]);
+
+		expect(onSetActiveLog).toHaveBeenCalledWith(
+			expect.objectContaining({ id: 'log-1' }),
+		);
+	});
+
+	it('when row is active log, click on cell clears active log', () => {
+		const onSetActiveLog = jest.fn();
+		const onClearActiveLog = jest.fn();
+		const row = buildMockRow([{ columnId: 'body' }]);
+
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells
+							row={row}
+							fontSize={FontSize.SMALL}
+							isDarkMode={false}
+							isActiveLog
+							onSetActiveLog={onSetActiveLog}
+							onClearActiveLog={onClearActiveLog}
+							onLogCopy={jest.fn()}
+							isLogsExplorerPage={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+
+		fireEvent.click(screen.getAllByRole('cell')[0]);
+
+		expect(onClearActiveLog).toHaveBeenCalled();
+		expect(onSetActiveLog).not.toHaveBeenCalled();
+	});
+});