fix: fixed drilldown menu ui

.vscode/settings.json

@@ -1,8 +1,6 @@
 {
   "oxc.typeAware": true,
   "oxc.tsConfigPath": "./frontend/tsconfig.json",
-  "oxc.configPath": "./frontend/.oxlintrc.json",
-  "oxc.fmt.configPath": "./frontend/.oxfmtrc.json",
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "oxc.oxc-vscode",
   "editor.codeActionsOnSave": {
@@ -21,3 +19,4 @@
   "python-envs.defaultEnvManager": "ms-python.python:system",
   "python-envs.pythonProjects": []
 }
+

conf/example.yaml

@@ -11,8 +11,6 @@ global:
   external_url: <unset>
   # the url where the SigNoz backend receives telemetry data (traces, metrics, logs) from instrumented applications.
   ingestion_url: <unset>
-  # the url of the SigNoz MCP server. when unset, the MCP settings page is hidden in the frontend.
-  # mcp_url: <unset>
 
 ##################### Version #####################
 version:

docs/api/openapi.yml

@@ -2369,13 +2369,6 @@ components:
           $ref: '#/components/schemas/GlobaltypesIdentNConfig'
         ingestion_url:
           type: string
-        mcp_url:
-          nullable: true
-          type: string
-      required:
-      - external_url
-      - ingestion_url
-      - mcp_url
       type: object
     GlobaltypesIdentNConfig:
       properties:
@@ -2474,164 +2467,6 @@ components:
       - requiredMetricsCheck
       - endTimeBeforeRetention
       type: object
-    InframonitoringtypesNodeCondition:
-      enum:
-      - ready
-      - not_ready
-      - ""
-      type: string
-    InframonitoringtypesNodeRecord:
-      properties:
-        condition:
-          $ref: '#/components/schemas/InframonitoringtypesNodeCondition'
-        meta:
-          additionalProperties: {}
-          nullable: true
-          type: object
-        nodeCPU:
-          format: double
-          type: number
-        nodeCPUAllocatable:
-          format: double
-          type: number
-        nodeMemory:
-          format: double
-          type: number
-        nodeMemoryAllocatable:
-          format: double
-          type: number
-        nodeName:
-          type: string
-        notReadyNodeCount:
-          type: integer
-        readyNodeCount:
-          type: integer
-      required:
-      - nodeName
-      - condition
-      - readyNodeCount
-      - notReadyNodeCount
-      - nodeCPU
-      - nodeCPUAllocatable
-      - nodeMemory
-      - nodeMemoryAllocatable
-      - meta
-      type: object
-    InframonitoringtypesNodes:
-      properties:
-        endTimeBeforeRetention:
-          type: boolean
-        records:
-          items:
-            $ref: '#/components/schemas/InframonitoringtypesNodeRecord'
-          nullable: true
-          type: array
-        requiredMetricsCheck:
-          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
-        total:
-          type: integer
-        type:
-          $ref: '#/components/schemas/InframonitoringtypesResponseType'
-        warning:
-          $ref: '#/components/schemas/Querybuildertypesv5QueryWarnData'
-      required:
-      - type
-      - records
-      - total
-      - requiredMetricsCheck
-      - endTimeBeforeRetention
-      type: object
-    InframonitoringtypesPodPhase:
-      enum:
-      - pending
-      - running
-      - succeeded
-      - failed
-      - unknown
-      - ""
-      type: string
-    InframonitoringtypesPodRecord:
-      properties:
-        failedPodCount:
-          type: integer
-        meta:
-          additionalProperties: {}
-          nullable: true
-          type: object
-        pendingPodCount:
-          type: integer
-        podAge:
-          format: int64
-          type: integer
-        podCPU:
-          format: double
-          type: number
-        podCPULimit:
-          format: double
-          type: number
-        podCPURequest:
-          format: double
-          type: number
-        podMemory:
-          format: double
-          type: number
-        podMemoryLimit:
-          format: double
-          type: number
-        podMemoryRequest:
-          format: double
-          type: number
-        podPhase:
-          $ref: '#/components/schemas/InframonitoringtypesPodPhase'
-        podUID:
-          type: string
-        runningPodCount:
-          type: integer
-        succeededPodCount:
-          type: integer
-        unknownPodCount:
-          type: integer
-      required:
-      - podUID
-      - podCPU
-      - podCPURequest
-      - podCPULimit
-      - podMemory
-      - podMemoryRequest
-      - podMemoryLimit
-      - podPhase
-      - pendingPodCount
-      - runningPodCount
-      - succeededPodCount
-      - failedPodCount
-      - unknownPodCount
-      - podAge
-      - meta
-      type: object
-    InframonitoringtypesPods:
-      properties:
-        endTimeBeforeRetention:
-          type: boolean
-        records:
-          items:
-            $ref: '#/components/schemas/InframonitoringtypesPodRecord'
-          nullable: true
-          type: array
-        requiredMetricsCheck:
-          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
-        total:
-          type: integer
-        type:
-          $ref: '#/components/schemas/InframonitoringtypesResponseType'
-        warning:
-          $ref: '#/components/schemas/Querybuildertypesv5QueryWarnData'
-      required:
-      - type
-      - records
-      - total
-      - requiredMetricsCheck
-      - endTimeBeforeRetention
-      type: object
     InframonitoringtypesPostableHosts:
       properties:
         end:
@@ -2658,58 +2493,6 @@ components:
       - end
       - limit
       type: object
-    InframonitoringtypesPostableNodes:
-      properties:
-        end:
-          format: int64
-          type: integer
-        filter:
-          $ref: '#/components/schemas/Querybuildertypesv5Filter'
-        groupBy:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
-          type: array
-        limit:
-          type: integer
-        offset:
-          type: integer
-        orderBy:
-          $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-        start:
-          format: int64
-          type: integer
-      required:
-      - start
-      - end
-      - limit
-      type: object
-    InframonitoringtypesPostablePods:
-      properties:
-        end:
-          format: int64
-          type: integer
-        filter:
-          $ref: '#/components/schemas/Querybuildertypesv5Filter'
-        groupBy:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
-          type: array
-        limit:
-          type: integer
-        offset:
-          type: integer
-        orderBy:
-          $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-        start:
-          format: int64
-          type: integer
-      required:
-      - start
-      - end
-      - limit
-      type: object
     InframonitoringtypesRequiredMetricsCheck:
       properties:
         missingMetrics:
@@ -10437,9 +10220,7 @@ paths:
         five metrics, and pagination via offset/limit. The response type is ''list''
         for the default host.name grouping or ''grouped_list'' for custom groupBy
         keys. Also reports missing required metrics and whether the requested time
-        range falls before the data retention boundary. Numeric metric fields (cpu,
-        memory, wait, load15, diskUsage) return -1 as a sentinel when no data is available
-        for that field; frontends should render ''—'' rather than the literal value.'
+        range falls before the data retention boundary.'
       operationId: ListHosts
       requestBody:
         content:
@@ -10493,151 +10274,6 @@ paths:
       summary: List Hosts for Infra Monitoring
       tags:
       - inframonitoring
-  /api/v2/infra_monitoring/nodes:
-    post:
-      deprecated: false
-      description: 'Returns a paginated list of Kubernetes nodes with key metrics:
-        CPU usage, CPU allocatable, memory working set, memory allocatable, and per-group
-        readyNodeCount / notReadyNodeCount derived from each node''s latest k8s.node.condition_ready
-        value in the window. Each node includes metadata attributes (k8s.node.uid,
-        k8s.cluster.name). The response type is ''list'' for the default k8s.node.name
-        grouping (each row is one node with its current condition string: ready /
-        not_ready / '''') or ''grouped_list'' for custom groupBy keys (each row aggregates
-        nodes in the group with readyNodeCount and notReadyNodeCount; condition stays
-        empty). Supports filtering via a filter expression, custom groupBy, ordering
-        by cpu / cpu_allocatable / memory / memory_allocatable, and pagination via
-        offset/limit. Also reports missing required metrics and whether the requested
-        time range falls before the data retention boundary. Numeric metric fields
-        (nodeCPU, nodeCPUAllocatable, nodeMemory, nodeMemoryAllocatable) return -1
-        as a sentinel when no data is available for that field; frontends should render
-        ''—'' rather than the literal value.'
-      operationId: ListNodes
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/InframonitoringtypesPostableNodes'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/InframonitoringtypesNodes'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: List Nodes for Infra Monitoring
-      tags:
-      - inframonitoring
-  /api/v2/infra_monitoring/pods:
-    post:
-      deprecated: false
-      description: 'Returns a paginated list of Kubernetes pods with key metrics:
-        CPU usage, CPU request/limit utilization, memory working set, memory request/limit
-        utilization, current pod phase (pending/running/succeeded/failed/unknown),
-        and pod age (ms since start time). Each pod includes metadata attributes (namespace,
-        node, workload owner such as deployment/statefulset/daemonset/job/cronjob,
-        cluster). Supports filtering via a filter expression, custom groupBy to aggregate
-        pods by any attribute, ordering by any of the six metrics (cpu, cpu_request,
-        cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit.
-        The response type is ''list'' for the default k8s.pod.uid grouping (each row
-        is one pod with its current phase) or ''grouped_list'' for custom groupBy
-        keys (each row aggregates pods in the group with per-phase counts: pendingPodCount,
-        runningPodCount, succeededPodCount, failedPodCount, unknownPodCount derived
-        from each pod''s latest phase in the window). Also reports missing required
-        metrics and whether the requested time range falls before the data retention
-        boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory,
-        podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no
-        data is available for that field; frontends should render ''—'' rather than
-        the literal value.'
-      operationId: ListPods
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/InframonitoringtypesPostablePods'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/InframonitoringtypesPods'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: List Pods for Infra Monitoring
-      tags:
-      - inframonitoring
   /api/v2/livez:
     get:
       deprecated: false

frontend/.oxlintrc.json

@@ -9,6 +9,7 @@
     "react",
     "react-perf",
     "typescript",
+    "unicorn",
     "jsx-a11y",
     "import",
     "jest",
@@ -205,8 +206,6 @@
     "@typescript-eslint/explicit-function-return-type": "error",
     // Requires explicit return types on functions
     "@typescript-eslint/no-var-requires": "error",
-    "@typescript-eslint/no-useless-default-assignment": "off", // provide unsafe fixes in our codebase due to bad typing
-    "@typescript-eslint/no-duplicate-type-constituents": "off", // provide fixes that breaks some assumptions, eg: type A = L, B = L, C = A | B (removes B)
     // Disallows require() in TypeScript (use import instead)
     // Disabled - using TypeScript instead
     "react/jsx-props-no-spreading": "off",
@@ -313,6 +312,14 @@
             "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."
+          },
           {
             "name": "react",
             "importNames": [
@@ -331,6 +338,82 @@
     "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",
@@ -455,8 +538,8 @@
     "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 - turned off because it clashes with unicorn rules
-    "sonarjs/no-redundant-jump": "off",
+    // Removes redundant boolean literals
+    "sonarjs/no-redundant-jump": "error",
     // Removes unnecessary returns/continues
     "sonarjs/no-same-line-conditional": "error",
     // Prevents same-line conditionals
@@ -531,9 +614,8 @@
         "signoz/no-navigator-clipboard": "off",
         // Tests can use navigator.clipboard directly,
         "signoz/no-raw-absolute-path":"off",
-        "no-restricted-globals": "off",
+        "no-restricted-globals": "off"
         // Tests need raw localStorage/sessionStorage to seed DOM state for isolation
-        "signoz/no-zustand-getstate-in-hooks": "off"
       }
     },
     {

frontend/index.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
@@ -72,12 +72,10 @@
 					// to that prefix by the React app (see utils/storage.ts getScopedKey).
 					// Read the <base> tag — already populated by the Go template — to derive
 					// the same prefix here, before any JS module has loaded.
-					var basePath =
-						(document.querySelector('base') || {}).getAttribute('href') || '/';
+					var basePath = (document.querySelector('base') || {}).getAttribute('href') || '/';
 					var prefix = basePath === '/' ? '' : basePath;
 					var theme = localStorage.getItem(prefix + 'THEME');
-					var autoSwitch =
-						localStorage.getItem(prefix + 'THEME_AUTO_SWITCH') === 'true';
+					var autoSwitch = localStorage.getItem(prefix + 'THEME_AUTO_SWITCH') === 'true';
 					if (autoSwitch) {
 						theme = window.matchMedia('(prefers-color-scheme: dark)').matches
 							? 'dark'

frontend/jest.setup.ts

@@ -42,13 +42,13 @@ window.getComputedStyle = function (
 	} catch {
 		// Return a minimal CSSStyleDeclaration so callers (testing-library, Radix UI)
 		// see the element as visible and without animations.
-		return {
+		return ({
 			display: '',
 			visibility: '',
 			opacity: '1',
 			animationName: 'none',
 			getPropertyValue: () => '',
-		} as unknown as CSSStyleDeclaration;
+		} as unknown) as CSSStyleDeclaration;
 	}
 };
 

frontend/package.json

@@ -9,7 +9,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "prettify": "oxfmt",
-    "fmt": "oxfmt --check",
+    "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",
@@ -63,6 +63,7 @@
     "@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",
@@ -145,6 +146,7 @@
     "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"
   },
@@ -212,9 +214,9 @@
     "msw": "1.3.2",
     "npm-run-all": "latest",
     "orval": "7.18.0",
-    "oxfmt": "0.46.0",
-    "oxlint": "1.61.0",
-    "oxlint-tsgolint": "0.21.1",
+    "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",
@@ -238,8 +240,8 @@
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": [
-      "oxfmt --check",
-      "oxlint --quiet",
+      "echo 'Disabled due to migration' || oxfmt --check",
+      "oxlint --fix",
       "sh scripts/typecheck-staged.sh"
     ]
   },

frontend/plugins/rules/no-raw-absolute-path.mjs

@@ -56,6 +56,7 @@ function isExternalUrl(node) {
 	return false;
 }
 
+
 // window.open(withBasePath(x)) and window.open(getAbsoluteUrl(x)) are already safe.
 function isSafeHelperCall(node) {
 	return (
@@ -96,27 +97,18 @@ export default {
 					callee.object.type !== 'Identifier' ||
 					callee.object.name !== 'window' ||
 					callee.property.name !== 'open'
-				) {
-					return;
-				}
-				if (args.length === 0) {
-					return;
-				}
-				if (isExternalUrl(args[0])) {
-					return;
-				}
-				if (isSafeHelperCall(args[0])) {
-					return;
-				}
+				)
+					{return;}
+				if (args.length === 0) {return;}
+				if (isExternalUrl(args[0])) {return;}
+				if (isSafeHelperCall(args[0])) {return;}
 
 				context.report({ node, messageId: 'windowOpen' });
 			},
 
 			// window.location.origin + path
 			BinaryExpression(node) {
-				if (node.operator !== '+') {
-					return;
-				}
+				if (node.operator !== '+') {return;}
 				if (isOriginAccess(node.left) || isOriginAccess(node.right)) {
 					context.report({ node, messageId: 'originConcat' });
 				}
@@ -132,40 +124,26 @@ export default {
 			// window.location.origin used directly (not in concatenation)
 			// Catches: frontendBaseUrl: window.location.origin
 			MemberExpression(node) {
-				if (!isOriginAccess(node)) {
-					return;
-				}
+				if (!isOriginAccess(node)) {return;}
 
 				const parent = node.parent;
 				// Skip if parent is BinaryExpression with + (handled by BinaryExpression visitor)
-				if (parent.type === 'BinaryExpression' && parent.operator === '+') {
-					return;
-				}
+				if (parent.type === 'BinaryExpression' && parent.operator === '+') {return;}
 				// Skip if inside TemplateLiteral (handled by TemplateLiteral visitor)
-				if (parent.type === 'TemplateLiteral') {
-					return;
-				}
+				if (parent.type === 'TemplateLiteral') {return;}
 
 				context.report({ node, messageId: 'originDirect' });
 			},
 
 			// window.location.href = path
 			AssignmentExpression(node) {
-				if (node.operator !== '=') {
-					return;
-				}
-				if (!isHrefAccess(node.left)) {
-					return;
-				}
+				if (node.operator !== '=') {return;}
+				if (!isHrefAccess(node.left)) {return;}
 
 				// Allow external URLs
-				if (isExternalUrl(node.right)) {
-					return;
-				}
+				if (isExternalUrl(node.right)) {return;}
 				// Allow safe helper calls
-				if (isSafeHelperCall(node.right)) {
-					return;
-				}
+				if (isSafeHelperCall(node.right)) {return;}
 
 				context.report({ node, messageId: 'hrefAssign' });
 			},

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

@@ -16,6 +16,5 @@
 	"roles": "Roles",
 	"role_details": "Role Details",
 	"members": "Members",
-	"service_accounts": "Service Accounts",
-	"mcp_server": "MCP Server"
+	"service_accounts": "Service Accounts"
 }

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

@@ -53,6 +53,5 @@
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",
-	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
-	"MCP_SERVER": "SigNoz | MCP Server"
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
 }

frontend/public/locales/en/routes.json

@@ -16,6 +16,5 @@
 	"roles": "Roles",
 	"role_details": "Role Details",
 	"members": "Members",
-	"service_accounts": "Service Accounts",
-	"mcp_server": "MCP Server"
+	"service_accounts": "Service Accounts"
 }

frontend/public/locales/en/titles.json

@@ -76,6 +76,5 @@
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",
-	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
-	"MCP_SERVER": "SigNoz | MCP Server"
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
 }

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

@@ -13,11 +13,7 @@ import type {
 
 import type {
 	InframonitoringtypesPostableHostsDTO,
-	InframonitoringtypesPostableNodesDTO,
-	InframonitoringtypesPostablePodsDTO,
 	ListHosts200,
-	ListNodes200,
-	ListPods200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
@@ -25,7 +21,7 @@ import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
 /**
- * Returns a paginated list of hosts with key infrastructure metrics: CPU usage (%), memory usage (%), I/O wait (%), disk usage (%), and 15-minute load average. Each host includes its current status (active/inactive based on metrics reported in the last 10 minutes) and metadata attributes (e.g., os.type). Supports filtering via a filter expression, filtering by host status, custom groupBy to aggregate hosts by any attribute, ordering by any of the five metrics, and pagination via offset/limit. The response type is 'list' for the default host.name grouping or 'grouped_list' for custom groupBy keys. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (cpu, memory, wait, load15, diskUsage) return -1 as a sentinel when no data is available for that field; frontends should render '—' rather than the literal value.
+ * Returns a paginated list of hosts with key infrastructure metrics: CPU usage (%), memory usage (%), I/O wait (%), disk usage (%), and 15-minute load average. Each host includes its current status (active/inactive based on metrics reported in the last 10 minutes) and metadata attributes (e.g., os.type). Supports filtering via a filter expression, filtering by host status, custom groupBy to aggregate hosts by any attribute, ordering by any of the five metrics, and pagination via offset/limit. The response type is 'list' for the default host.name grouping or 'grouped_list' for custom groupBy keys. Also reports missing required metrics and whether the requested time range falls before the data retention boundary.
  * @summary List Hosts for Infra Monitoring
  */
 export const listHosts = (
@@ -108,171 +104,3 @@ export const useListHosts = <
 
 	return useMutation(mutationOptions);
 };
-/**
- * Returns a paginated list of Kubernetes nodes with key metrics: CPU usage, CPU allocatable, memory working set, memory allocatable, and per-group readyNodeCount / notReadyNodeCount derived from each node's latest k8s.node.condition_ready value in the window. Each node includes metadata attributes (k8s.node.uid, k8s.cluster.name). The response type is 'list' for the default k8s.node.name grouping (each row is one node with its current condition string: ready / not_ready / '') or 'grouped_list' for custom groupBy keys (each row aggregates nodes in the group with readyNodeCount and notReadyNodeCount; condition stays empty). Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_allocatable / memory / memory_allocatable, and pagination via offset/limit. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (nodeCPU, nodeCPUAllocatable, nodeMemory, nodeMemoryAllocatable) return -1 as a sentinel when no data is available for that field; frontends should render '—' rather than the literal value.
- * @summary List Nodes for Infra Monitoring
- */
-export const listNodes = (
-	inframonitoringtypesPostableNodesDTO: BodyType<InframonitoringtypesPostableNodesDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListNodes200>({
-		url: `/api/v2/infra_monitoring/nodes`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: inframonitoringtypesPostableNodesDTO,
-		signal,
-	});
-};
-
-export const getListNodesMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof listNodes>>,
-		TError,
-		{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof listNodes>>,
-	TError,
-	{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
-	TContext
-> => {
-	const mutationKey = ['listNodes'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof listNodes>>,
-		{ data: BodyType<InframonitoringtypesPostableNodesDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return listNodes(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type ListNodesMutationResult = NonNullable<
-	Awaited<ReturnType<typeof listNodes>>
->;
-export type ListNodesMutationBody =
-	BodyType<InframonitoringtypesPostableNodesDTO>;
-export type ListNodesMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List Nodes for Infra Monitoring
- */
-export const useListNodes = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof listNodes>>,
-		TError,
-		{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof listNodes>>,
-	TError,
-	{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
-	TContext
-> => {
-	const mutationOptions = getListNodesMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * Returns a paginated list of Kubernetes pods with key metrics: CPU usage, CPU request/limit utilization, memory working set, memory request/limit utilization, current pod phase (pending/running/succeeded/failed/unknown), and pod age (ms since start time). Each pod includes metadata attributes (namespace, node, workload owner such as deployment/statefulset/daemonset/job/cronjob, cluster). Supports filtering via a filter expression, custom groupBy to aggregate pods by any attribute, ordering by any of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit. The response type is 'list' for the default k8s.pod.uid grouping (each row is one pod with its current phase) or 'grouped_list' for custom groupBy keys (each row aggregates pods in the group with per-phase counts: pendingPodCount, runningPodCount, succeededPodCount, failedPodCount, unknownPodCount derived from each pod's latest phase in the window). Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory, podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no data is available for that field; frontends should render '—' rather than the literal value.
- * @summary List Pods for Infra Monitoring
- */
-export const listPods = (
-	inframonitoringtypesPostablePodsDTO: BodyType<InframonitoringtypesPostablePodsDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListPods200>({
-		url: `/api/v2/infra_monitoring/pods`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: inframonitoringtypesPostablePodsDTO,
-		signal,
-	});
-};
-
-export const getListPodsMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof listPods>>,
-		TError,
-		{ data: BodyType<InframonitoringtypesPostablePodsDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof listPods>>,
-	TError,
-	{ data: BodyType<InframonitoringtypesPostablePodsDTO> },
-	TContext
-> => {
-	const mutationKey = ['listPods'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof listPods>>,
-		{ data: BodyType<InframonitoringtypesPostablePodsDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return listPods(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type ListPodsMutationResult = NonNullable<
-	Awaited<ReturnType<typeof listPods>>
->;
-export type ListPodsMutationBody =
-	BodyType<InframonitoringtypesPostablePodsDTO>;
-export type ListPodsMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List Pods for Infra Monitoring
- */
-export const useListPods = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof listPods>>,
-		TError,
-		{ data: BodyType<InframonitoringtypesPostablePodsDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof listPods>>,
-	TError,
-	{ data: BodyType<InframonitoringtypesPostablePodsDTO> },
-	TContext
-> => {
-	const mutationOptions = getListPodsMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

@@ -3125,17 +3125,12 @@ export interface GlobaltypesConfigDTO {
 	/**
 	 * @type string
 	 */
-	external_url: string;
+	external_url?: string;
 	identN?: GlobaltypesIdentNConfigDTO;
 	/**
 	 * @type string
 	 */
-	ingestion_url: string;
-	/**
-	 * @type string
-	 * @nullable true
-	 */
-	mcp_url: string | null;
+	ingestion_url?: string;
 }
 
 export interface GlobaltypesIdentNConfigDTO {
@@ -3243,180 +3238,6 @@ export interface InframonitoringtypesHostsDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
-export enum InframonitoringtypesNodeConditionDTO {
-	ready = 'ready',
-	not_ready = 'not_ready',
-	'' = '',
-}
-/**
- * @nullable
- */
-export type InframonitoringtypesNodeRecordDTOMeta = {
-	[key: string]: unknown;
-} | null;
-
-export interface InframonitoringtypesNodeRecordDTO {
-	condition: InframonitoringtypesNodeConditionDTO;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	meta: InframonitoringtypesNodeRecordDTOMeta;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	nodeCPU: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	nodeCPUAllocatable: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	nodeMemory: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	nodeMemoryAllocatable: number;
-	/**
-	 * @type string
-	 */
-	nodeName: string;
-	/**
-	 * @type integer
-	 */
-	notReadyNodeCount: number;
-	/**
-	 * @type integer
-	 */
-	readyNodeCount: number;
-}
-
-export interface InframonitoringtypesNodesDTO {
-	/**
-	 * @type boolean
-	 */
-	endTimeBeforeRetention: boolean;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	records: InframonitoringtypesNodeRecordDTO[] | null;
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
-	/**
-	 * @type integer
-	 */
-	total: number;
-	type: InframonitoringtypesResponseTypeDTO;
-	warning?: Querybuildertypesv5QueryWarnDataDTO;
-}
-
-export enum InframonitoringtypesPodPhaseDTO {
-	pending = 'pending',
-	running = 'running',
-	succeeded = 'succeeded',
-	failed = 'failed',
-	unknown = 'unknown',
-	'' = '',
-}
-/**
- * @nullable
- */
-export type InframonitoringtypesPodRecordDTOMeta = {
-	[key: string]: unknown;
-} | null;
-
-export interface InframonitoringtypesPodRecordDTO {
-	/**
-	 * @type integer
-	 */
-	failedPodCount: number;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	meta: InframonitoringtypesPodRecordDTOMeta;
-	/**
-	 * @type integer
-	 */
-	pendingPodCount: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	podAge: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	podCPU: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	podCPULimit: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	podCPURequest: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	podMemory: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	podMemoryLimit: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	podMemoryRequest: number;
-	podPhase: InframonitoringtypesPodPhaseDTO;
-	/**
-	 * @type string
-	 */
-	podUID: string;
-	/**
-	 * @type integer
-	 */
-	runningPodCount: number;
-	/**
-	 * @type integer
-	 */
-	succeededPodCount: number;
-	/**
-	 * @type integer
-	 */
-	unknownPodCount: number;
-}
-
-export interface InframonitoringtypesPodsDTO {
-	/**
-	 * @type boolean
-	 */
-	endTimeBeforeRetention: boolean;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	records: InframonitoringtypesPodRecordDTO[] | null;
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
-	/**
-	 * @type integer
-	 */
-	total: number;
-	type: InframonitoringtypesResponseTypeDTO;
-	warning?: Querybuildertypesv5QueryWarnDataDTO;
-}
-
 export interface InframonitoringtypesPostableHostsDTO {
 	/**
 	 * @type integer
@@ -3445,62 +3266,6 @@ export interface InframonitoringtypesPostableHostsDTO {
 	start: number;
 }
 
-export interface InframonitoringtypesPostableNodesDTO {
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
-	/**
-	 * @type integer
-	 */
-	limit: number;
-	/**
-	 * @type integer
-	 */
-	offset?: number;
-	orderBy?: Querybuildertypesv5OrderByDTO;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	start: number;
-}
-
-export interface InframonitoringtypesPostablePodsDTO {
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
-	/**
-	 * @type integer
-	 */
-	limit: number;
-	/**
-	 * @type integer
-	 */
-	offset?: number;
-	orderBy?: Querybuildertypesv5OrderByDTO;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	start: number;
-}
-
 export interface InframonitoringtypesRequiredMetricsCheckDTO {
 	/**
 	 * @type array
@@ -7337,22 +7102,6 @@ export type ListHosts200 = {
 	status: string;
 };
 
-export type ListNodes200 = {
-	data: InframonitoringtypesNodesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type ListPods200 = {
-	data: InframonitoringtypesPodsDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type Livez200 = {
 	data: FactoryResponseDTO;
 	/**

frontend/src/api/globalConfig/getGlobalConfig.ts

@@ -0,0 +1,25 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	GlobalConfigData,
+	GlobalConfigDataProps,
+} from 'types/api/globalConfig/types';
+
+const getGlobalConfig = async (): Promise<
+	SuccessResponseV2<GlobalConfigData>
+> => {
+	try {
+		const response = await axios.get<GlobalConfigDataProps>(`/global/config`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getGlobalConfig;

frontend/src/api/interceptors.test.ts

@@ -39,8 +39,8 @@ jest.mock('axios', () => {
 describe('interceptorRejected', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		(axios as unknown as jest.Mock).mockResolvedValue({ data: 'success' });
-		(axios.isAxiosError as unknown as jest.Mock).mockReturnValue(true);
+		((axios as unknown) as jest.Mock).mockResolvedValue({ data: 'success' });
+		((axios.isAxiosError as unknown) as jest.Mock).mockReturnValue(true);
 	});
 
 	it('should preserve array payload structure when retrying a 401 request', async () => {
@@ -49,7 +49,7 @@ describe('interceptorRejected', () => {
 			{ relation: 'assignee', object: { resource: { name: 'editor' } } },
 		];
 
-		const error = {
+		const error = ({
 			response: {
 				status: 401,
 				config: {
@@ -67,7 +67,7 @@ describe('interceptorRejected', () => {
 				headers: new AxiosHeaders(),
 				data: JSON.stringify(arrayPayload),
 			},
-		} as unknown as AxiosResponse;
+		} as unknown) as AxiosResponse;
 
 		try {
 			await interceptorRejected(error);
@@ -75,7 +75,7 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}
 
-		const mockAxiosFn = axios as unknown as jest.Mock;
+		const mockAxiosFn = (axios as unknown) as jest.Mock;
 		expect(mockAxiosFn.mock.calls.length).toBe(1);
 		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
 		expect(Array.isArray(JSON.parse(retryCallConfig.data))).toBe(true);
@@ -85,7 +85,7 @@ describe('interceptorRejected', () => {
 	it('should preserve object payload structure when retrying a 401 request', async () => {
 		const objectPayload = { key: 'value', nested: { data: 123 } };
 
-		const error = {
+		const error = ({
 			response: {
 				status: 401,
 				config: {
@@ -103,7 +103,7 @@ describe('interceptorRejected', () => {
 				headers: new AxiosHeaders(),
 				data: JSON.stringify(objectPayload),
 			},
-		} as unknown as AxiosResponse;
+		} as unknown) as AxiosResponse;
 
 		try {
 			await interceptorRejected(error);
@@ -111,14 +111,14 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}
 
-		const mockAxiosFn = axios as unknown as jest.Mock;
+		const mockAxiosFn = (axios as unknown) as jest.Mock;
 		expect(mockAxiosFn.mock.calls.length).toBe(1);
 		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
 		expect(JSON.parse(retryCallConfig.data)).toEqual(objectPayload);
 	});
 
 	it('should handle undefined data gracefully when retrying', async () => {
-		const error = {
+		const error = ({
 			response: {
 				status: 401,
 				config: {
@@ -136,7 +136,7 @@ describe('interceptorRejected', () => {
 				headers: new AxiosHeaders(),
 				data: undefined,
 			},
-		} as unknown as AxiosResponse;
+		} as unknown) as AxiosResponse;
 
 		try {
 			await interceptorRejected(error);
@@ -144,7 +144,7 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}
 
-		const mockAxiosFn = axios as unknown as jest.Mock;
+		const mockAxiosFn = (axios as unknown) as jest.Mock;
 		expect(mockAxiosFn.mock.calls.length).toBe(1);
 		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
 		expect(retryCallConfig.data).toBeUndefined();

frontend/src/api/settings/getRetentionV2.ts

@@ -9,8 +9,9 @@ const getRetentionV2 = async (): Promise<
 	SuccessResponseV2<PayloadProps<'logs'>>
 > => {
 	try {
-		const response =
-			await ApiV2Instance.get<PayloadProps<'logs'>>(`/settings/ttl`);
+		const response = await ApiV2Instance.get<PayloadProps<'logs'>>(
+			`/settings/ttl`,
+		);
 
 		return {
 			httpStatusCode: response.status,

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

@@ -52,18 +52,18 @@ describe('convertV5ResponseToLegacy', () => {
 					alias: '__result_0',
 					meta: {},
 					series: [
-						{
+						({
 							labels: [
 								{
-									key: { name: 'service.name' } as unknown as TelemetryFieldKey,
+									key: ({ name: 'service.name' } as unknown) as TelemetryFieldKey,
 									value: 'adservice',
 								},
 							],
 							values: [
-								{ timestamp: 1000, value: 10 } as unknown as TimeSeriesValue,
-								{ timestamp: 2000, value: 12 } as unknown as TimeSeriesValue,
+								({ timestamp: 1000, value: 10 } as unknown) as TimeSeriesValue,
+								({ timestamp: 2000, value: 12 } as unknown) as TimeSeriesValue,
 							],
-						} as unknown as TimeSeries,
+						} as unknown) as TimeSeries,
 					],
 				},
 			],
@@ -88,8 +88,10 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 		]);
 
-		const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
-			makeBaseSuccess({ data: v5Data }, params);
+		const input: SuccessResponse<
+			MetricRangePayloadV5,
+			QueryRangeRequestV5
+		> = makeBaseSuccess({ data: v5Data }, params);
 
 		const legendMap = { A: '{{service.name}}' };
 		const result = convertV5ResponseToLegacy(input, legendMap, false);
@@ -119,33 +121,33 @@ describe('convertV5ResponseToLegacy', () => {
 		const scalar: ScalarData = {
 			columns: [
 				// group column
-				{
+				({
 					name: 'service.name',
 					queryName: 'A',
 					aggregationIndex: 0,
 					columnType: 'group',
-				} as unknown as ScalarData['columns'][number],
+				} as unknown) as ScalarData['columns'][number],
 				// aggregation 0
-				{
+				({
 					name: '__result_0',
 					queryName: 'A',
 					aggregationIndex: 0,
 					columnType: 'aggregation',
-				} as unknown as ScalarData['columns'][number],
+				} as unknown) as ScalarData['columns'][number],
 				// aggregation 1
-				{
+				({
 					name: '__result_1',
 					queryName: 'A',
 					aggregationIndex: 1,
 					columnType: 'aggregation',
-				} as unknown as ScalarData['columns'][number],
+				} as unknown) as ScalarData['columns'][number],
 				// formula F1
-				{
+				({
 					name: '__result',
 					queryName: 'F1',
 					aggregationIndex: 0,
 					columnType: 'aggregation',
-				} as unknown as ScalarData['columns'][number],
+				} as unknown) as ScalarData['columns'][number],
 			],
 			data: [['adservice', 606, 1.452, 151.5]],
 		};
@@ -172,15 +174,17 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 			{
 				type: 'builder_formula',
-				spec: {
+				spec: ({
 					name: 'F1',
 					expression: 'A * 0.25',
-				} as unknown as QueryBuilderFormula,
+				} as unknown) as QueryBuilderFormula,
 			},
 		]);
 
-		const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
-			makeBaseSuccess({ data: v5Data }, params);
+		const input: SuccessResponse<
+			MetricRangePayloadV5,
+			QueryRangeRequestV5
+		> = makeBaseSuccess({ data: v5Data }, params);
 		const legendMap = { A: '{{service.name}}', F1: '' };
 		const result = convertV5ResponseToLegacy(input, legendMap, false);
 
@@ -250,8 +254,10 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 		]);
 
-		const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
-			makeBaseSuccess({ data: v5Data }, params);
+		const input: SuccessResponse<
+			MetricRangePayloadV5,
+			QueryRangeRequestV5
+		> = makeBaseSuccess({ data: v5Data }, params);
 		const legendMap = { A: '{{service.name}}' };
 		const result = convertV5ResponseToLegacy(input, legendMap, true);
 

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

@@ -93,7 +93,7 @@ function convertTimeSeriesData(
 				labels: series.labels
 					? Object.fromEntries(
 							series.labels.map((label: any) => [label.key.name, label.value]),
-						)
+					  )
 					: {},
 				labelsArray: series.labels
 					? series.labels.map((label: any) => ({ [label.key.name]: label.value }))
@@ -358,19 +358,16 @@ export function convertV5ResponseToLegacy(
 	const aggregationPerQuery =
 		(params as QueryRangeRequestV5)?.compositeQuery?.queries
 			?.filter((query) => query.type === 'builder_query')
-			.reduce(
-				(acc, query) => {
-					if (
-						query.type === 'builder_query' &&
-						'aggregations' in query.spec &&
-						query.spec.name
-					) {
-						acc[query.spec.name] = query.spec.aggregations;
-					}
-					return acc;
-				},
-				{} as Record<string, any>,
-			) || {};
+			.reduce((acc, query) => {
+				if (
+					query.type === 'builder_query' &&
+					'aggregations' in query.spec &&
+					query.spec.name
+				) {
+					acc[query.spec.name] = query.spec.aggregations;
+				}
+				return acc;
+			}, {} as Record<string, any>) || {};
 
 	// If formatForWeb is true, return as-is (like existing logic)
 	if (formatForWeb && v5Data?.type === 'scalar') {

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

@@ -713,7 +713,7 @@ describe('prepareQueryRangePayloadV5', () => {
 						baseBuilderQuery({
 							dataSource: DataSource.LOGS,
 							filter: { expression: 'http.status_code >= 500' },
-							filters: undefined as unknown as IBuilderQuery['filters'],
+							filters: (undefined as unknown) as IBuilderQuery['filters'],
 						}),
 					],
 					queryFormulas: [],
@@ -746,7 +746,7 @@ describe('prepareQueryRangePayloadV5', () => {
 					queryData: [
 						baseBuilderQuery({
 							dataSource: DataSource.LOGS,
-							filter: undefined as unknown as IBuilderQuery['filter'],
+							filter: (undefined as unknown) as IBuilderQuery['filter'],
 							filters: {
 								items: [
 									{
@@ -834,8 +834,8 @@ describe('prepareQueryRangePayloadV5', () => {
 					queryData: [
 						baseBuilderQuery({
 							dataSource: DataSource.LOGS,
-							filter: undefined as unknown as IBuilderQuery['filter'],
-							filters: undefined as unknown as IBuilderQuery['filters'],
+							filter: (undefined as unknown) as IBuilderQuery['filter'],
+							filters: (undefined as unknown) as IBuilderQuery['filters'],
 						}),
 					],
 					queryFormulas: [],

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

@@ -139,9 +139,10 @@ function createBaseSpec(
 	requestType: RequestType,
 	panelType?: PANEL_TYPES,
 ): BaseBuilderQuery {
-	const nonEmptySelectColumns = (
-		queryData.selectColumns as (BaseAutocompleteData | TelemetryFieldKey)[]
-	)?.filter((c) => ('key' in c ? c?.key : c?.name));
+	const nonEmptySelectColumns = (queryData.selectColumns as (
+		| BaseAutocompleteData
+		| TelemetryFieldKey
+	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
 
 	return {
 		stepInterval: queryData?.stepInterval || null,
@@ -159,7 +160,7 @@ function createBaseSpec(
 							signal: item?.signal,
 							materialized: item?.materialized,
 						}),
-					)
+				  )
 				: undefined,
 		limit:
 			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
@@ -178,48 +179,52 @@ function createBaseSpec(
 							},
 							direction: order.order,
 						}),
-					)
+				  )
 				: undefined,
 		legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
 		having: isEmpty(queryData.having) ? undefined : (queryData?.having as Having),
 		functions: isEmpty(queryData.functions)
 			? undefined
-			: queryData.functions.map((func: QueryFunction): QueryFunction => {
-					// Normalize function name to handle case sensitivity
-					const normalizedName = normalizeFunctionName(func?.name);
-					return {
-						name: normalizedName as FunctionName,
-						args: isEmpty(func.namedArgs)
-							? func.args?.map((arg) => ({
-									value: arg?.value,
-								}))
-							: Object.entries(func?.namedArgs || {}).map(([name, value]) => ({
-									name,
-									value,
-								})),
-					};
-				}),
+			: queryData.functions.map(
+					(func: QueryFunction): QueryFunction => {
+						// Normalize function name to handle case sensitivity
+						const normalizedName = normalizeFunctionName(func?.name);
+						return {
+							name: normalizedName as FunctionName,
+							args: isEmpty(func.namedArgs)
+								? func.args?.map((arg) => ({
+										value: arg?.value,
+								  }))
+								: Object.entries(func?.namedArgs || {}).map(([name, value]) => ({
+										name,
+										value,
+								  })),
+						};
+					},
+			  ),
 		selectFields: isEmpty(nonEmptySelectColumns)
 			? undefined
-			: nonEmptySelectColumns?.map((column: any): TelemetryFieldKey => {
-					const fieldName = column.name ?? column.key;
-					const isDeprecated = isDeprecatedField(fieldName);
+			: nonEmptySelectColumns?.map(
+					(column: any): TelemetryFieldKey => {
+						const fieldName = column.name ?? column.key;
+						const isDeprecated = isDeprecatedField(fieldName);
 
-					const fieldObj: TelemetryFieldKey = {
-						name: fieldName,
-						fieldDataType:
-							column?.fieldDataType ?? (column?.dataType as FieldDataType),
-						signal: column?.signal ?? undefined,
-					};
+						const fieldObj: TelemetryFieldKey = {
+							name: fieldName,
+							fieldDataType:
+								column?.fieldDataType ?? (column?.dataType as FieldDataType),
+							signal: column?.signal ?? undefined,
+						};
 
-					// Only add fieldContext if the field is NOT deprecated
-					if (!isDeprecated && fieldName !== 'name') {
-						fieldObj.fieldContext =
-							column?.fieldContext ?? (column?.type as FieldContext);
-					}
+						// Only add fieldContext if the field is NOT deprecated
+						if (!isDeprecated && fieldName !== 'name') {
+							fieldObj.fieldContext =
+								column?.fieldContext ?? (column?.type as FieldContext);
+						}
 
-					return fieldObj;
-				}),
+						return fieldObj;
+					},
+			  ),
 	};
 }
 
@@ -231,8 +236,7 @@ export function parseAggregations(
 	const result: { expression: string; alias?: string }[] = [];
 	// Matches function calls like "count()" or "sum(field)" with optional alias like "as 'alias'"
 	// Handles quoted ('alias'), dash-separated (field-name), and unquoted values after "as" keyword
-	const regex =
-		/([a-zA-Z0-9_]+\([^)]*\))(?:\s*as\s+((?:'[^']*'|"[^"]*"|[a-zA-Z0-9_-]+)))?/g;
+	const regex = /([a-zA-Z0-9_]+\([^)]*\))(?:\s*as\s+((?:'[^']*'|"[^"]*"|[a-zA-Z0-9_-]+)))?/g;
 	let match = regex.exec(expression);
 	while (match !== null) {
 		const expr = match[1];
@@ -361,9 +365,10 @@ function createTraceOperatorBaseSpec(
 	requestType: RequestType,
 	panelType?: PANEL_TYPES,
 ): BaseBuilderQuery {
-	const nonEmptySelectColumns = (
-		queryData.selectColumns as (BaseAutocompleteData | TelemetryFieldKey)[]
-	)?.filter((c) => ('key' in c ? c?.key : c?.name));
+	const nonEmptySelectColumns = (queryData.selectColumns as (
+		| BaseAutocompleteData
+		| TelemetryFieldKey
+	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
 
 	const {
 		stepInterval,
@@ -390,7 +395,7 @@ function createTraceOperatorBaseSpec(
 							signal: item?.signal,
 							materialized: item?.materialized,
 						}),
-					)
+				  )
 				: undefined,
 		limit:
 			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
@@ -406,7 +411,7 @@ function createTraceOperatorBaseSpec(
 							},
 							direction: order.order,
 						}),
-					)
+				  )
 				: undefined,
 		legend: isEmpty(legend) ? undefined : legend,
 		having: isEmpty(having) ? undefined : (having as Having),
@@ -420,7 +425,7 @@ function createTraceOperatorBaseSpec(
 						fieldContext: column?.fieldContext ?? (column?.type as FieldContext),
 						signal: column?.signal ?? undefined,
 					}),
-				),
+			  ),
 	};
 }
 
@@ -502,22 +507,18 @@ export function convertClickHouseQueriesToV5(
 /**
  * Helper function to reduce query arrays to objects
  */
-function reduceQueriesToObject(queryArray: any[]): {
-	queries: Record<string, any>;
-	legends: Record<string, string>;
-} {
+function reduceQueriesToObject(
+	queryArray: any[],
+): { queries: Record<string, any>; legends: Record<string, string> } {
 	const legends: Record<string, string> = {};
-	const queries = queryArray.reduce(
-		(acc, queryItem) => {
-			if (!queryItem.query) {
-				return acc;
-			}
-			acc[queryItem.name] = queryItem;
-			legends[queryItem.name] = queryItem.legend;
+	const queries = queryArray.reduce((acc, queryItem) => {
+		if (!queryItem.query) {
 			return acc;
-		},
-		{} as Record<string, any>,
-	);
+		}
+		acc[queryItem.name] = queryItem;
+		legends[queryItem.name] = queryItem.legend;
+		return acc;
+	}, {} as Record<string, any>);
 
 	return { queries, legends };
 }
@@ -553,7 +554,7 @@ export const prepareQueryRangePayloadV5 = ({
 				queryTraceOperator && queryTraceOperator.length > 0
 					? queryTraceOperator.filter((traceOperator) =>
 							Boolean(traceOperator.expression.trim()),
-						)
+					  )
 					: [];
 
 			const currentTraceOperator = mapQueryDataToApi(
@@ -647,18 +648,15 @@ export const prepareQueryRangePayloadV5 = ({
 					: graphType === PANEL_TYPES.TABLE),
 			fillGaps: fillGaps || false,
 		},
-		variables: Object.entries(variables).reduce(
-			(acc, [key, value]) => {
-				acc[key] = {
-					value,
-					type: dynamicVariables
-						?.find((v) => v.name === key)
-						?.type?.toLowerCase() as VariableType,
-				};
-				return acc;
-			},
-			{} as Record<string, VariableItem>,
-		),
+		variables: Object.entries(variables).reduce((acc, [key, value]) => {
+			acc[key] = {
+				value,
+				type: dynamicVariables
+					?.find((v) => v.name === key)
+					?.type?.toLowerCase() as VariableType,
+			};
+			return acc;
+		}, {} as Record<string, VariableItem>),
 	};
 
 	return { legendMap, queryPayload };

frontend/src/assets/Logos/baseten.svg

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

frontend/src/assets/Logos/dbos.svg

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

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/opencode.svg

@@ -1 +0,0 @@
-<svg width='234' height='42' viewBox='0 0 234 42' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18 30H6V18H18V30Z' fill='#CFCECD'/><path d='M18 12H6V30H18V12ZM24 36H0V6H24V36Z' fill='#656363'/><path d='M48 30H36V18H48V30Z' fill='#CFCECD'/><path d='M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z' fill='#656363'/><path d='M84 24V30H66V24H84Z' fill='#CFCECD'/><path d='M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z' fill='#656363'/><path d='M108 36H96V18H108V36Z' fill='#CFCECD'/><path d='M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z' fill='#656363'/><path d='M144 30H126V18H144V30Z' fill='#CFCECD'/><path d='M144 12H126V30H144V36H120V6H144V12Z' fill='#211E1E'/><path d='M168 30H156V18H168V30Z' fill='#CFCECD'/><path d='M168 12H156V30H168V12ZM174 36H150V6H174V36Z' fill='#211E1E'/><path d='M198 30H186V18H198V30Z' fill='#CFCECD'/><path d='M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z' fill='#211E1E'/><path d='M234 24V30H216V24H234Z' fill='#CFCECD'/><path d='M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z' fill='#211E1E'/></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/AppLoading/AppLoading.styles.scss

@@ -74,7 +74,7 @@
 	width: 100%;
 	height: 100%;
 
-	background: radial-gradient(circle, var(--l1-foreground) 10%, transparent 0);
+	background: radial-gradient(circle, #fff 10%, transparent 0);
 	background-size: 12px 12px;
 	opacity: 1;
 

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

@@ -9,7 +9,7 @@ jest.mock('../../../api/browser/localstorage/get', () => ({
 }));
 
 // Access the mocked function
-const mockGet = getLocal as unknown as jest.Mock;
+const mockGet = (getLocal as unknown) as jest.Mock;
 
 describe('AppLoading', () => {
 	const SIGNOZ_TEXT = 'SigNoz';

frontend/src/components/AuthError/AuthError.styles.scss

@@ -99,6 +99,36 @@
 	}
 }
 
+.lightMode {
+	.auth-error-container {
+		.error-content {
+			&__error-code {
+				color: var(--l2-foreground);
+			}
+
+			&__error-message {
+				color: var(--l1-foreground);
+			}
+
+			&__message-badge-label-text {
+				color: var(--l2-foreground);
+			}
+
+			&__message-item {
+				color: var(--l1-foreground);
+
+				&::before {
+					background: var(--l3-background);
+				}
+			}
+
+			&__scroll-hint-text {
+				color: var(--l2-foreground);
+			}
+		}
+	}
+}
+
 @keyframes horizontal-shaking {
 	0% {
 		transform: translateX(0);

frontend/src/components/AuthPageContainer/AuthFooter.styles.scss

@@ -87,3 +87,23 @@
 	background: var(--l3-background);
 	flex-shrink: 0;
 }
+
+.lightMode {
+	.auth-footer-content {
+		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
+	}
+
+	.auth-footer-icon {
+		filter: brightness(0) saturate(100%) invert(25%) sepia(8%) saturate(518%)
+			hue-rotate(192deg) brightness(80%) contrast(95%);
+		opacity: 0.9;
+	}
+
+	.auth-footer-text {
+		color: var(--text-neutral-light-200);
+	}
+
+	.auth-footer-link-icon {
+		color: var(--text-neutral-light-100);
+	}
+}

frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss

@@ -143,3 +143,28 @@
 		}
 	}
 }
+
+.lightMode {
+	.bg-dot-pattern {
+		background: radial-gradient(
+			circle,
+			var(--l3-background) 1px,
+			transparent 1px
+		);
+		background-size: 12px 12px;
+	}
+
+	.auth-page-gradient {
+		background: radial-gradient(
+			ellipse at center top,
+			color-mix(in srgb, var(--primary-background) 12%, transparent) 0%,
+			transparent 60%
+		);
+		opacity: 0.8;
+		filter: blur(200px);
+
+		@media (min-width: 768px) {
+			filter: blur(300px);
+		}
+	}
+}

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -31,8 +31,9 @@ export function FilterSelect({
 	onChange,
 	isMultiple,
 }: SelectOptionConfig): JSX.Element {
-	const { handleSearch, isFetching, options } =
-		useCeleryFilterOptions(filterType);
+	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
+		filterType,
+	);
 
 	const urlQuery = useUrlQuery();
 	const history = useHistory();

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -280,28 +280,30 @@ function getTableData(data: QueueOverviewResponse['data']): RowData[] {
 	];
 
 	const tableData: RowData[] =
-		data?.map((row, index: number): RowData => {
-			const rowData: Record<string, string | number> = {};
-			columnOrder.forEach((key) => {
-				const value = row.data[key as keyof typeof row.data];
-				if (typeof value === 'string' || typeof value === 'number') {
-					rowData[key] = value;
-				}
-			});
-			Object.entries(row.data).forEach(([key, value]) => {
-				if (
-					!columnOrder.includes(key) &&
-					(typeof value === 'string' || typeof value === 'number')
-				) {
-					rowData[key] = value;
-				}
-			});
+		data?.map(
+			(row, index: number): RowData => {
+				const rowData: Record<string, string | number> = {};
+				columnOrder.forEach((key) => {
+					const value = row.data[key as keyof typeof row.data];
+					if (typeof value === 'string' || typeof value === 'number') {
+						rowData[key] = value;
+					}
+				});
+				Object.entries(row.data).forEach(([key, value]) => {
+					if (
+						!columnOrder.includes(key) &&
+						(typeof value === 'string' || typeof value === 'number')
+					) {
+						rowData[key] = value;
+					}
+				});
 
-			return {
-				...rowData,
-				key: index,
-			};
-		}) || [];
+				return {
+					...rowData,
+					key: index,
+				};
+			},
+		) || [];
 
 	return tableData;
 }
@@ -478,10 +480,10 @@ export default function CeleryOverviewTable({
 		[searchText],
 	);
 
-	const filteredData = useMemo(
-		() => getFilteredData(tableData),
-		[getFilteredData, tableData],
-	);
+	const filteredData = useMemo(() => getFilteredData(tableData), [
+		getFilteredData,
+		tableData,
+	]);
 
 	const prevTableDataRef = useRef<string>();
 

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -13,8 +13,9 @@ import { useCeleryFilterOptions } from '../useCeleryFilterOptions';
 import './CeleryTaskConfigOptions.styles.scss';
 
 function CeleryTaskConfigOptions(): JSX.Element {
-	const { handleSearch, isFetching, options } =
-		useCeleryFilterOptions('celery.task_name');
+	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
+		'celery.task_name',
+	);
 	const history = useHistory();
 	const location = useLocation();
 

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss

@@ -41,6 +41,7 @@
 		justify-content: center;
 		align-items: center;
 		border: 1px solid var(--l1-border);
+		background: linear-gradient(0deg, transparent 0%, transparent 100%), #0b0c0e;
 
 		.ant-card-body {
 			height: 100%;
@@ -237,7 +238,18 @@
 		height: 2px;
 		bottom: 0;
 		left: 0;
-		background-color: var(--l1-background);
-		color: var(--l1-foreground);
+		background-color: var(--l1-foreground);
+	}
+}
+
+.lightMode {
+	.celery-task-graph-grid-container {
+		.celery-task-graph-worker-count {
+			background: unset;
+		}
+	}
+
+	.configure-option-Info {
+		border: 1px dashed var(--bg-robin-400);
 	}
 }

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts

@@ -469,7 +469,8 @@ export const celeryActiveTasksWidgetData = (
 				{
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
-						id: 'flower_worker_number_of_currently_executing_tasks--float64--Gauge--true',
+						id:
+							'flower_worker_number_of_currently_executing_tasks--float64--Gauge--true',
 						key: 'flower_worker_number_of_currently_executing_tasks',
 						type: 'Gauge',
 					},

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -127,17 +127,22 @@ function CeleryTaskLatencyGraph({
 	const onGraphClickHandler = useGraphClickHandler(handleSetTimeStamp);
 
 	const onGraphClick = useCallback(
-		(type: string): OnClickPluginOpts['onClick'] =>
-			(xValue, yValue, mouseX, mouseY, data): Promise<void> => {
-				const [firstDataPoint] = Object.entries(data || {});
-				const [entity, value] = firstDataPoint;
-				setEntityData({
-					entity,
-					value,
-				});
+		(type: string): OnClickPluginOpts['onClick'] => (
+			xValue,
+			yValue,
+			mouseX,
+			mouseY,
+			data,
+		): Promise<void> => {
+			const [firstDataPoint] = Object.entries(data || {});
+			const [entity, value] = firstDataPoint;
+			setEntityData({
+				entity,
+				value,
+			});
 
-				return onGraphClickHandler(xValue, yValue, mouseX, mouseY, type);
-			},
+			return onGraphClickHandler(xValue, yValue, mouseX, mouseY, type);
+		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[handleSetTimeStamp],
 	);

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx

@@ -92,10 +92,10 @@ function CeleryTaskStateGraphConfig({
 							{isLoading
 								? '-'
 								: isError
-									? '-'
-									: Number.isNaN(values[index])
-										? '-'
-										: Math.round(Number(values[index]))}
+								? '-'
+								: Number.isNaN(values[index])
+								? '-'
+								: Math.round(Number(values[index]))}
 						</div>
 					</div>
 					{tab.key === barState && <div className="celery-task-states__indicator" />}

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -65,7 +65,7 @@ export function applyCeleryFilterOnWidgetData(
 									items: [...(queryItem.filters?.items || []), ...filters],
 									op: queryItem.filters?.op || 'AND',
 								},
-							}
+						  }
 						: queryItem,
 				),
 			},

frontend/src/components/CeleryTask/useGetGraphCustomSeries.ts

@@ -9,7 +9,7 @@ import { paths } from './CeleryUtils';
 
 interface UseGetGraphCustomSeriesProps {
 	isDarkMode: boolean;
-	drawStyle?: (typeof drawStyles)[keyof typeof drawStyles];
+	drawStyle?: typeof drawStyles[keyof typeof drawStyles];
 	colorMapping?: Record<string, string>;
 }
 

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -37,8 +37,9 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 			preference.name === USER_PREFERENCES.LAST_SEEN_CHANGELOG_VERSION,
 	)?.value as string;
 
-	const { mutate: updateUserPreferenceMutation } =
-		useMutation(updateUserPreference);
+	const { mutate: updateUserPreferenceMutation } = useMutation(
+		updateUserPreference,
+	);
 
 	useEffect(() => {
 		// Update the seen version
@@ -59,8 +60,11 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 
 	const checkScroll = useCallback((): void => {
 		if (changelogContentSectionRef.current) {
-			const { scrollHeight, clientHeight, scrollTop } =
-				changelogContentSectionRef.current;
+			const {
+				scrollHeight,
+				clientHeight,
+				scrollTop,
+			} = changelogContentSectionRef.current;
 			const isAtBottom = scrollHeight - clientHeight - scrollTop <= 8;
 			setHasScroll(scrollHeight > clientHeight + 24 && !isAtBottom); // 24px - buffer height to show show more
 		}

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -14,8 +14,9 @@ import { getBaseUrl } from 'utils/basePath';
 export default function ChatSupportGateway(): JSX.Element {
 	const { notifications } = useNotifications();
 
-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
-		useState(false);
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] = useState(
+		false,
+	);
 
 	const handleBillingOnSuccess = (
 		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -388,7 +388,7 @@ function ClientSideQBSearch(
 						({
 							label: key.key,
 							value: key,
-						}) as Option,
+						} as Option),
 				) || [],
 			);
 		}
@@ -462,7 +462,7 @@ function ClientSideQBSearch(
 							({
 								label: checkCommaInValue(String(val)),
 								value: val,
-							}) as Option,
+							} as Option),
 					),
 				);
 			} else {
@@ -490,7 +490,7 @@ function ClientSideQBSearch(
 				Array.isArray(tag.value) &&
 				tag.value[tag.value.length - 1] === ''
 					? tag.value?.slice(0, -1)
-					: (tag.value ?? '');
+					: tag.value ?? '';
 			filterTags.items.push({
 				id: tag.id || uuid().slice(0, 8),
 				key: tag.key,

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -32,7 +32,6 @@ function CreateServiceAccountModal(): JSX.Element {
 		SA_QUERY_PARAMS.CREATE_SA,
 		parseAsBoolean.withDefault(false),
 	);
-	const [, setSelectedAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 
 	const { showErrorModal, isErrorModalVisible } = useErrorModal();
 
@@ -48,28 +47,29 @@ function CreateServiceAccountModal(): JSX.Element {
 		},
 	});
 
-	const { mutate: createServiceAccount, isLoading: isSubmitting } =
-		useCreateServiceAccount({
-			mutation: {
-				onSuccess: async (response) => {
-					toast.success('Service account created successfully');
-					reset();
-					await setIsOpen(null);
-					await invalidateListServiceAccounts(queryClient);
-					await setSelectedAccountId(response.data.id);
-				},
-				onError: (err) => {
-					const errMessage = convertToApiError(
-						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
-					);
-					showErrorModal(errMessage as APIError);
-				},
+	const {
+		mutate: createServiceAccount,
+		isLoading: isSubmitting,
+	} = useCreateServiceAccount({
+		mutation: {
+			onSuccess: async () => {
+				toast.success('Service account created successfully');
+				reset();
+				await setIsOpen(null);
+				await invalidateListServiceAccounts(queryClient);
 			},
-		});
+			onError: (err) => {
+				const errMessage = convertToApiError(
+					err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+				);
+				showErrorModal(errMessage as APIError);
+			},
+		},
+	});
 
 	function handleClose(): void {
 		reset();
-		void setIsOpen(null);
+		setIsOpen(null);
 	}
 
 	function handleCreate(values: FormValues): void {

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -77,11 +77,11 @@
 		width: 280px;
 
 		&::placeholder {
-			color: var(--l1-foreground);
+			color: white;
 		}
 
 		&:focus::placeholder {
-			color: rgba($color: var(--l1-foreground), $alpha: 0.4);
+			color: rgba($color: #ffffff, $alpha: 0.4);
 		}
 	}
 }
@@ -113,6 +113,42 @@
 	}
 }
 
+.lightMode {
+	.time-options-container {
+		.time-options-item {
+			&.active {
+				background-color: rgba($color: #ffffff, $alpha: 0.2);
+
+				&:hover {
+					cursor: pointer;
+					background-color: rgba($color: #ffffff, $alpha: 0.3);
+				}
+			}
+
+			&:hover {
+				cursor: pointer;
+				background-color: rgba($color: #ffffff, $alpha: 0.3);
+			}
+		}
+	}
+
+	.timeSelection-input {
+		display: flex;
+		gap: 8px;
+		align-items: center;
+		padding: 4px 8px;
+		padding-left: 0px !important;
+
+		input::placeholder {
+			color: var(---bg-ink-300);
+		}
+
+		input:focus::placeholder {
+			color: rgba($color: #000000, $alpha: 0.4);
+		}
+	}
+}
+
 .date-time-popover__footer {
 	border-top: 1px solid var(--l1-border);
 	padding: 8px 14px;
@@ -264,3 +300,34 @@
 		background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
 	}
 }
+
+.lightMode {
+	.timezone-container {
+		.timezone {
+			background: rgb(179 179 179 / 15%);
+			&__icon {
+				stroke: var(--l1-foreground);
+			}
+		}
+	}
+
+	.custom-time-picker {
+		.timeSelection-input {
+			&:hover {
+				border-color: var(--l1-border) !important;
+			}
+		}
+	}
+
+	.timezone-badge {
+		background: rgb(179 179 179 / 15%);
+	}
+
+	.time-input-suffix-icon-badge {
+		background: rgb(179 179 179 / 15%);
+
+		&:hover {
+			background: rgb(179 179 179 / 20%);
+		}
+	}
+}

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -96,8 +96,10 @@ function CustomTimePicker({
 	maxTime,
 	isModalTimeSelection = false,
 }: CustomTimePickerProps): JSX.Element {
-	const [selectedTimePlaceholderValue, setSelectedTimePlaceholderValue] =
-		useState('Select / Enter Time Range');
+	const [
+		selectedTimePlaceholderValue,
+		setSelectedTimePlaceholderValue,
+	] = useState('Select / Enter Time Range');
 
 	const [inputValue, setInputValue] = useState('');
 	const [inputStatus, setInputStatus] = useState<CustomTimePickerInputStatus>(

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -116,10 +116,9 @@ function CustomTimePickerPopoverContent({
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();
 
-	const isLogsExplorerPage = useMemo(
-		() => pathname === ROUTES.LOGS_EXPLORER,
-		[pathname],
-	);
+	const isLogsExplorerPage = useMemo(() => pathname === ROUTES.LOGS_EXPLORER, [
+		pathname,
+	]);
 
 	const url = new URLSearchParams(window.location.search);
 
@@ -155,8 +154,8 @@ function CustomTimePickerPopoverContent({
 		if (!customDateTimeVisible) {
 			const customTimeRanges = getCustomTimeRanges();
 
-			const formattedCustomTimeRanges: RecentlyUsedDateTimeRange[] =
-				customTimeRanges.map((range) => ({
+			const formattedCustomTimeRanges: RecentlyUsedDateTimeRange[] = customTimeRanges.map(
+				(range) => ({
 					label: `${dayjs(range.from)
 						.tz(timezone.value)
 						.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)} - ${dayjs(range.to)
@@ -166,7 +165,8 @@ function CustomTimePickerPopoverContent({
 					to: range.to,
 					value: range.timestamp,
 					timestamp: range.timestamp,
-				}));
+				}),
+			);
 
 			setRecentlyUsedTimeRanges(formattedCustomTimeRanges);
 		}

frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss

@@ -129,3 +129,20 @@ $item-spacing: 8px;
 		width: 15px;
 	}
 }
+
+.lightMode {
+	.timezone-picker {
+		&__search {
+			.search-icon {
+				stroke: var(--l1-foreground);
+			}
+		}
+	}
+	.timezone-name-wrapper {
+		&__selected-icon {
+			.check-icon {
+				stroke: var(--l1-foreground);
+			}
+		}
+	}
+}

frontend/src/components/CustomTimePicker/timezoneUtils.ts

@@ -19,7 +19,7 @@ const TIMEZONE_TYPES = {
 	STANDARD: 'STANDARD',
 } as const;
 
-type TimezoneType = (typeof TIMEZONE_TYPES)[keyof typeof TIMEZONE_TYPES];
+type TimezoneType = typeof TIMEZONE_TYPES[keyof typeof TIMEZONE_TYPES];
 
 export const UTC_TIMEZONE: Timezone = {
 	name: 'Coordinated Universal Time — UTC, GMT',

frontend/src/components/DraggableTableRow/index.tsx

@@ -41,7 +41,8 @@ function DraggableTableRow({
 	);
 }
 
-interface DraggableTableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+interface DraggableTableRowProps
+	extends React.HTMLAttributes<HTMLTableRowElement> {
 	index: number;
 	moveRow: (dragIndex: number, hoverIndex: number) => void;
 }

frontend/src/components/DraggableTableRow/utils.ts

@@ -6,9 +6,9 @@ export function dropHandler(monitor: DropTargetMonitor): { isOver: boolean } {
 	};
 }
 
-export function dragHandler(monitor: DragSourceMonitor): {
-	isDragging: boolean;
-} {
+export function dragHandler(
+	monitor: DragSourceMonitor,
+): { isDragging: boolean } {
 	return {
 		isDragging: monitor.isDragging(),
 	};

frontend/src/components/DropDown/DropDown.styles.scss

@@ -1,5 +1,9 @@
 .dropdown-button {
-	color: var(--l1-foreground);
+	color: #fff;
+}
+
+.dropdown-button--dark {
+	color: #000;
 }
 
 .dropdown-icon {

frontend/src/components/DropDown/DropDown.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 
 import './DropDown.styles.scss';
 
@@ -11,6 +12,8 @@ function DropDown({
 	element: JSX.Element[];
 	onDropDownItemClick?: MenuProps['onClick'];
 }): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
 	const items: MenuProps['items'] = element.map(
 		(e: JSX.Element, index: number) => ({
 			label: e,
@@ -32,7 +35,7 @@ function DropDown({
 		>
 			<Button
 				type="link"
-				className={`dropdown-button`}
+				className={!isDarkMode ? 'dropdown-button--dark' : 'dropdown-button'}
 				onClick={(e): void => {
 					e.preventDefault();
 					setDdOpen(true);

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -158,8 +158,10 @@ function EditMemberDrawer({
 		new Date(String(existingToken.expiresAt)) < new Date();
 
 	// Create/regenerate token mutation
-	const { mutateAsync: createTokenMutation, isLoading: isGeneratingLink } =
-		useCreateResetPasswordToken();
+	const {
+		mutateAsync: createTokenMutation,
+		isLoading: isGeneratingLink,
+	} = useCreateResetPasswordToken();
 
 	const fetchedDisplayName =
 		fetchedUser?.data?.displayName ?? member?.name ?? '';
@@ -219,20 +221,22 @@ function EditMemberDrawer({
 	});
 
 	const makeRoleRetry = useCallback(
-		(context: string, rawRetry: () => Promise<void>) =>
-			async (): Promise<void> => {
-				try {
-					await rawRetry();
-					setSaveErrors((prev) => prev.filter((e) => e.context !== context));
-					refetchUser();
-				} catch (err) {
-					setSaveErrors((prev) =>
-						prev.map((e) =>
-							e.context === context ? { ...e, apiError: toSaveApiError(err) } : e,
-						),
-					);
-				}
-			},
+		(
+			context: string,
+			rawRetry: () => Promise<void>,
+		) => async (): Promise<void> => {
+			try {
+				await rawRetry();
+				setSaveErrors((prev) => prev.filter((e) => e.context !== context));
+				refetchUser();
+			} catch (err) {
+				setSaveErrors((prev) =>
+					prev.map((e) =>
+						e.context === context ? { ...e, apiError: toSaveApiError(err) } : e,
+					),
+				);
+			}
+		},
 		[refetchUser],
 	);
 
@@ -276,7 +280,7 @@ function EditMemberDrawer({
 					: updateUser({
 							pathParams: { id: member.id },
 							data: { displayName: localDisplayName },
-						})
+					  })
 				: Promise.resolve();
 
 			const [nameResult, rolesResult] = await Promise.allSettled([
@@ -385,7 +389,7 @@ function EditMemberDrawer({
 						? formatTimezoneAdjustedTimestamp(
 								String(response.data.expiresAt),
 								DATE_TIME_FORMATS.DASH_DATETIME,
-							)
+						  )
 						: null,
 				);
 				setHasCopiedResetLink(false);
@@ -494,8 +498,8 @@ function EditMemberDrawer({
 							isRootUser
 								? ROOT_USER_TOOLTIP
 								: isDeleted
-									? undefined
-									: 'You cannot modify your own role'
+								? undefined
+								: 'You cannot modify your own role'
 						}
 					>
 						<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
@@ -618,13 +622,13 @@ function EditMemberDrawer({
 									{isGeneratingLink
 										? 'Generating...'
 										: isInvited
-											? getInviteButtonLabel(
-													isLoadingTokenStatus,
-													existingToken,
-													isTokenExpired,
-													tokenNotFound,
-												)
-											: 'Generate Password Reset Link'}
+										? getInviteButtonLabel(
+												isLoadingTokenStatus,
+												existingToken,
+												isTokenExpired,
+												tokenNotFound,
+										  )
+										: 'Generate Password Reset Link'}
 								</Button>
 							</span>
 						</Tooltip>

frontend/src/components/ErrorModal/components/ErrorContent.styles.scss

@@ -168,12 +168,9 @@
 		gap: 3px;
 		background: var(--l1-border);
 		border-radius: 20px;
-		box-shadow:
-			0px 103px 12px 0px rgba(0, 0, 0, 0.01),
-			0px 66px 18px 0px rgba(0, 0, 0, 0.01),
-			0px 37px 22px 0px rgba(0, 0, 0, 0.03),
-			0px 17px 17px 0px rgba(0, 0, 0, 0.04),
-			0px 4px 9px 0px rgba(0, 0, 0, 0.04);
+		box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
+			0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
+			0px 17px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 9px 0px rgba(0, 0, 0, 0.04);
 	}
 
 	&__scroll-hint-text {

frontend/src/components/ErrorModal/components/ErrorContent.tsx

@@ -25,14 +25,15 @@ function ErrorContent({ error, icon }: ErrorContentProps): JSX.Element {
 		errors: errorMessages,
 		code: errorCode,
 		message: errorMessage,
-	} = error && 'error' in error
-		? error?.error?.error || {}
-		: {
-				url: undefined,
-				errors: [],
-				code: error.code || 500,
-				message: error.message || 'Something went wrong',
-			};
+	} =
+		error && 'error' in error
+			? error?.error?.error || {}
+			: {
+					url: undefined,
+					errors: [],
+					code: error.code || 500,
+					message: error.message || 'Something went wrong',
+			  };
 	return (
 		<section className="error-content">
 			{/* Summary Header */}

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -23,8 +23,11 @@ function MenuItemGenerator({
 	refetchAllView,
 	sourcePage,
 }: MenuItemLabelGeneratorProps): JSX.Element {
-	const { panelType, redirectWithQueryBuilderData, updateAllQueriesOperators } =
-		useQueryBuilder();
+	const {
+		panelType,
+		redirectWithQueryBuilderData,
+		updateAllQueriesOperators,
+	} = useQueryBuilder();
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
 	const { notifications } = useNotifications();

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -17,8 +17,11 @@ function SaveViewWithName({
 }: SaveViewWithNameProps): JSX.Element {
 	const [form] = Form.useForm<SaveViewFormProps>();
 	const { t } = useTranslation(['explorer']);
-	const { currentQuery, panelType, redirectWithQueryBuilderData } =
-		useQueryBuilder();
+	const {
+		currentQuery,
+		panelType,
+		redirectWithQueryBuilderData,
+	} = useQueryBuilder();
 	const { notifications } = useNotifications();
 	const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);
 

frontend/src/components/ExplorerCard/constants.ts

@@ -1,7 +1,8 @@
 import { QueryParams } from 'constants/query';
 
 export const ExploreHeaderToolTip = {
-	url: 'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
+	url:
+		'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
 };
 

frontend/src/components/Graph/Plugin/DragSelect.ts

@@ -55,8 +55,9 @@ function createMousedownHandler(
 			startDragPositionX = right;
 		}
 
-		const startValuePositionX =
-			chart.scales.x.getValueForPixel(startDragPositionX);
+		const startValuePositionX = chart.scales.x.getValueForPixel(
+			startDragPositionX,
+		);
 
 		dragData.onDragStart(startDragPositionX, startValuePositionX);
 	};
@@ -108,8 +109,9 @@ function createMouseupHandler(
 			endRelativePostionX = right;
 		}
 
-		const endValuePositionX =
-			chart.scales.x.getValueForPixel(endRelativePostionX);
+		const endValuePositionX = chart.scales.x.getValueForPixel(
+			endRelativePostionX,
+		);
 
 		dragData.onDragEnd(endRelativePostionX, endValuePositionX);
 

frontend/src/components/Graph/Plugin/IntersectionCursor.ts

@@ -12,12 +12,11 @@ export type IntersectionCursorPluginOptions = {
 	gapSize?: number;
 };
 
-export const defaultIntersectionCursorPluginOptions: Required<IntersectionCursorPluginOptions> =
-	{
-		color: 'white',
-		dashSize: 3,
-		gapSize: 3,
-	};
+export const defaultIntersectionCursorPluginOptions: Required<IntersectionCursorPluginOptions> = {
+	color: 'white',
+	dashSize: 3,
+	gapSize: 3,
+};
 
 export function createIntersectionCursorPluginOptions(
 	isEnabled: boolean,

frontend/src/components/Graph/Plugin/Legend.ts

@@ -52,7 +52,7 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => ({
 		])
 			? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])(
 					chart,
-				)
+			  )
 			: null;
 
 		items?.forEach((item: Record<any, any>, index: number) => {

frontend/src/components/Graph/utils.ts

@@ -95,7 +95,7 @@ export const getGraphOptions = (
 							},
 						],
 					},
-				}
+			  }
 			: {}),
 		title: {
 			display: title !== undefined,

frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss

@@ -177,9 +177,7 @@
 	color: var(--destructive);
 	opacity: 0.6;
 	padding: 0;
-	transition:
-		background-color 0.2s,
-		opacity 0.2s;
+	transition: background-color 0.2s, opacity 0.2s;
 	box-shadow: none;
 
 	&:hover {

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -47,8 +47,9 @@ function LaunchChatSupport({
 		featureFlagsFetchError,
 		isLoggedIn,
 	} = useAppContext();
-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
-		useState(false);
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] = useState(
+		false,
+	);
 
 	const { pathname } = useLocation();
 

frontend/src/components/LogDetail/constants.ts

@@ -5,7 +5,7 @@ export const VIEW_TYPES = {
 	INFRAMETRICS: 'INFRAMETRICS',
 } as const;
 
-export type VIEWS = (typeof VIEW_TYPES)[keyof typeof VIEW_TYPES];
+export type VIEWS = typeof VIEW_TYPES[keyof typeof VIEW_TYPES];
 
 export const RESOURCE_KEYS = {
 	CLUSTER_NAME: 'k8s.cluster.name',

frontend/src/components/LogDetail/index.tsx

@@ -10,7 +10,6 @@ import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
-import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
@@ -47,7 +46,6 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
-import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -81,10 +79,6 @@ function LogDetailInner({
 	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
 
 	const [isFilterVisible, setIsFilterVisible] = useState<boolean>(false);
-	const { featureFlags } = useAppContext();
-	const isBodyJsonQueryEnabled =
-		featureFlags?.find((flag) => flag.name === FeatureKeys.BODY_JSON_ENABLED)
-			?.active || false;
 
 	const [filters, setFilters] = useState<TagFilter | null>(null);
 	const [isEdit, setIsEdit] = useState<boolean>(false);
@@ -214,29 +208,11 @@ function LogDetailInner({
 		}
 	};
 
-	const logBody = useMemo(() => {
-		if (!isBodyJsonQueryEnabled) {
-			return log?.body || '';
-		}
-
-		try {
-			const json = JSON.parse(log?.body || '');
-
-			if (typeof json?.message === 'string' && json.message !== '') {
-				return json.message;
-			}
-
-			return log?.body || '';
-		} catch (error) {
-			return log?.body || '';
-		}
-	}, [isBodyJsonQueryEnabled, log?.body]);
-
 	const htmlBody = useMemo(
 		() => ({
-			__html: getSanitizedLogBody(logBody || '', { shouldEscapeHtml: true }),
+			__html: getSanitizedLogBody(log?.body || '', { shouldEscapeHtml: true }),
 		}),
-		[logBody],
+		[log?.body],
 	);
 
 	const handleJSONCopy = (): void => {
@@ -285,7 +261,7 @@ function LogDetailInner({
 											...query.filter,
 											expression: value,
 										},
-									}
+								  }
 								: query,
 						),
 					},
@@ -442,7 +418,7 @@ function LogDetailInner({
 				<div className="log-detail-drawer__log">
 					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
 					<Tooltip
-						title={removeEscapeCharacters(logBody)}
+						title={removeEscapeCharacters(log?.body)}
 						placement="left"
 						mouseLeaveDelay={0}
 					>

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -20,10 +20,9 @@ function AddToQueryHOC({
 		onAddToQuery(fieldKey, fieldValue, OPERATORS['='], dataType);
 	};
 
-	const popOverContent = useMemo(
-		() => <span>Add to query: {fieldKey}</span>,
-		[fieldKey],
-	);
+	const popOverContent = useMemo(() => <span>Add to query: {fieldKey}</span>, [
+		fieldKey,
+	]);
 
 	return (
 		<div className={cx('addToQueryContainer', fontSize)} onClick={handleQueryAdd}>

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

@@ -104,7 +104,7 @@ type ListLogViewProps = {
 	selectedFields: IField[];
 	onSetActiveLog: (
 		log: ILog,
-		selectedTab?: (typeof VIEW_TYPES)[keyof typeof VIEW_TYPES],
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
 	) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
@@ -166,11 +166,11 @@ function ListLogView({
 				? formatTimezoneAdjustedTimestamp(
 						flattenLogData.timestamp,
 						DATE_TIME_FORMATS.ISO_DATETIME_MS,
-					)
+				  )
 				: formatTimezoneAdjustedTimestamp(
 						flattenLogData.timestamp / 1e6,
 						DATE_TIME_FORMATS.ISO_DATETIME_MS,
-					),
+				  ),
 		[flattenLogData.timestamp, formatTimezoneAdjustedTimestamp],
 	);
 

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

@@ -24,10 +24,10 @@ export const Container = styled(Card)<{
 		fontSize === FontSize.SMALL
 			? `margin-bottom:0.1rem;`
 			: fontSize === FontSize.MEDIUM
-				? `margin-bottom: 0.2rem;`
-				: fontSize === FontSize.LARGE
-					? `margin-bottom:0.3rem;`
-					: ``}
+			? `margin-bottom: 0.2rem;`
+			: fontSize === FontSize.LARGE
+			? `margin-bottom:0.3rem;`
+			: ``}
 	cursor: pointer;
 
 	&:not(:hover) .log-line-action-buttons {
@@ -41,10 +41,10 @@ export const Container = styled(Card)<{
 			fontSize === FontSize.SMALL
 				? `padding:0.1rem 0.6rem;`
 				: fontSize === FontSize.MEDIUM
-					? `padding: 0.2rem 0.6rem;`
-					: fontSize === FontSize.LARGE
-						? `padding:0.3rem 0.6rem;`
-						: ``}
+				? `padding: 0.2rem 0.6rem;`
+				: fontSize === FontSize.LARGE
+				? `padding:0.3rem 0.6rem;`
+				: ``}
 
 		${({ $isActiveLog, $isDarkMode, $logType }): string =>
 			getActiveLogBackground($isActiveLog, $isDarkMode, $logType)}
@@ -65,8 +65,8 @@ export const LogContainer = styled.div<LogContainerProps>`
 		fontSize === FontSize.SMALL
 			? `gap: 2px;`
 			: fontSize === FontSize.MEDIUM
-				? ` gap:4px;`
-				: `gap:6px;`}
+			? ` gap:4px;`
+			: `gap:6px;`}
 `;
 
 export const LogText = styled.div<LogTextProps>`

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/RawLogView/index.tsx

@@ -88,11 +88,11 @@ function RawLogView({
 					? formatTimezoneAdjustedTimestamp(
 							data.timestamp,
 							DATE_TIME_FORMATS.ISO_DATETIME_MS,
-						)
+					  )
 					: formatTimezoneAdjustedTimestamp(
 							data.timestamp / 1e6,
 							DATE_TIME_FORMATS.ISO_DATETIME_MS,
-						);
+					  );
 			parts.push(date);
 		}
 

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

@@ -39,22 +39,22 @@ export const RawLogViewContainer = styled(Row)<{
 			fontSize === FontSize.SMALL
 				? `margin: 1px 0;`
 				: fontSize === FontSize.MEDIUM
-					? `margin: 1px 0;`
-					: `margin: 2px 0;`}
+				? `margin: 1px 0;`
+				: `margin: 2px 0;`}
 	}
 
 	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
 			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)
 			: !$isReadOnly
-				? `&:hover { ${getActiveLogBackground(true, $isDarkMode, $logType)} }`
-				: ''}
+			? `&:hover { ${getActiveLogBackground(true, $isDarkMode, $logType)} }`
+			: ''}
 
 	${({ $isHightlightedLog, $isDarkMode }): string =>
 		$isHightlightedLog
 			? `background-color: ${
 					$isDarkMode ? Color.BG_ROBIN_600 : Color.BG_VANILLA_400
-				};
+			  };
 			  transition: background-color 2s ease-in;`
 			: ''}
 
@@ -104,8 +104,8 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 		fontSize === FontSize.SMALL
 			? `font-size:11px; line-height:16px; padding:1px;`
 			: fontSize === FontSize.MEDIUM
-				? `font-size:13px; line-height:20px; padding:1px;`
-				: `font-size:14px; line-height:24px; padding:2px;`}
+			? `font-size:13px; line-height:20px; padding:1px;`
+			: `font-size:14px; line-height:24px; padding:2px;`}
 
 	cursor: ${({ $isActiveLog, $isReadOnly }): string =>
 		$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};

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

@@ -19,7 +19,7 @@ export interface RawLogViewProps {
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	onSetActiveLog?: (
 		log: ILog,
-		selectedTab?: (typeof VIEW_TYPES)[keyof typeof VIEW_TYPES],
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
 	) => void;
 	onClearActiveLog?: () => void;
 }

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

@@ -27,6 +27,6 @@ export const TableBodyContent = styled.div<TableBodyContentProps>`
 		fontSize === FontSize.SMALL
 			? `font-size:11px; line-height:16px;`
 			: fontSize === FontSize.MEDIUM
-				? `font-size:13px; line-height:20px;`
-				: `font-size:14px; line-height:24px;`}
+			? `font-size:13px; line-height:20px;`
+			: `font-size:14px; line-height:24px;`}
 `;

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/Logs/TableView/useTableView.tsx

@@ -34,10 +34,9 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 
 	const isDarkMode = useIsDarkMode();
 
-	const flattenLogData = useMemo(
-		() => logs.map((log) => FlatLogData(log)),
-		[logs],
-	);
+	const flattenLogData = useMemo(() => logs.map((log) => FlatLogData(log)), [
+		logs,
+	]);
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
@@ -116,11 +115,11 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 										? formatTimezoneAdjustedTimestamp(
 												field,
 												DATE_TIME_FORMATS.ISO_DATETIME_MS,
-											)
+										  )
 										: formatTimezoneAdjustedTimestamp(
 												field / 1e6,
 												DATE_TIME_FORMATS.ISO_DATETIME_MS,
-											);
+										  );
 								return {
 									children: (
 										<div className="table-timestamp">
@@ -130,7 +129,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								};
 							},
 						},
-					]
+				  ]
 				: []),
 			...(appendTo === 'center' ? fieldColumns : []),
 			...(fields.some((field) => field.name === 'body')
@@ -161,7 +160,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								),
 							}),
 						},
-					]
+				  ]
 				: []),
 			...(appendTo === 'end' ? fieldColumns : []),
 		];

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -35,11 +35,13 @@ function OptionsMenu({
 	const [fontSizeValue, setFontSizeValue] = useState<FontSize>(
 		fontSize?.value || FontSize.SMALL,
 	);
-	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] =
-		useState<boolean>(false);
+	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] = useState<boolean>(
+		false,
+	);
 
-	const [showAddNewColumnContainer, setShowAddNewColumnContainer] =
-		useState(false);
+	const [showAddNewColumnContainer, setShowAddNewColumnContainer] = useState(
+		false,
+	);
 
 	const [selectedValue, setSelectedValue] = useState<string | null>(null);
 	const listRef = useRef<HTMLDivElement>(null);

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -196,3 +196,17 @@
 		opacity: 0.5;
 	}
 }
+
+.lightMode {
+	.members-table {
+		.ant-table-tbody {
+			> tr.members-table-row--tinted > td {
+				background: rgba(0, 0, 0, 0.015);
+			}
+
+			> tr:hover > td {
+				background: rgba(0, 0, 0, 0.03) !important;
+			}
+		}
+	}
+}

frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss

@@ -167,3 +167,22 @@
 		padding-right: 8px;
 	}
 }
+
+.lightMode {
+	.config-btn {
+		&.missing-config-btn {
+			background: var(--bg-amber-100);
+			color: var(--bg-amber-500);
+
+			&:hover {
+				color: var(--bg-amber-600) !important;
+			}
+		}
+
+		.missing-config-btn {
+			.config-btn-content {
+				border-right: 1px solid var(--bg-amber-600);
+			}
+		}
+	}
+}

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -260,28 +260,23 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	/**
 	 * Separates section and non-section options
 	 */
-	const splitOptions = useCallback(
-		(
-			options: OptionData[],
-		): {
-			sectionOptions: OptionData[];
-			nonSectionOptions: OptionData[];
-		} => {
-			const sectionOptions: OptionData[] = [];
-			const nonSectionOptions: OptionData[] = [];
+	const splitOptions = useCallback((options: OptionData[]): {
+		sectionOptions: OptionData[];
+		nonSectionOptions: OptionData[];
+	} => {
+		const sectionOptions: OptionData[] = [];
+		const nonSectionOptions: OptionData[] = [];
 
-			options.forEach((option) => {
-				if ('options' in option && Array.isArray(option.options)) {
-					sectionOptions.push(option);
-				} else {
-					nonSectionOptions.push(option);
-				}
-			});
+		options.forEach((option) => {
+			if ('options' in option && Array.isArray(option.options)) {
+				sectionOptions.push(option);
+			} else {
+				nonSectionOptions.push(option);
+			}
+		});
 
-			return { sectionOptions, nonSectionOptions };
-		},
-		[],
-	);
+		return { sectionOptions, nonSectionOptions };
+	}, []);
 
 	/**
 	 * Apply search filtering to options
@@ -1634,7 +1629,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							}}
 							data={enhancedNonSectionOptions}
 							itemContent={(index, item): React.ReactNode =>
-								mapOptions([item]) as unknown as React.ReactElement
+								(mapOptions([item]) as unknown) as React.ReactElement
 							}
 							totalCount={enhancedNonSectionOptions.length}
 							itemSize={(): number => 40}
@@ -1676,7 +1671,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 										}}
 										data={section.options || []}
 										itemContent={(index, item): React.ReactNode =>
-											mapOptions([item]) as unknown as React.ReactElement
+											(mapOptions([item]) as unknown) as React.ReactElement
 										}
 										totalCount={section.options?.length || 0}
 										itemSize={(): number => 40}
@@ -1941,7 +1936,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 								? {
 										borderColor: Color.BG_ROBIN_500,
 										backgroundColor: Color.BG_SLATE_400,
-									}
+								  }
 								: undefined
 						}
 					>

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -112,28 +112,23 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	/**
 	 * Separates section and non-section options
 	 */
-	const splitOptions = useCallback(
-		(
-			options: OptionData[],
-		): {
-			sectionOptions: OptionData[];
-			nonSectionOptions: OptionData[];
-		} => {
-			const sectionOptions: OptionData[] = [];
-			const nonSectionOptions: OptionData[] = [];
+	const splitOptions = useCallback((options: OptionData[]): {
+		sectionOptions: OptionData[];
+		nonSectionOptions: OptionData[];
+	} => {
+		const sectionOptions: OptionData[] = [];
+		const nonSectionOptions: OptionData[] = [];
 
-			options.forEach((option) => {
-				if ('options' in option && Array.isArray(option.options)) {
-					sectionOptions.push(option);
-				} else {
-					nonSectionOptions.push(option);
-				}
-			});
+		options.forEach((option) => {
+			if ('options' in option && Array.isArray(option.options)) {
+				sectionOptions.push(option);
+			} else {
+				nonSectionOptions.push(option);
+			}
+		});
 
-			return { sectionOptions, nonSectionOptions };
-		},
-		[],
-	);
+		return { sectionOptions, nonSectionOptions };
+	}, []);
 
 	/**
 	 * Apply search filtering to options
@@ -327,8 +322,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						processedOptions = filterOptionsBySearch(processedOptions, searchText);
 					}
 
-					const { sectionOptions, nonSectionOptions } =
-						splitOptions(processedOptions);
+					const { sectionOptions, nonSectionOptions } = splitOptions(
+						processedOptions,
+					);
 
 					// Add custom option if needed
 					if (

frontend/src/components/NewSelect/__test__/CustomMultiSelect.test.tsx

@@ -336,7 +336,7 @@ describe('CustomMultiSelect Component', () => {
 			renderWithVirtuoso(
 				<CustomMultiSelect
 					options={mockGroupedOptions}
-					value={'__ALL__' as unknown as string[]}
+					value={('__ALL__' as unknown) as string[]}
 				/>,
 			);
 

frontend/src/components/NewSelect/styles.scss

@@ -16,7 +16,7 @@ $custom-border-color: #2c3044;
 	}
 
 	.ant-select-selection-placeholder {
-		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 
 	// Base styles are for dark mode
@@ -48,6 +48,10 @@ $custom-border-color: #2c3044;
 			visibility: visible !important;
 			pointer-events: none;
 			z-index: 2;
+
+			.lightMode & {
+				color: rgba(0, 0, 0, 0.85) !important;
+			}
 		}
 
 		&.ant-select-focused .ant-select-selection-placeholder {
@@ -63,6 +67,10 @@ $custom-border-color: #2c3044;
 		color: var(--l2-foreground);
 		z-index: 1;
 		pointer-events: none;
+
+		.lightMode & {
+			color: rgba(0, 0, 0, 0.85);
+		}
 	}
 
 	.ant-select-selector {
@@ -106,7 +114,7 @@ $custom-border-color: #2c3044;
 	}
 
 	.ant-select-selection-placeholder {
-		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 
 	// Customize tags in multiselect (dark mode by default)
@@ -172,9 +180,7 @@ $custom-border-color: #2c3044;
 .custom-multiselect-dropdown-container {
 	z-index: 1050 !important;
 	padding: 0;
-	box-shadow:
-		0 3px 6px -4px rgba(0, 0, 0, 0.5),
-		0 6px 16px 0 rgba(0, 0, 0, 0.4),
+	box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.5), 0 6px 16px 0 rgba(0, 0, 0, 0.4),
 		0 9px 28px 8px rgba(0, 0, 0, 0.3);
 	background-color: var(--l2-background);
 	border: 1px solid var(--l1-border);
@@ -209,7 +215,7 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: color-mix(in srgb, var(--l1-foreground) 45%, transparent);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 }
 
@@ -567,7 +573,7 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: color-mix(in srgb, var(--l1-foreground) 45%, transparent);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 
 	.status-message {
@@ -798,10 +804,8 @@ $custom-border-color: #2c3044;
 	.custom-multiselect-dropdown-container {
 		background-color: var(--l1-background);
 		border: 1px solid var(--l1-border);
-		box-shadow:
-			0 3px 6px -4px rgba(0, 0, 0, 0.12),
-			0 6px 16px 0 rgba(0, 0, 0, 0.08),
-			0 9px 28px 8px rgba(0, 0, 0, 0.05);
+		box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+			0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
 		.empty-message {
 			color: var(--l2-foreground);
@@ -972,9 +976,11 @@ $custom-border-color: #2c3044;
 			font-weight: 500;
 			z-index: 2;
 			pointer-events: none;
-			transition:
-				opacity 0.2s ease,
-				visibility 0.2s ease;
+			transition: opacity 0.2s ease, visibility 0.2s ease;
+
+			.lightMode & {
+				color: rgba(0, 0, 0, 0.85);
+			}
 		}
 
 		&:focus-within .all-text {

frontend/src/components/NewSelect/types.ts

@@ -40,10 +40,8 @@ export interface CustomTagProps {
 	onClose: () => void;
 }
 
-export interface CustomMultiSelectProps extends Omit<
-	SelectProps<string[] | string>,
-	'options'
-> {
+export interface CustomMultiSelectProps
+	extends Omit<SelectProps<string[] | string>, 'options'> {
 	placeholder?: string;
 	className?: string;
 	loading?: boolean;

frontend/src/components/OverlayScrollbar/OverlayScrollbar.tsx

@@ -26,7 +26,7 @@ function OverlayScrollbar({
 					theme: isDarkMode ? 'os-theme-light' : 'os-theme-dark',
 				},
 				...(customOptions || {}),
-			}) as PartialOptions,
+			} as PartialOptions),
 		[customOptions, isDarkMode],
 	);
 

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -10,14 +10,8 @@
 	border-bottom: 1px solid var(--l1-border);
 	border-top: 1px solid var(--l1-border);
 
-	font-family:
-		Inter,
-		-apple-system,
-		BlinkMacSystemFont,
-		'Segoe UI',
-		Roboto,
-		'Helvetica Neue',
-		sans-serif;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', sans-serif;
 
 	border-right: none;
 	border-left: none;

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -76,34 +76,32 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[showTraceOperator, isListViewPanel],
 	);
 
-	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] =
-		useMemo(() => {
-			const config: QueryBuilderProps['filterConfigs'] = {
-				stepInterval: { isHidden: true, isDisabled: true },
-				having: { isHidden: true, isDisabled: true },
-				filters: {
-					customKey: 'body',
-					customOp: OPERATORS.CONTAINS,
-				},
-			};
+	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			filters: {
+				customKey: 'body',
+				customOp: OPERATORS.CONTAINS,
+			},
+		};
 
-			return config;
-		}, []);
+		return config;
+	}, []);
 
-	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] =
-		useMemo(() => {
-			const config: QueryBuilderProps['filterConfigs'] = {
-				stepInterval: { isHidden: true, isDisabled: true },
-				having: { isHidden: true, isDisabled: true },
-				limit: { isHidden: true, isDisabled: true },
-				filters: {
-					customKey: 'body',
-					customOp: OPERATORS.CONTAINS,
-				},
-			};
+	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			limit: { isHidden: true, isDisabled: true },
+			filters: {
+				customKey: 'body',
+				customOp: OPERATORS.CONTAINS,
+			},
+		};
 
-			return config;
-		}, []);
+		return config;
+	}, []);
 
 	const queryFilterConfigs = useMemo(() => {
 		if (isListViewPanel) {

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx

@@ -49,8 +49,11 @@ export const MetricsSelect = memo(function MetricsSelect({
 		entityVersion: version,
 	});
 
-	const { updateAllQueriesOperators, handleSetQueryData, panelType } =
-		useQueryBuilder();
+	const {
+		updateAllQueriesOperators,
+		handleSetQueryData,
+		panelType,
+	} = useQueryBuilder();
 
 	const source = useMemo(
 		() => (signalSource === 'meter' ? 'meter' : 'metrics'),
@@ -120,8 +123,9 @@ export const MetricsSelect = memo(function MetricsSelect({
 				signalSource: newSignalSource,
 				panelType: panelType || '',
 			});
-			const savedQuery: IBuilderQuery | null =
-				getPreviousQueryFromKey(newQueryKey);
+			const savedQuery: IBuilderQuery | null = getPreviousQueryFromKey(
+				newQueryKey,
+			);
 
 			// remove the new query key from session storage
 			removeKeyFromPreviousQuery(newQueryKey);

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -464,37 +464,36 @@ function QueryAddOns({
 						</div>
 					)}
 
-					{selectedViews.find((view) => view.key === 'reduce_to') &&
-						showReduceTo && (
-							<div className="add-on-content" data-testid="reduce-to-content">
-								<div className="periscope-input-with-label">
-									<Tooltip
-										title={
-											<TooltipContent
-												label="Reduce to"
-												description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
-												docLink="https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations"
-											/>
-										}
-										placement="top"
-										mouseEnterDelay={0.5}
-									>
-										<div className="label" style={{ cursor: 'help' }}>
-											Reduce to
-										</div>
-									</Tooltip>
-									<div className="input">
-										<ReduceToFilter query={query} onChange={handleChangeReduceToV5} />
+					{selectedViews.find((view) => view.key === 'reduce_to') && showReduceTo && (
+						<div className="add-on-content" data-testid="reduce-to-content">
+							<div className="periscope-input-with-label">
+								<Tooltip
+									title={
+										<TooltipContent
+											label="Reduce to"
+											description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations"
+										/>
+									}
+									placement="top"
+									mouseEnterDelay={0.5}
+								>
+									<div className="label" style={{ cursor: 'help' }}>
+										Reduce to
 									</div>
-
-									<Button
-										className="close-btn periscope-btn ghost"
-										icon={<ChevronUp size={16} />}
-										onClick={(): void => handleRemoveView('reduce_to')}
-									/>
+								</Tooltip>
+								<div className="input">
+									<ReduceToFilter query={query} onChange={handleChangeReduceToV5} />
 								</div>
+
+								<Button
+									className="close-btn periscope-btn ghost"
+									icon={<ChevronUp size={16} />}
+									onClick={(): void => handleRemoveView('reduce_to')}
+								/>
 							</div>
-						)}
+						</div>
+					)}
 
 					{selectedViews.find((view) => view.key === 'legend_format') && (
 						<div className="add-on-content" data-testid="legend-format-content">

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -249,6 +249,57 @@
 	}
 }
 
+.lightMode {
+	.query-aggregation-container {
+		.aggregation-container {
+			.query-aggregation-select-container {
+				.query-aggregation-select-editor {
+					.cm-editor {
+						.cm-tooltip-autocomplete {
+							background: var(--l1-background) !important;
+							border: 1px solid var(--l1-border) !important;
+							box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+							backdrop-filter: none;
+
+							ul {
+								li {
+									&:hover,
+									&[aria-selected='true'] {
+										background: var(--l3-background) !important;
+									}
+								}
+							}
+						}
+
+						.cm-line {
+							::-moz-selection {
+								background: var(--l2-background) !important;
+								opacity: 0.5 !important;
+							}
+
+							::selection {
+								background: var(--l1-background) !important;
+								opacity: 0.5 !important;
+							}
+
+							.cm-function {
+								color: var(--primary-background) !important;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+	.query-aggregation-error-popover {
+		.ant-popover-inner {
+			background-color: var(--l1-background);
+			border: none;
+			box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+		}
+	}
+}
+
 .query-aggregation-error-popover {
 	.ant-popover-inner {
 		background-color: var(--l1-border);

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -290,12 +290,12 @@ function QueryAggregationSelect({
 			}
 
 			const regex = /([a-zA-Z_][\w]*)\s*\(([^)]*)\)/g;
-			const oldMatches = [...tr.startState.doc.toString().matchAll(regex)].filter(
-				(match) => validFunctions.includes(match[1].toLowerCase()),
-			);
-			const newMatches = [...tr.newDoc.toString().matchAll(regex)].filter(
-				(match) => validFunctions.includes(match[1].toLowerCase()),
-			);
+			const oldMatches = [
+				...tr.startState.doc.toString().matchAll(regex),
+			].filter((match) => validFunctions.includes(match[1].toLowerCase()));
+			const newMatches = [
+				...tr.newDoc.toString().matchAll(regex),
+			].filter((match) => validFunctions.includes(match[1].toLowerCase()));
 
 			if (
 				newMatches.length > oldMatches.length &&
@@ -558,7 +558,7 @@ function QueryAggregationSelect({
 									? availableSuggestions
 									: availableSuggestions.filter((suggestion) =>
 											suggestion.label.toLowerCase().includes(inputText.toLowerCase()),
-										);
+									  );
 
 							return {
 								from: startOfArg,

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -5,14 +5,8 @@
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
-	font-family:
-		Inter,
-		-apple-system,
-		BlinkMacSystemFont,
-		'Segoe UI',
-		Roboto,
-		'Helvetica Neue',
-		sans-serif;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', sans-serif;
 
 	.query-where-clause-editor-container {
 		position: relative;

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

@@ -194,8 +194,10 @@ function QuerySearch({
 
 	const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });
 
-	const [isFetchingCompleteValuesList, setIsFetchingCompleteValuesList] =
-		useState<boolean>(false);
+	const [
+		isFetchingCompleteValuesList,
+		setIsFetchingCompleteValuesList,
+	] = useState<boolean>(false);
 
 	const lastPosRef = useRef<{ line: number; ch: number }>({ line: 0, ch: 0 });
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -93,10 +93,9 @@ export const QueryV2 = forwardRef(function QueryV2(
 		[dataSource, panelType],
 	);
 
-	const showSpanScopeSelector = useMemo(
-		() => dataSource === DataSource.TRACES,
-		[dataSource],
-	);
+	const showSpanScopeSelector = useMemo(() => dataSource === DataSource.TRACES, [
+		dataSource,
+	]);
 
 	const showInlineQuerySearch = useMemo(() => {
 		if (!showTraceOperator) {
@@ -213,7 +212,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 															icon: <Trash size={14} />,
 															onClick: handleDeleteQuery,
 														},
-													]
+												  ]
 												: []),
 										],
 									}}

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss

@@ -121,3 +121,44 @@
 		}
 	}
 }
+
+.lightMode {
+	.qb-trace-operator {
+		&-arrow {
+			&::before {
+				background: repeating-linear-gradient(
+					to right,
+					var(--l3-background),
+					var(--l3-background) 4px,
+					transparent 4px,
+					transparent 8px
+				);
+			}
+			&::after {
+				background-color: var(--l3-background);
+			}
+		}
+		&.non-list-view {
+			&::before {
+				background: repeating-linear-gradient(
+					to bottom,
+					var(--l3-background),
+					var(--l3-background) 4px,
+					transparent 4px,
+					transparent 8px
+				);
+			}
+		}
+
+		&-label-with-input {
+			border: 1px solid var(--l1-border) !important;
+			background: var(--l1-background) !important;
+
+			.label {
+				color: var(--l1-foreground) !important;
+				border-right: 1px solid var(--l1-border) !important;
+				background: var(--l1-background) !important;
+			}
+		}
+	}
+}

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/__tests__/utils.test.ts

@@ -3,7 +3,7 @@ import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { getInvolvedQueriesInTraceOperator } from '../utils/utils';
 
 const makeTraceOperator = (expression: string): IBuilderTraceOperator =>
-	({ expression }) as unknown as IBuilderTraceOperator;
+	(({ expression } as unknown) as IBuilderTraceOperator);
 
 describe('getInvolvedQueriesInTraceOperator', () => {
 	it('returns empty array for empty input', () => {

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/utils/traceOperatorContextUtils.ts

@@ -98,7 +98,9 @@ export function createTraceOperatorContext(
 }
 
 // Helper to determine token context
-function determineTraceTokenContext(token: IToken): {
+function determineTraceTokenContext(
+	token: IToken,
+): {
 	isInAtom: boolean;
 	isInOperator: boolean;
 	isInParenthesis: boolean;

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

@@ -36,14 +36,14 @@ beforeAll(() => {
 		const mockRange = {
 			// CodeMirror uses these for text measurement
 			getClientRects: (): DOMRectList =>
-				({
+				(({
 					length: 1,
 					item: (index: number): DOMRect | null => (index === 0 ? mockRect : null),
 					0: mockRect,
 					*[Symbol.iterator](): Generator<DOMRect> {
 						yield mockRect;
 					},
-				}) as unknown as DOMRectList,
+				} as unknown) as DOMRectList),
 			getBoundingClientRect: (): DOMRect => mockRect,
 			// CodeMirror calls these to set up text ranges
 			setStart: (node: Node, offset: number): void => {
@@ -72,7 +72,7 @@ beforeAll(() => {
 			},
 			commonAncestorContainer: document.body,
 		};
-		return mockRange as unknown as Range;
+		return (mockRange as unknown) as Range;
 	};
 
 	// Mock document.createRange to return a new Range instance each time