fix: tests

* chore: update read.me - fe maintainers

* chore: update code owner for frontend codebase

.github/CODEOWNERS

@@ -1,13 +1,10 @@
 # CODEOWNERS info: https://help.github.com/en/articles/about-code-owners
 # Owners are automatically requested for review for PRs that changes code
 # that they own.
-* @ankitnayan
 
-/frontend/ @palashgdev @YounixM
+/frontend/ @YounixM
+/frontend/src/container/MetricsApplication @srikanthccv
+/frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
 /deploy/ @prashant-shahi
 /sample-apps/ @prashant-shahi
-**/query-service/ @srikanthccv
-Makefile @srikanthccv
-go.* @srikanthccv
-.git* @srikanthccv
 .github @prashant-shahi

.github/pull_request_template.md

@@ -0,0 +1,17 @@
+### Summary
+
+<!-- ✍️ A clear and concise description...-->
+
+#### Related Issues / PR's
+
+<!-- ✍️ Add the issues being resolved here and related PR's where applicable  -->
+
+#### Screenshots
+
+NA
+
+<!-- ✍️ Add screenshots of before and after changes where applicable-->
+
+#### Affected Areas and Manually Tested Areas
+
+<!-- ✍️ Add details of blast radius and dev testing areas where applicable-->

.github/workflows/push.yaml

@@ -34,7 +34,7 @@ jobs:
         id: short-sha
       - name: Get branch name
         id: branch-name
-        uses: tj-actions/branch-names@v5.1
+        uses: tj-actions/branch-names@v7.0.7
       - name: Set docker tag environment
         run: |
           if [ '${{ steps.branch-name.outputs.is_tag }}' == 'true' ]; then
@@ -78,7 +78,7 @@ jobs:
         id: short-sha
       - name: Get branch name
         id: branch-name
-        uses: tj-actions/branch-names@v5.1
+        uses: tj-actions/branch-names@v7.0.7
       - name: Set docker tag environment
         run: |
           if [ '${{ steps.branch-name.outputs.is_tag }}' == 'true' ]; then
@@ -127,7 +127,7 @@ jobs:
         id: short-sha
       - name: Get branch name
         id: branch-name
-        uses: tj-actions/branch-names@v5.1
+        uses: tj-actions/branch-names@v7.0.7
       - name: Set docker tag environment
         run: |
           if [ '${{ steps.branch-name.outputs.is_tag }}' == 'true' ]; then
@@ -176,7 +176,7 @@ jobs:
         id: short-sha
       - name: Get branch name
         id: branch-name
-        uses: tj-actions/branch-names@v5.1
+        uses: tj-actions/branch-names@v7.0.7
       - name: Set docker tag environment
         run: |
           if [ '${{ steps.branch-name.outputs.is_tag }}' == 'true' ]; then

.github/workflows/staging-deployment.yaml

@@ -29,6 +29,7 @@ jobs:
             export PATH="/usr/local/go/bin/:$PATH" # needed for Golang to work
             docker system prune --force
             docker pull signoz/signoz-otel-collector:main
+            docker pull signoz/signoz-schema-migrator:main
             cd ~/signoz
             git status
             git add .

.gitignore

@@ -37,7 +37,7 @@ frontend/src/constants/env.ts
 **/locust-scripts/__pycache__/
 **/__debug_bin
 
-frontend/.env
+.env
 pkg/query-service/signoz.db
 
 pkg/query-service/tests/test-deploy/data/
@@ -53,3 +53,12 @@ ee/query-service/tests/test-deploy/data/
 bin/
 
 */query-service/queries.active
+
+# e2e
+
+e2e/node_modules/
+e2e/test-results/
+e2e/playwright-report/
+e2e/blob-report/
+e2e/playwright/.cache/
+e2e/.auth

README.de-de.md

@@ -11,7 +11,6 @@
         <img alt="tweet" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a>
 </p>
 
-
 <h3 align="center">
   <a href="https://signoz.io/docs"><b>Dokumentation</b></a> &bull;
   <a href="https://github.com/SigNoz/signoz/blob/develop/README.md"><b>Readme auf Englisch </b></a> &bull;
@@ -40,12 +39,13 @@ SigNoz hilft Entwicklern, Anwendungen zu überwachen und Probleme in ihren berei
 👉 Einfache Einrichtung von Benachrichtigungen mit dem selbst erstellbaren Abfrage-Builder.
 
 ##
+
 ### Anwendung Metriken
 
 ![application_metrics](https://user-images.githubusercontent.com/83692067/226637410-900dbc5e-6705-4b11-a10c-bd0faeb2a92f.png)
 
-
 ### Verteiltes Tracing
+
 <img width="2068" alt="distributed_tracing_2 2" src="https://user-images.githubusercontent.com/83692067/226536447-bae58321-6a22-4ed3-af80-e3e964cb3489.png">
 
 <img width="2068" alt="distributed_tracing_1" src="https://user-images.githubusercontent.com/83692067/226536462-939745b6-4f9d-45a6-8016-814837e7f7b4.png">
@@ -62,22 +62,18 @@ SigNoz hilft Entwicklern, Anwendungen zu überwachen und Probleme in ihren berei
 
 ![exceptions_light](https://user-images.githubusercontent.com/83692067/226637967-4188d024-3ac9-4799-be95-f5ea9c45436f.png)
 
-
 ### Alarme
 
 <img width="2068" alt="alerts_management" src="https://user-images.githubusercontent.com/83692067/226536548-2c81e2e8-c12d-47e8-bad7-c6be79055def.png">
 
-
 <br /><br />
 
-
 ## Werde Teil unserer Slack Community
 
 Sag Hi zu uns auf [Slack](https://signoz.io/slack) 👋
 
 <br /><br />
 
-
 ## Funktionen:
 
 - Einheitliche Benutzeroberfläche für Metriken, Traces und Logs. Keine Notwendigkeit, zwischen Prometheus und Jaeger zu wechseln, um Probleme zu debuggen oder ein separates Log-Tool wie Elastic neben Ihrer Metriken- und Traces-Stack zu verwenden.
@@ -93,7 +89,6 @@ Sag Hi zu uns auf [Slack](https://signoz.io/slack) 👋
 
 <br /><br />
 
-
 ## Wieso SigNoz?
 
 Als Entwickler fanden wir es anstrengend, uns für jede kleine Funktion, die wir haben wollten, auf Closed Source SaaS Anbieter verlassen zu müssen. Closed Source Anbieter überraschen ihre Kunden zum Monatsende oft mit hohen Rechnungen, die keine Transparenz bzgl. der Kostenaufteilung bieten.
@@ -116,12 +111,10 @@ Wir unterstützen [OpenTelemetry](https://opentelemetry.io) als Bibliothek, mit
 - Elixir
 - Rust
 
-
 Hier findest du die vollständige Liste von unterstützten Programmiersprachen - https://opentelemetry.io/docs/
 
 <br /><br />
 
-
 ## Erste Schritte mit SigNoz
 
 ### Bereitstellung mit Docker
@@ -138,7 +131,6 @@ Bitte folge den [hier](https://signoz.io/docs/deployment/helm_chart) aufgelistet
 
 <br /><br />
 
-
 ## Vergleiche mit bekannten Tools
 
 ### SigNoz vs Prometheus
@@ -179,7 +171,6 @@ Wir haben Benchmarks veröffentlicht, die Loki mit SigNoz vergleichen. Schauen S
 
 <br /><br />
 
-
 ## Zum Projekt beitragen
 
 Wir ❤️ Beiträge zum Projekt, egal ob große oder kleine. Bitte lies dir zuerst die [CONTRIBUTING.md](CONTRIBUTING.md), durch, bevor du anfängst, Beiträge zu SigNoz zu machen.
@@ -197,6 +188,8 @@ Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem #c
 #### Frontend
 
 - [Palash Gupta](https://github.com/palashgdev)
+- [Yunus M](https://github.com/YounixM)
+- [Rajat Dabade](https://github.com/Rajat-Dabade)
 
 #### DevOps
 
@@ -204,16 +197,12 @@ Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem #c
 
 <br /><br />
 
-
 ## Dokumentation
 
 Du findest unsere Dokumentation unter https://signoz.io/docs/. Falls etwas unverständlich ist oder fehlt, öffne gerne ein Github Issue mit dem Label `documentation` oder schreib uns über den Community Slack Channel.
 
-
-
 <br /><br />
 
-
 ## Gemeinschaft
 
 Werde Teil der [slack community](https://signoz.io/slack) um mehr über verteilte Einzelschritt-Fehlersuche, Messung von Systemzuständen oder SigNoz zu erfahren und sich mit anderen Nutzern und Mitwirkenden in Verbindung zu setzen.

README.md

@@ -199,10 +199,13 @@ Not sure how to get started? Just ping us on `#contributing` in our [slack commu
 #### Frontend
 
 - [Palash Gupta](https://github.com/palashgdev)
+- [Yunus M](https://github.com/YounixM)
+- [Rajat Dabade](https://github.com/Rajat-Dabade)
 
 #### DevOps
 
 - [Prashant Shahi](https://github.com/prashant-shahi)
+- [Dhawal Sanghvi](https://github.com/dhawal1248)
 
 <br /><br />
 

README.zh-cn.md

@@ -199,6 +199,8 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric
 #### 前端
 
 - [Palash Gupta](https://github.com/palashgdev)
+- [Yunus M](https://github.com/YounixM)
+- [Rajat Dabade](https://github.com/Rajat-Dabade)
 
 #### 运维开发
 

deploy/docker-swarm/clickhouse-setup/docker-compose.yaml

@@ -1,7 +1,7 @@
 version: "3.9"
 
 x-clickhouse-defaults: &clickhouse-defaults
-  image: clickhouse/clickhouse-server:23.7.3-alpine
+  image: clickhouse/clickhouse-server:23.11.1-alpine
   tty: true
   deploy:
     restart_policy:
@@ -146,7 +146,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.32.1
+    image: signoz/query-service:0.36.2
     command:
       [
         "-config=/root/config/prometheus.yml",
@@ -186,7 +186,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:0.32.1
+    image: signoz/frontend:0.36.2
     deploy:
       restart_policy:
         condition: on-failure
@@ -199,7 +199,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.79.12
+    image: signoz/signoz-otel-collector:0.88.6
     command:
       [
         "--config=/etc/otel-collector-config.yaml",
@@ -237,7 +237,7 @@ services:
       - query-service
 
   otel-collector-migrator:
-      image: signoz/signoz-schema-migrator:0.79.12
+      image: signoz/signoz-schema-migrator:0.88.6
       deploy:
         restart_policy:
           condition: on-failure
@@ -250,7 +250,7 @@ services:
         # - clickhouse-3
 
   otel-collector-metrics:
-    image: signoz/signoz-otel-collector:0.79.12
+    image: signoz/signoz-otel-collector:0.88.6
     command:
       [
         "--config=/etc/otel-collector-metrics-config.yaml",

deploy/docker-swarm/clickhouse-setup/otel-collector-config.yaml

@@ -61,40 +61,6 @@ receivers:
               job_name: otel-collector
 
 processors:
-  logstransform/internal:
-    operators:
-      - type: trace_parser
-        if: '"trace_id" in attributes or "span_id" in attributes'
-        trace_id:
-          parse_from: attributes.trace_id
-        span_id:
-          parse_from: attributes.span_id
-        output: remove_trace_id
-      - type: trace_parser
-        if: '"traceId" in attributes or "spanId" in attributes'
-        trace_id:
-          parse_from: attributes.traceId
-        span_id:
-          parse_from: attributes.spanId
-        output: remove_traceId
-      - id: remove_traceId
-        type: remove
-        if: '"traceId" in attributes'
-        field: attributes.traceId
-        output: remove_spanId
-      - id: remove_spanId
-        type: remove
-        if: '"spanId" in attributes'
-        field: attributes.spanId
-      - id: remove_trace_id
-        type: remove
-        if: '"trace_id" in attributes'
-        field: attributes.trace_id
-        output: remove_span_id
-      - id: remove_span_id
-        type: remove
-        if: '"span_id" in attributes'
-        field: attributes.span_id
   batch:
     send_batch_size: 10000
     send_batch_max_size: 11000
@@ -193,5 +159,5 @@ service:
       exporters: [prometheus]
     logs:
       receivers: [otlp, tcplog/docker]
-      processors: [logstransform/internal, batch]
+      processors: [batch]
       exporters: [clickhouselogsexporter]

deploy/docker/clickhouse-setup/docker-compose-core.yaml

@@ -66,7 +66,7 @@ services:
       - --storage.path=/data
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.79.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.6}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -81,7 +81,7 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
   otel-collector:
     container_name: signoz-otel-collector
-    image: signoz/signoz-otel-collector:0.79.12
+    image: signoz/signoz-otel-collector:0.88.6
     command:
       [
         "--config=/etc/otel-collector-config.yaml",
@@ -118,7 +118,7 @@ services:
 
   otel-collector-metrics:
     container_name: signoz-otel-collector-metrics
-    image: signoz/signoz-otel-collector:0.79.12
+    image: signoz/signoz-otel-collector:0.88.6
     command:
       [
         "--config=/etc/otel-collector-metrics-config.yaml",

deploy/docker/clickhouse-setup/docker-compose.yaml

@@ -3,7 +3,7 @@ version: "2.4"
 x-clickhouse-defaults: &clickhouse-defaults
   restart: on-failure
   # addding non LTS version due to this fix https://github.com/ClickHouse/ClickHouse/commit/32caf8716352f45c1b617274c7508c86b7d1afab
-  image: clickhouse/clickhouse-server:23.7.3-alpine
+  image: clickhouse/clickhouse-server:23.11.1-alpine
   tty: true
   depends_on:
     - zookeeper-1
@@ -164,7 +164,7 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
 
   query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.32.1}
+    image: signoz/query-service:${DOCKER_TAG:-0.36.2}
     container_name: signoz-query-service
     command:
       [
@@ -203,7 +203,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.32.1}
+    image: signoz/frontend:${DOCKER_TAG:-0.36.2}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:
@@ -215,7 +215,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.79.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.6}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -229,7 +229,7 @@ services:
 
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.79.12}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.6}
     container_name: signoz-otel-collector
     command:
       [
@@ -269,7 +269,7 @@ services:
         condition: service_healthy
 
   otel-collector-metrics:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.79.12}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.6}
     container_name: signoz-otel-collector-metrics
     command:
       [

deploy/docker/clickhouse-setup/otel-collector-config.yaml

@@ -62,40 +62,6 @@ receivers:
 
 
 processors:
-  logstransform/internal:
-    operators:
-      - type: trace_parser
-        if: '"trace_id" in attributes or "span_id" in attributes'
-        trace_id:
-          parse_from: attributes.trace_id
-        span_id:
-          parse_from: attributes.span_id
-        output: remove_trace_id
-      - type: trace_parser
-        if: '"traceId" in attributes or "spanId" in attributes'
-        trace_id:
-          parse_from: attributes.traceId
-        span_id:
-          parse_from: attributes.spanId
-        output: remove_traceId
-      - id: remove_traceId
-        type: remove
-        if: '"traceId" in attributes'
-        field: attributes.traceId
-        output: remove_spanId
-      - id: remove_spanId
-        type: remove
-        if: '"spanId" in attributes'
-        field: attributes.spanId
-      - id: remove_trace_id
-        type: remove
-        if: '"trace_id" in attributes'
-        field: attributes.trace_id
-        output: remove_span_id
-      - id: remove_span_id
-        type: remove
-        if: '"span_id" in attributes'
-        field: attributes.span_id
   batch:
     send_batch_size: 10000
     send_batch_max_size: 11000
@@ -198,5 +164,5 @@ service:
       exporters: [prometheus]
     logs:
       receivers: [otlp, tcplog/docker]
-      processors: [logstransform/internal, batch]
+      processors: [batch]
       exporters: [clickhouselogsexporter]

e2e/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "e2e",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "@playwright/test": "^1.22.0",
+    "@types/node": "^20.9.2"
+  },
+  "scripts": {},
+  "dependencies": {
+    "dotenv": "8.2.0"
+  }
+}

e2e/playwright.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from "@playwright/test";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+export default defineConfig({
+  testDir: "./tests",
+
+  fullyParallel: true,
+
+  forbidOnly: !!process.env.CI,
+
+  name: "Signoz E2E",
+
+  retries: process.env.CI ? 2 : 0,
+
+  reporter: process.env.CI ? "github" : "list",
+
+  preserveOutput: "always",
+
+  updateSnapshots: "all",
+
+  quiet: false,
+
+  testMatch: ["**/*.spec.ts"],
+
+  use: {
+    trace: "on-first-retry",
+
+    baseURL:
+      process.env.PLAYWRIGHT_TEST_BASE_URL || "https://stagingapp.signoz.io/",
+  },
+
+  projects: [
+    { name: "setup", testMatch: /.*\.setup\.ts/ },
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        // Use prepared auth state.
+        storageState: ".auth/user.json",
+      },
+      dependencies: ["setup"],
+    },
+  ],
+});

e2e/tests/auth.setup.ts

@@ -0,0 +1,37 @@
+import { test, expect } from "@playwright/test";
+import ROUTES from "../../frontend/src/constants/routes";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const authFile = ".auth/user.json";
+
+test("E2E Login Test", async ({ page }) => {
+  await Promise.all([page.goto("/"), page.waitForRequest("**/version")]);
+
+  const signup = "Monitor your applications. Find what is causing issues.";
+
+  const el = await page.locator(`text=${signup}`);
+
+  expect(el).toBeVisible();
+
+  await page
+    .locator("id=loginEmail")
+    .type(
+      process.env.PLAYWRIGHT_USERNAME ? process.env.PLAYWRIGHT_USERNAME : ""
+    );
+
+  await page.getByText("Next").click();
+
+  await page
+    .locator('input[id="currentPassword"]')
+    .fill(
+      process.env.PLAYWRIGHT_PASSWORD ? process.env.PLAYWRIGHT_PASSWORD : ""
+    );
+
+  await page.locator('button[data-attr="signup"]').click();
+
+  await expect(page).toHaveURL(ROUTES.APPLICATION);
+
+  await page.context().storageState({ path: authFile });
+});

e2e/tests/contants.ts

@@ -0,0 +1,10 @@
+export const SERVICE_TABLE_HEADERS = {
+  APPLICATION: "Applicaton",
+  P99LATENCY: "P99 latency (in ms)",
+  ERROR_RATE: "Error Rate (% of total)",
+  OPS_PER_SECOND: "Operations Per Second",
+};
+
+export const DATA_TEST_IDS = {
+  NEW_DASHBOARD_BTN: "create-new-dashboard",
+};

e2e/tests/navigation.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from "@playwright/test";
+import ROUTES from "../../frontend/src/constants/routes";
+import { DATA_TEST_IDS, SERVICE_TABLE_HEADERS } from "./contants";
+
+test("Basic Navigation Check across different resources", async ({ page }) => {
+  // route to services page and check if the page renders fine with BE contract
+  await Promise.all([
+    page.goto(ROUTES.APPLICATION),
+    page.waitForRequest("**/v1/services"),
+  ]);
+
+  const p99Latency = page.locator(
+    `th:has-text("${SERVICE_TABLE_HEADERS.P99LATENCY}")`
+  );
+
+  await expect(p99Latency).toBeVisible();
+
+  // route to the new trace explorer page and check if the page renders fine
+  await page.goto(ROUTES.TRACES_EXPLORER);
+
+  await page.waitForLoadState("networkidle");
+
+  const listViewTable = await page
+    .locator('div[role="presentation"]')
+    .isVisible();
+
+  expect(listViewTable).toBeTruthy();
+
+  // route to the dashboards page and check if the page renders fine
+  await Promise.all([
+    page.goto(ROUTES.ALL_DASHBOARD),
+    page.waitForRequest("**/v1/dashboards"),
+  ]);
+
+  const newDashboardBtn = await page
+    .locator(`data-testid=${DATA_TEST_IDS.NEW_DASHBOARD_BTN}`)
+    .isVisible();
+
+  expect(newDashboardBtn).toBeTruthy();
+});

e2e/yarn.lock

@@ -0,0 +1,46 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@playwright/test@^1.22.0":
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.40.0.tgz#d06c506977dd7863aa16e07f2136351ecc1be6ed"
+  integrity sha512-PdW+kn4eV99iP5gxWNSDQCbhMaDVej+RXL5xr6t04nbKLCBwYtA046t7ofoczHOm8u6c+45hpDKQVZqtqwkeQg==
+  dependencies:
+    playwright "1.40.0"
+
+"@types/node@^20.9.2":
+  version "20.9.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.2.tgz#002815c8e87fe0c9369121c78b52e800fadc0ac6"
+  integrity sha512-WHZXKFCEyIUJzAwh3NyyTHYSR35SevJ6mZ1nWwJafKtiQbqRTIKSRcw3Ma3acqgsent3RRDqeVwpHntMk+9irg==
+  dependencies:
+    undici-types "~5.26.4"
+
+dotenv@8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
+  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
+
+fsevents@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+playwright-core@1.40.0:
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.40.0.tgz#82f61e5504cb3097803b6f8bbd98190dd34bdf14"
+  integrity sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==
+
+playwright@1.40.0:
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.40.0.tgz#2a1824b9fe5c4fe52ed53db9ea68003543a99df0"
+  integrity sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==
+  dependencies:
+    playwright-core "1.40.0"
+  optionalDependencies:
+    fsevents "2.3.2"
+
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==

ee/query-service/Dockerfile

@@ -1,5 +1,5 @@
 # use a minimal alpine image
-FROM alpine:3.17
+FROM alpine:3.18.5
 
 # Add Maintainer Info
 LABEL maintainer="signoz"
@@ -18,6 +18,7 @@ COPY ee/query-service/bin/query-service-${TARGETOS}-${TARGETARCH} /root/query-se
 
 # copy prometheus YAML config
 COPY pkg/query-service/config/prometheus.yml /root/config/prometheus.yml
+COPY pkg/query-service/templates /root/templates
 
 # Make query-service executable for non-root users
 RUN chmod 755 /root /root/query-service

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

@@ -150,6 +150,7 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *baseapp.AuthMiddlew
 	router.HandleFunc("/api/v1/login", am.OpenAccess(ah.loginUser)).Methods(http.MethodPost)
 	router.HandleFunc("/api/v1/traces/{traceId}", am.ViewAccess(ah.searchTraces)).Methods(http.MethodGet)
 	router.HandleFunc("/api/v2/metrics/query_range", am.ViewAccess(ah.queryRangeMetricsV2)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v3/query_range", am.ViewAccess(ah.QueryRangeV3)).Methods(http.MethodPost)
 
 	// PAT APIs
 	router.HandleFunc("/api/v1/pat", am.OpenAccess(ah.createPAT)).Methods(http.MethodPost)
@@ -160,6 +161,13 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *baseapp.AuthMiddlew
 	router.HandleFunc("/api/v1/billing", am.AdminAccess(ah.getBilling)).Methods(http.MethodGet)
 	router.HandleFunc("/api/v1/portal", am.AdminAccess(ah.portalSession)).Methods(http.MethodPost)
 
+	router.HandleFunc("/api/v1/dashboards/{uuid}/lock", am.EditAccess(ah.lockDashboard)).Methods(http.MethodPut)
+	router.HandleFunc("/api/v1/dashboards/{uuid}/unlock", am.EditAccess(ah.unlockDashboard)).Methods(http.MethodPut)
+
+	router.HandleFunc("/api/v1/limits", am.AdminAccess(ah.getQueryLimits)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/limits", am.AdminAccess(ah.addQueryLimits)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/limits", am.AdminAccess(ah.updateQueryLimits)).Methods(http.MethodPut)
+
 	router.HandleFunc("/api/v2/licenses",
 		am.ViewAccess(ah.listLicensesV2)).
 		Methods(http.MethodGet)

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

@@ -0,0 +1,51 @@
+package api
+
+import (
+	"github.com/gorilla/mux"
+	"go.signoz.io/signoz/pkg/query-service/app/dashboards"
+	"go.signoz.io/signoz/pkg/query-service/auth"
+	"go.signoz.io/signoz/pkg/query-service/common"
+	"go.signoz.io/signoz/pkg/query-service/model"
+	"net/http"
+)
+
+func (ah *APIHandler) lockDashboard(w http.ResponseWriter, r *http.Request) {
+	ah.lockUnlockDashboard(w, r, true)
+}
+
+func (ah *APIHandler) unlockDashboard(w http.ResponseWriter, r *http.Request) {
+	ah.lockUnlockDashboard(w, r, false)
+}
+
+func (ah *APIHandler) lockUnlockDashboard(w http.ResponseWriter, r *http.Request, lock bool) {
+	// Locking can only be done by the owner of the dashboard
+	// or an admin
+
+	// - Fetch the dashboard
+	// - Check if the user is the owner or an admin
+	// - If yes, lock/unlock the dashboard
+	// - If no, return 403
+
+	// Get the dashboard UUID from the request
+	uuid := mux.Vars(r)["uuid"]
+	dashboard, err := dashboards.GetDashboard(r.Context(), uuid)
+	if err != nil {
+		RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: err}, err.Error())
+		return
+	}
+
+	user := common.GetUserFromContext(r.Context())
+	if !auth.IsAdmin(user) && (dashboard.CreateBy != nil && *dashboard.CreateBy != user.Email) {
+		RespondError(w, &model.ApiError{Typ: model.ErrorForbidden, Err: err}, "You are not authorized to lock/unlock this dashboard")
+		return
+	}
+
+	// Lock/Unlock the dashboard
+	err = dashboards.LockUnlockDashboard(r.Context(), uuid, lock)
+	if err != nil {
+		RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: err}, err.Error())
+		return
+	}
+
+	ah.Respond(w, "Dashboard updated successfully")
+}

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

@@ -52,7 +52,6 @@ func (ah *APIHandler) listLicenses(w http.ResponseWriter, r *http.Request) {
 }
 
 func (ah *APIHandler) applyLicense(w http.ResponseWriter, r *http.Request) {
-	ctx := context.Background()
 	var l model.License
 
 	if err := json.NewDecoder(r.Body).Decode(&l); err != nil {
@@ -64,8 +63,7 @@ func (ah *APIHandler) applyLicense(w http.ResponseWriter, r *http.Request) {
 		RespondError(w, model.BadRequest(fmt.Errorf("license key is required")), nil)
 		return
 	}
-
-	license, apiError := ah.LM().Activate(ctx, l.Key)
+	license, apiError := ah.LM().Activate(r.Context(), l.Key)
 	if apiError != nil {
 		RespondError(w, apiError, nil)
 		return

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

@@ -0,0 +1,51 @@
+package api
+
+import (
+	"encoding/json"
+	"net/http"
+
+	"go.signoz.io/signoz/ee/query-service/model"
+	basemodel "go.signoz.io/signoz/pkg/query-service/model"
+)
+
+func (aH *APIHandler) getQueryLimits(w http.ResponseWriter, r *http.Request) {
+	queryLimits, err := aH.AppDao().GetQueryLimits(r.Context())
+	if err != nil {
+		RespondError(w, &basemodel.ApiError{Typ: basemodel.ErrorInternal, Err: err}, nil)
+		return
+	}
+	aH.Respond(w, queryLimits)
+}
+
+func (aH *APIHandler) addQueryLimits(w http.ResponseWriter, r *http.Request) {
+	var queryLimits []*model.QueryLimit
+
+	if err := json.NewDecoder(r.Body).Decode(&queryLimits); err != nil {
+		RespondError(w, &basemodel.ApiError{Typ: basemodel.ErrorBadData, Err: err}, nil)
+		return
+	}
+
+	err := aH.AppDao().AddQueryLimits(r.Context(), queryLimits)
+	if err != nil {
+		RespondError(w, &basemodel.ApiError{Typ: basemodel.ErrorInternal, Err: err}, nil)
+		return
+	}
+	aH.Respond(w, nil)
+
+}
+
+func (aH *APIHandler) updateQueryLimits(w http.ResponseWriter, r *http.Request) {
+	var queryLimits []*model.QueryLimit
+
+	if err := json.NewDecoder(r.Body).Decode(&queryLimits); err != nil {
+		RespondError(w, &basemodel.ApiError{Typ: basemodel.ErrorBadData, Err: err}, nil)
+		return
+	}
+
+	err := aH.AppDao().UpdateQueryLimits(r.Context(), queryLimits)
+	if err != nil {
+		RespondError(w, &basemodel.ApiError{Typ: basemodel.ErrorInternal, Err: err}, nil)
+		return
+	}
+	aH.Respond(w, nil)
+}

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

@@ -4,14 +4,17 @@ import (
 	"bytes"
 	"fmt"
 	"net/http"
+	"strings"
 	"sync"
 	"text/template"
 	"time"
 
+	"go.signoz.io/signoz/pkg/query-service/app"
 	"go.signoz.io/signoz/pkg/query-service/app/metrics"
 	"go.signoz.io/signoz/pkg/query-service/app/parser"
 	"go.signoz.io/signoz/pkg/query-service/constants"
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
+	v3 "go.signoz.io/signoz/pkg/query-service/model/v3"
 	querytemplate "go.signoz.io/signoz/pkg/query-service/utils/queryTemplate"
 	"go.uber.org/zap"
 )
@@ -234,3 +237,52 @@ func (ah *APIHandler) queryRangeMetricsV2(w http.ResponseWriter, r *http.Request
 	resp := ResponseFormat{ResultType: "matrix", Result: seriesList, TableName: tableName}
 	ah.Respond(w, resp)
 }
+
+func (aH *APIHandler) QueryRangeV3(w http.ResponseWriter, r *http.Request) {
+	queryRangeParams, apiErrorObj := app.ParseQueryRangeParams(r)
+
+	if apiErrorObj != nil {
+		zap.S().Errorf(apiErrorObj.Err.Error())
+		RespondError(w, apiErrorObj, nil)
+		return
+	}
+
+	limits, err := aH.AppDao().GetQueryLimits(r.Context())
+	if err != nil {
+		zap.S().Errorf("Error while getting query limits: %v", err)
+		// We don't want to fail the request if we can't get the limits
+		// iterate over the nil slice will not execute the loop
+		// and the query will be executed without any limits
+		// this shouldn't happen ideally but we don't want to fail the request
+	}
+
+	var timeSeriesLimt int
+	for _, limit := range limits {
+		if limit.Name == "time_series_limit" {
+			timeSeriesLimt = limit.UsageLimit
+		}
+	}
+
+	if len(queryRangeParams.CompositeQuery.BuilderQueries) > 0 {
+		for idx := range queryRangeParams.CompositeQuery.BuilderQueries {
+			queryRangeParams.CompositeQuery.BuilderQueries[idx].QueryLimits = v3.QueryLimits{
+				MaxTimeSeries: timeSeriesLimt,
+			}
+			// TODO(srikanthccv): should apply to explore page also
+			if !strings.Contains(queryRangeParams.SourcePage, "dashboard") {
+				queryRangeParams.CompositeQuery.BuilderQueries[idx].QueryLimits.MaxTimeSeries = 0
+			}
+		}
+	}
+
+	// add temporality for each metric
+
+	temporalityErr := aH.APIHandler.AddTemporality(r.Context(), queryRangeParams)
+	if temporalityErr != nil {
+		zap.S().Errorf("Error while adding temporality for metrics: %v", temporalityErr)
+		RespondError(w, &basemodel.ApiError{Typ: basemodel.ErrorInternal, Err: temporalityErr}, nil)
+		return
+	}
+
+	aH.APIHandler.ExecQueryRangeV3(r.Context(), queryRangeParams, w, r)
+}

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

@@ -12,6 +12,7 @@ import (
 	"github.com/gorilla/mux"
 	"go.signoz.io/signoz/ee/query-service/model"
 	"go.signoz.io/signoz/pkg/query-service/auth"
+	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 	"go.uber.org/zap"
 )
 
@@ -47,8 +48,18 @@ func (ah *APIHandler) createPAT(w http.ResponseWriter, r *http.Request) {
 	req.CreatedAt = time.Now().Unix()
 	req.Token = generatePATToken()
 
+	// default expiry is 30 days
+	if req.ExpiresAt == 0 {
+		req.ExpiresAt = time.Now().AddDate(0, 0, 30).Unix()
+	}
+	// max expiry is 1 year
+	if req.ExpiresAt > time.Now().AddDate(1, 0, 0).Unix() {
+		req.ExpiresAt = time.Now().AddDate(1, 0, 0).Unix()
+	}
+
 	zap.S().Debugf("Got PAT request: %+v", req)
-	if apierr := ah.AppDao().CreatePAT(ctx, &req); apierr != nil {
+	var apierr basemodel.BaseApiError
+	if req, apierr = ah.AppDao().CreatePAT(ctx, req); apierr != nil {
 		RespondError(w, apierr, nil)
 		return
 	}

ee/query-service/app/server.go

@@ -23,6 +23,7 @@ import (
 	"go.signoz.io/signoz/ee/query-service/constants"
 	"go.signoz.io/signoz/ee/query-service/dao"
 	"go.signoz.io/signoz/ee/query-service/interfaces"
+	"go.signoz.io/signoz/pkg/query-service/auth"
 	baseInterface "go.signoz.io/signoz/pkg/query-service/interfaces"
 	v3 "go.signoz.io/signoz/pkg/query-service/model/v3"
 
@@ -41,7 +42,6 @@ import (
 	baseconst "go.signoz.io/signoz/pkg/query-service/constants"
 	"go.signoz.io/signoz/pkg/query-service/healthcheck"
 	basealm "go.signoz.io/signoz/pkg/query-service/integrations/alertManager"
-	baseint "go.signoz.io/signoz/pkg/query-service/interfaces"
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 	pqle "go.signoz.io/signoz/pkg/query-service/pqlEngine"
 	rules "go.signoz.io/signoz/pkg/query-service/rules"
@@ -86,7 +86,7 @@ type Server struct {
 	privateHTTP *http.Server
 
 	// feature flags
-	featureLookup baseint.FeatureLookup
+	featureLookup baseInterface.FeatureLookup
 
 	// Usage manager
 	usageManager *usage.Manager
@@ -437,7 +437,10 @@ func extractQueryRangeV3Data(path string, r *http.Request) (map[string]interface
 			telemetry.GetInstance().AddActiveLogsUser()
 		}
 		data["dataSources"] = dataSources
-		telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_QUERY_RANGE_V3, data, true)
+		userEmail, err := auth.GetEmailFromJwt(r.Context())
+		if err == nil {
+			telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_QUERY_RANGE_V3, data, userEmail, true)
+		}
 	}
 	return data, true
 }
@@ -458,6 +461,8 @@ func getActiveLogs(path string, r *http.Request) {
 
 func (s *Server) analyticsMiddleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		ctx := auth.AttachJwtToContext(r.Context(), r)
+		r = r.WithContext(ctx)
 		route := mux.CurrentRoute(r)
 		path, _ := route.GetPathTemplate()
 
@@ -474,8 +479,11 @@ func (s *Server) analyticsMiddleware(next http.Handler) http.Handler {
 			}
 		}
 
-		if _, ok := telemetry.IgnoredPaths()[path]; !ok {
-			telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_PATH, data)
+		if _, ok := telemetry.EnabledPaths()[path]; ok {
+			userEmail, err := auth.GetEmailFromJwt(r.Context())
+			if err == nil {
+				telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_PATH, data, userEmail)
+			}
 		}
 
 	})
@@ -632,7 +640,7 @@ func makeRulesManager(
 	alertManagerURL string,
 	ruleRepoURL string,
 	db *sqlx.DB,
-	ch baseint.Reader,
+	ch baseInterface.Reader,
 	disableRules bool,
 	fm baseInterface.FeatureLookup) (*rules.Manager, error) {
 

ee/query-service/dao/interface.go

@@ -33,10 +33,14 @@ type ModelDao interface {
 	DeleteDomain(ctx context.Context, id uuid.UUID) basemodel.BaseApiError
 	GetDomainByEmail(ctx context.Context, email string) (*model.OrgDomain, basemodel.BaseApiError)
 
-	CreatePAT(ctx context.Context, p *model.PAT) basemodel.BaseApiError
+	CreatePAT(ctx context.Context, p model.PAT) (model.PAT, basemodel.BaseApiError)
 	GetPAT(ctx context.Context, pat string) (*model.PAT, basemodel.BaseApiError)
 	GetPATByID(ctx context.Context, id string) (*model.PAT, basemodel.BaseApiError)
 	GetUserByPAT(ctx context.Context, token string) (*basemodel.UserPayload, basemodel.BaseApiError)
 	ListPATs(ctx context.Context, userID string) ([]model.PAT, basemodel.BaseApiError)
 	DeletePAT(ctx context.Context, id string) basemodel.BaseApiError
+
+	GetQueryLimits(ctx context.Context) ([]*model.QueryLimit, error)
+	AddQueryLimits(ctx context.Context, queryLimits []*model.QueryLimit) error
+	UpdateQueryLimits(ctx context.Context, queryLimits []*model.QueryLimit) error
 }

ee/query-service/dao/sqlite/limits.go

@@ -0,0 +1,54 @@
+package sqlite
+
+import (
+	"context"
+
+	"go.signoz.io/signoz/ee/query-service/model"
+)
+
+// GetQueryLimits returns the query limits
+func (m *modelDao) GetQueryLimits(ctx context.Context) ([]*model.QueryLimit, error) {
+	query := `SELECT name, title, usage_limit FROM resource_usage_limits`
+	var queryLimits []*model.QueryLimit
+	err := m.DB().Select(&queryLimits, query)
+	if err != nil {
+		return nil, err
+	}
+	return queryLimits, nil
+}
+
+// AddQueryLimits adds the query limits
+func (m *modelDao) AddQueryLimits(ctx context.Context, queryLimits []*model.QueryLimit) error {
+	tx := m.DB().MustBegin()
+	for _, queryLimit := range queryLimits {
+		query := `INSERT INTO resource_usage_limits (name, title, usage_limit) VALUES (?, ?, ?)`
+		_, err := tx.Exec(query, queryLimit.Name, queryLimit.Title, queryLimit.UsageLimit)
+		if err != nil {
+			tx.Rollback()
+			return err
+		}
+	}
+	err := tx.Commit()
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
+// UpdateQueryLimits updates the query limits
+func (m *modelDao) UpdateQueryLimits(ctx context.Context, queryLimits []*model.QueryLimit) error {
+	tx := m.DB().MustBegin()
+	for _, queryLimit := range queryLimits {
+		query := `UPDATE resource_usage_limits SET usage_limit = ? WHERE name = ?`
+		_, err := tx.Exec(query, queryLimit.UsageLimit, queryLimit.Name)
+		if err != nil {
+			tx.Rollback()
+			return err
+		}
+	}
+	err := tx.Commit()
+	if err != nil {
+		return err
+	}
+	return nil
+}

ee/query-service/dao/sqlite/modelDao.go

@@ -38,7 +38,7 @@ func InitDB(dataSourceName string) (*modelDao, error) {
 	basedao.SetDB(dao)
 	m := &modelDao{ModelDaoSqlite: dao}
 
-	table_schema := `
+	tableSchema := `
 	PRAGMA foreign_keys = ON;
 	CREATE TABLE IF NOT EXISTS org_domains(
 		id TEXT PRIMARY KEY,
@@ -60,11 +60,23 @@ func InitDB(dataSourceName string) (*modelDao, error) {
 	);
 	`
 
-	_, err = m.DB().Exec(table_schema)
+	_, err = m.DB().Exec(tableSchema)
 	if err != nil {
 		return nil, fmt.Errorf("error in creating tables: %v", err.Error())
 	}
 
+	// create resource_usage_limits table
+	tableSchema = `CREATE TABLE IF NOT EXISTS resource_usage_limits (
+		name TEXT PRIMARY KEY,
+		title TEXT,
+		usage_limit INTEGER DEFAULT 0
+	);`
+
+	_, err = m.DB().Exec(tableSchema)
+	if err != nil {
+		return nil, fmt.Errorf("Error in creating resource_usage_limits table: %s", err.Error())
+	}
+
 	return m, nil
 }
 

ee/query-service/dao/sqlite/pat.go

@@ -3,14 +3,15 @@ package sqlite
 import (
 	"context"
 	"fmt"
+	"strconv"
 
 	"go.signoz.io/signoz/ee/query-service/model"
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 	"go.uber.org/zap"
 )
 
-func (m *modelDao) CreatePAT(ctx context.Context, p *model.PAT) basemodel.BaseApiError {
-	_, err := m.DB().ExecContext(ctx,
+func (m *modelDao) CreatePAT(ctx context.Context, p model.PAT) (model.PAT, basemodel.BaseApiError) {
+	result, err := m.DB().ExecContext(ctx,
 		"INSERT INTO personal_access_tokens (user_id, token, name, created_at, expires_at) VALUES ($1, $2, $3, $4, $5)",
 		p.UserID,
 		p.Token,
@@ -19,9 +20,15 @@ func (m *modelDao) CreatePAT(ctx context.Context, p *model.PAT) basemodel.BaseAp
 		p.ExpiresAt)
 	if err != nil {
 		zap.S().Errorf("Failed to insert PAT in db, err: %v", zap.Error(err))
-		return model.InternalError(fmt.Errorf("PAT insertion failed"))
+		return model.PAT{}, model.InternalError(fmt.Errorf("PAT insertion failed"))
 	}
-	return nil
+	id, err := result.LastInsertId()
+	if err != nil {
+		zap.S().Errorf("Failed to get last inserted id, err: %v", zap.Error(err))
+		return model.PAT{}, model.InternalError(fmt.Errorf("PAT insertion failed"))
+	}
+	p.Id = strconv.Itoa(int(id))
+	return p, nil
 }
 
 func (m *modelDao) ListPATs(ctx context.Context, userID string) ([]model.PAT, basemodel.BaseApiError) {
@@ -90,7 +97,7 @@ func (m *modelDao) GetUserByPAT(ctx context.Context, token string) (*basemodel.U
 				u.org_id,
 				u.group_id
 			  FROM users u, personal_access_tokens p
-			  WHERE u.id = p.user_id and p.token=?;`
+			  WHERE u.id = p.user_id and p.token=? and p.expires_at >= strftime('%s', 'now');`
 
 	if err := m.DB().Select(&users, query, token); err != nil {
 		return nil, model.InternalError(fmt.Errorf("failed to fetch user from PAT, err: %v", err))

ee/query-service/license/manager.go

@@ -10,6 +10,7 @@ import (
 
 	"sync"
 
+	"go.signoz.io/signoz/pkg/query-service/auth"
 	baseconstants "go.signoz.io/signoz/pkg/query-service/constants"
 
 	validate "go.signoz.io/signoz/ee/query-service/integrations/signozio"
@@ -203,7 +204,7 @@ func (lm *Manager) Validate(ctx context.Context) (reterr error) {
 			zap.S().Errorf("License validation completed with error", reterr)
 			atomic.AddUint64(&lm.failedAttempts, 1)
 			telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_LICENSE_CHECK_FAILED,
-				map[string]interface{}{"err": reterr.Error()})
+				map[string]interface{}{"err": reterr.Error()}, "")
 		} else {
 			zap.S().Info("License validation completed with no errors")
 		}
@@ -259,8 +260,11 @@ func (lm *Manager) Validate(ctx context.Context) (reterr error) {
 func (lm *Manager) Activate(ctx context.Context, key string) (licenseResponse *model.License, errResponse *model.ApiError) {
 	defer func() {
 		if errResponse != nil {
+			userEmail, err := auth.GetEmailFromJwt(ctx)
+			if err == nil {
 				telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_LICENSE_ACT_FAILED,
-				map[string]interface{}{"err": errResponse.Err.Error()})
+					map[string]interface{}{"err": errResponse.Err.Error()}, userEmail)
+			}
 		}
 	}()
 

ee/query-service/model/domain.go

@@ -9,8 +9,8 @@ import (
 	"github.com/google/uuid"
 	"github.com/pkg/errors"
 	saml2 "github.com/russellhaering/gosaml2"
-	"go.signoz.io/signoz/ee/query-service/sso/saml"
 	"go.signoz.io/signoz/ee/query-service/sso"
+	"go.signoz.io/signoz/ee/query-service/sso/saml"
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 	"go.uber.org/zap"
 )
@@ -138,7 +138,6 @@ func (od *OrgDomain) PrepareSamlRequest(siteUrl *url.URL) (*saml2.SAMLServicePro
 
 func (od *OrgDomain) BuildSsoUrl(siteUrl *url.URL) (ssoUrl string, err error) {
 
-
 	fmtDomainId := strings.Replace(od.Id.String(), "-", ":", -1)
 
 	// build redirect url from window.location sent by frontend
@@ -156,8 +155,7 @@ func (od *OrgDomain) BuildSsoUrl(siteUrl *url.URL) (ssoUrl string, err error) {
 	// auth provider to the backend (HandleCallback or HandleSSO method).
 	relayState := fmt.Sprintf("%s?domainId=%s", redirectURL, fmtDomainId)
 
-
-	switch (od.SsoType) {
+	switch od.SsoType {
 	case SAML:
 
 		sp, err := od.PrepareSamlRequest(siteUrl)
@@ -180,5 +178,4 @@ func (od *OrgDomain) BuildSsoUrl(siteUrl *url.URL) (ssoUrl string, err error) {
 		return "", fmt.Errorf("unsupported SSO config for the domain")
 	}
 
-
 }

ee/query-service/model/limits.go

@@ -0,0 +1,12 @@
+package model
+
+type QueryLimit struct {
+	// Name of the query limit
+	Name string `db:"name" json:"name"`
+
+	// Title of the query limit
+	Title string `db:"title" json:"title"`
+	// UsageLimit indicates the usage limit of the query
+	// If the usage limit is 0, then there is no limit
+	UsageLimit int `db:"usage_limit" json:"usage_limit"`
+}

ee/query-service/model/pat.go

@@ -6,5 +6,5 @@ type PAT struct {
 	Token     string `json:"token" db:"token"`
 	Name      string `json:"name" db:"name"`
 	CreatedAt int64  `json:"createdAt" db:"created_at"`
-	ExpiresAt int64  `json:"expiresAt" db:"expires_at"` // unused as of now
+	ExpiresAt int64  `json:"expiresAt" db:"expires_at"`
 }

ee/query-service/model/plans.go

@@ -52,14 +52,14 @@ var BasicPlan = basemodel.FeatureSet{
 		Name:       basemodel.QueryBuilderPanels,
 		Active:     true,
 		Usage:      0,
-		UsageLimit: 5,
+		UsageLimit: 20,
 		Route:      "",
 	},
 	basemodel.Feature{
 		Name:       basemodel.QueryBuilderAlerts,
 		Active:     true,
 		Usage:      0,
-		UsageLimit: 5,
+		UsageLimit: 10,
 		Route:      "",
 	},
 	basemodel.Feature{

frontend/.eslintrc.js

@@ -86,6 +86,7 @@ module.exports = {
 			},
 		],
 		'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+		'no-plusplus': 'off',
 		'jsx-a11y/label-has-associated-control': [
 			'error',
 			{
@@ -109,7 +110,6 @@ module.exports = {
 		// eslint rules need to remove
 		'@typescript-eslint/no-shadow': 'off',
 		'import/no-cycle': 'off',
-
 		'prettier/prettier': [
 			'error',
 			{},

frontend/.husky/commit-msg

@@ -2,3 +2,19 @@
 . "$(dirname "$0")/_/husky.sh"
 
 cd frontend && yarn run commitlint --edit $1
+
+branch="$(git rev-parse --abbrev-ref HEAD)"
+
+color_red="$(tput setaf 1)"
+bold="$(tput bold)"
+reset="$(tput sgr0)"
+
+if [ "$branch" = "main" ]; then
+  echo "${color_red}${bold}You can't commit directly to the main branch${reset}"
+  exit 1
+fi
+
+if [ "$branch" = "develop" ]; then
+  echo "${color_red}${bold}You can't commit directly to the develop branch${reset}"
+  exit 1
+fi

frontend/jest.config.ts

@@ -22,7 +22,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/package.json

@@ -29,6 +29,9 @@
 	"dependencies": {
 		"@ant-design/colors": "6.0.0",
 		"@ant-design/icons": "4.8.0",
+		"@dnd-kit/core": "6.1.0",
+		"@dnd-kit/modifiers": "7.0.0",
+		"@dnd-kit/sortable": "8.0.0",
 		"@grafana/data": "^9.5.2",
 		"@mdx-js/loader": "2.3.0",
 		"@mdx-js/react": "2.3.0",
@@ -36,9 +39,9 @@
 		"@uiw/react-md-editor": "3.23.5",
 		"@xstate/react": "^3.0.0",
 		"ansi-to-html": "0.7.2",
-		"antd": "5.0.5",
+		"antd": "5.11.0",
 		"antd-table-saveas-excel": "2.2.1",
-		"axios": "^0.21.0",
+		"axios": "1.6.2",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^29.6.4",
 		"babel-loader": "9.1.3",
@@ -80,13 +83,14 @@
 		"react-dnd-html5-backend": "16.0.1",
 		"react-dom": "18.2.0",
 		"react-drag-listview": "2.0.0",
+		"react-error-boundary": "4.0.11",
 		"react-force-graph": "^1.43.0",
+		"react-full-screen": "1.1.1",
 		"react-grid-layout": "^1.3.4",
 		"react-helmet-async": "1.3.0",
 		"react-i18next": "^11.16.1",
-		"react-intersection-observer": "9.4.1",
 		"react-markdown": "8.0.7",
-		"react-query": "^3.34.19",
+		"react-query": "3.39.3",
 		"react-redux": "^7.2.2",
 		"react-router-dom": "^5.2.0",
 		"react-syntax-highlighter": "15.5.0",
@@ -102,6 +106,7 @@
 		"ts-node": "^10.2.1",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"typescript": "^4.0.5",
+		"uplot": "1.6.26",
 		"uuid": "^8.3.2",
 		"web-vitals": "^0.2.4",
 		"webpack": "5.88.2",

frontend/public/Logos/logstash.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="2500" height="2500"><style>.st0{fill:#f3bd19}.st1{fill:#231f20}.st2{fill:#3ebeb0}.st3{fill:#37a595}.st4{fill:none}</style><path class="st0" d="M41.1 41.9H15.6V12.5h7.7c9.9 0 17.8 8 17.8 17.8v11.6z"/><path class="st1" d="M41.1 67.5c-14.1 0-25.6-11.4-25.6-25.6h25.6v25.6z"/><path class="st2" d="M41.1 41.9h23.3v25.6H41.1z"/><path class="st3" d="M41.1 41.9h5.4v25.6h-5.4z"/><path class="st4" d="M0 0h80v80H0z"/></svg>

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

@@ -34,7 +34,7 @@
 	"button_returntorules": "Return to rules",
 	"button_cancelchanges": "Cancel",
 	"button_discard": "Discard",
-	"text_condition1": "Send a notification when the metric is",
+	"text_condition1": "Send a notification when",
 	"text_condition2": "the threshold",
 	"text_condition3": "during the last",
 	"option_5min": "5 mins",
@@ -109,5 +109,6 @@
 	"traces_based_alert_desc": "Send a notification when a condition occurs in the traces data.",
 	"exceptions_based_alert": "Exceptions-based Alert",
 	"exceptions_based_alert_desc": "Send a notification when a condition occurs in the exceptions data.",
-	"field_unit": "Threshold unit"
+	"field_unit": "Threshold unit",
+	"selected_query_placeholder": "Select query"
 }

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

@@ -20,5 +20,10 @@
 	"variable_updated_successfully": "Variable updated successfully",
 	"error_while_updating_variable": "Error while updating variable",
 	"dashboard_has_been_updated": "Dashboard has been updated",
-	"do_you_want_to_refresh_the_dashboard": "Do you want to refresh the dashboard?"
+	"do_you_want_to_refresh_the_dashboard": "Do you want to refresh the dashboard?",
+	"delete_dashboard_success": "{{name}} dashboard deleted successfully",
+	"dashboard_unsave_changes": "There are unsaved changes in the Query builder, please stage and run the query or the changes will be lost. Press OK to discard.",
+	"dashboard_save_changes": "Your graph built with {{queryTag}} query will be saved. Press OK to confirm.",
+	"your_graph_build_with": "Your graph built with",
+	"dashboar_ok_confirm": "query will be saved. Press OK to confirm."
 }

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

@@ -14,5 +14,6 @@
 	"delete_domain_message": "Are you sure you want to delete this domain?",
 	"delete_domain": "Delete Domain",
 	"add_domain": "Add Domains",
-	"saml_settings":"Your SAML settings have been saved, please login from incognito window to confirm that it has been set up correctly"
+	"saml_settings": "Your SAML settings have been saved, please login from incognito window to confirm that it has been set up correctly",
+	"invite_link_share_manually": "After inviting members, please copy the invite link and send them the link manually"
 }

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

@@ -26,7 +26,7 @@
 	"button_returntorules": "Return to rules",
 	"button_cancelchanges": "Cancel",
 	"button_discard": "Discard",
-  "text_condition1": "Send a notification when the metric is",
+	"text_condition1": "Send a notification when",
 	"text_condition2": "the threshold",
 	"text_condition3": "during the last",
 	"option_5min": "5 mins",

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

@@ -0,0 +1,3 @@
+{
+	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via Intercom support."
+}

frontend/public/locales/en/alerts.json

@@ -34,7 +34,7 @@
 	"button_returntorules": "Return to rules",
 	"button_cancelchanges": "Cancel",
 	"button_discard": "Discard",
-	"text_condition1": "Send a notification when the metric is",
+	"text_condition1": "Send a notification when",
 	"text_condition2": "the threshold",
 	"text_condition3": "during the last",
 	"option_5min": "5 mins",
@@ -109,5 +109,6 @@
 	"traces_based_alert_desc": "Send a notification when a condition occurs in the traces data.",
 	"exceptions_based_alert": "Exceptions-based Alert",
 	"exceptions_based_alert_desc": "Send a notification when a condition occurs in the exceptions data.",
-	"field_unit": "Threshold unit"
+	"field_unit": "Threshold unit",
+	"selected_query_placeholder": "Select query"
 }

frontend/public/locales/en/dashboard.json

@@ -17,8 +17,16 @@
 	"layout_saved_successfully": "Layout saved successfully",
 	"add_panel": "Add Panel",
 	"save_layout": "Save Layout",
+	"full_view": "Full Screen View",
 	"variable_updated_successfully": "Variable updated successfully",
 	"error_while_updating_variable": "Error while updating variable",
 	"dashboard_has_been_updated": "Dashboard has been updated",
-	"do_you_want_to_refresh_the_dashboard": "Do you want to refresh the dashboard?"
+	"do_you_want_to_refresh_the_dashboard": "Do you want to refresh the dashboard?",
+	"locked_dashboard_delete_tooltip_admin_author": "Dashboard is locked. Please unlock the dashboard to enable delete.",
+	"locked_dashboard_delete_tooltip_editor": "Dashboard is locked. Please contact admin to delete the dashboard.",
+	"delete_dashboard_success": "{{name}} dashboard deleted successfully",
+	"dashboard_unsave_changes": "There are unsaved changes in the Query builder, please stage and run the query or the changes will be lost. Press OK to discard.",
+	"dashboard_save_changes": "Your graph built with {{queryTag}} query will be saved. Press OK to confirm.",
+	"your_graph_build_with": "Your graph built with",
+	"dashboar_ok_confirm": "query will be saved. Press OK to confirm."
 }

frontend/public/locales/en/errorDetails.json

@@ -3,5 +3,7 @@
 	"see_error_in_trace_graph": "See the error in trace graph",
 	"stack_trace": "Stacktrace",
 	"older": "Older",
-	"newer": "Newer"
+	"newer": "Newer",
+	"something_went_wrong": "Oops !!! Something went wrong",
+	"contact_if_issue_exists": "Don't worry, our team is here to help. Please contact support if the issue persists."
 }

frontend/public/locales/en/organizationsettings.json

@@ -14,5 +14,6 @@
 	"delete_domain_message": "Are you sure you want to delete this domain?",
 	"delete_domain": "Delete Domain",
 	"add_domain": "Add Domains",
-	"saml_settings":"Your SAML settings have been saved, please login from incognito window to confirm that it has been set up correctly"
+	"saml_settings": "Your SAML settings have been saved, please login from incognito window to confirm that it has been set up correctly",
+	"invite_link_share_manually": "After inviting members, please copy the invite link and send them the link manually"
 }

frontend/public/locales/en/pipeline.json

@@ -5,6 +5,7 @@
 	"create": "Create",
 	"reorder": "Reorder",
 	"cancel": "Cancel",
+	"learn_more": "Learn more about pipelines",
 	"reorder_pipeline": "Do you want to reorder pipeline?",
 	"reorder_pipeline_description": "Logs are processed sequentially in processors and pipelines. Reordering it may change how data is processed by them.",
 	"delete_pipeline": "Do you want to delete pipeline",
@@ -31,15 +32,15 @@
 	"processor_name_placeholder": "Name",
 	"processor_regex_placeholder": "Regex",
 	"processor_parsefrom_placeholder": "Parse From",
-	"processor_parseto_placeholder": "Parse From",
+	"processor_parseto_placeholder": "Parse To",
 	"processor_onerror_placeholder": "on Error",
 	"processor_pattern_placeholder": "Pattern",
 	"processor_field_placeholder": "Field",
 	"processor_value_placeholder": "Value",
 	"processor_description_placeholder": "example rule: %{word:first}",
-	"processor_trace_id_placeholder": "Trace Id Parce From",
-	"processor_span_id_placeholder": "Span id Parse From",
-	"processor_trace_flags_placeholder": "Trace flags parse from",
+	"processor_trace_id_placeholder": "Parse Trace ID from",
+	"processor_span_id_placeholder": "Parse Span ID from",
+	"processor_trace_flags_placeholder": "Parse Trace flags from",
 	"processor_from_placeholder": "From",
 	"processor_to_placeholder": "To"
 }

frontend/public/locales/en/rules.json

@@ -26,7 +26,7 @@
 	"button_returntorules": "Return to rules",
 	"button_cancelchanges": "Cancel",
 	"button_discard": "Discard",
-  "text_condition1": "Send a notification when the metric is",
+	"text_condition1": "Send a notification when",
 	"text_condition2": "the threshold",
 	"text_condition3": "during the last",
 	"option_5min": "5 mins",

frontend/public/locales/en/services.json

@@ -0,0 +1,3 @@
+{
+	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via Intercom support."
+}

frontend/public/locales/en/titles.json

@@ -32,6 +32,7 @@
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
 	"LIVE_LOGS": "SigNoz | Live Logs",
+	"LOGS_PIPELINES": "SigNoz | Logs Pipelines",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",
 	"LIST_LICENSES": "SigNoz | List of Licenses",

frontend/public/locales/en/valueGraph.json

@@ -0,0 +1,3 @@
+{
+    "this_value_satisfies_multiple_thresholds": "This value satisfies multiple thresholds."
+}

frontend/src/AppRoutes/Private.tsx

@@ -39,10 +39,12 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		[pathname],
 	);
 
-	const { data: licensesData } = useLicense();
+	const {
+		data: licensesData,
+		isFetching: isFetchingLicensesData,
+	} = useLicense();
 
 	const {
-		user,
 		isUserFetching,
 		isUserFetchingError,
 		isLoggedIn: isLoggedInState,
@@ -116,7 +118,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		if (
 			localStorageUserAuthToken &&
 			localStorageUserAuthToken.refreshJwt &&
-			user?.userId === ''
+			isUserFetching
 		) {
 			handleUserLoginIfTokenPresent(key);
 		} else {
@@ -131,7 +133,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 		if (path && path !== ROUTES.WORKSPACE_LOCKED) {
 			history.push(ROUTES.WORKSPACE_LOCKED);
-		}
 
 			dispatch({
 				type: UPDATE_USER_IS_FETCH,
@@ -139,20 +140,27 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 					isUserFetching: false,
 				},
 			});
+		}
 	};
 
+	useEffect(() => {
+		if (!isFetchingLicensesData) {
+			const shouldBlockWorkspace = licensesData?.payload?.workSpaceBlock;
+
+			if (shouldBlockWorkspace) {
+				navigateToWorkSpaceBlocked(currentRoute);
+			}
+		}
+	}, [isFetchingLicensesData]);
+
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
 		(async (): Promise<void> => {
 			try {
-				const shouldBlockWorkspace = licensesData?.payload?.workSpaceBlock;
-
 				if (currentRoute) {
 					const { isPrivate, key } = currentRoute;
 
-					if (shouldBlockWorkspace) {
-						navigateToWorkSpaceBlocked(currentRoute);
-					} else if (isPrivate) {
+					if (isPrivate && key !== ROUTES.WORKSPACE_LOCKED) {
 						handlePrivateRoutes(key);
 					} else {
 						// no need to fetch the user and make user fetching false

frontend/src/AppRoutes/index.tsx

@@ -7,12 +7,14 @@ import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
+import useAnalytics from 'hooks/analytics/useAnalytics';
 import { useThemeConfig } from 'hooks/useDarkMode';
 import useGetFeatureFlag from 'hooks/useGetFeatureFlag';
 import useLicense, { LICENSE_PLAN_KEY } from 'hooks/useLicense';
 import { NotificationProvider } from 'hooks/useNotifications';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
 import history from 'lib/history';
+import { identity, pickBy } from 'lodash-es';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useEffect, useState } from 'react';
@@ -24,7 +26,6 @@ import AppActions from 'types/actions';
 import { UPDATE_FEATURE_FLAG_RESPONSE } from 'types/actions/app';
 import AppReducer, { User } from 'types/reducer/app';
 import { extractDomain, isCloudUser, isEECloudUser } from 'utils/app';
-import { trackPageView } from 'utils/segmentAnalytics';
 
 import PrivateRoute from './Private';
 import defaultRoutes, { AppRoutes, SUPPORT_ROUTE } from './routes';
@@ -40,6 +41,8 @@ function App(): JSX.Element {
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
+	const { trackPageView } = useAnalytics();
+
 	const { hostname, pathname } = window.location;
 
 	const isCloudUserVal = isCloudUser();
@@ -90,13 +93,19 @@ function App(): JSX.Element {
 		const orgName =
 			org && Array.isArray(org) && org.length > 0 ? org[0].name : '';
 
+		const { name, email } = user;
+
 		const identifyPayload = {
-			email: user?.email,
-			name: user?.name,
+			email,
+			name,
 			company_name: orgName,
 			role,
+			source: 'signoz-ui',
 		};
-		const domain = extractDomain(user?.email);
+
+		const sanitizedIdentifyPayload = pickBy(identifyPayload, identity);
+
+		const domain = extractDomain(email);
 
 		const hostNameParts = hostname.split('.');
 
@@ -106,13 +115,14 @@ function App(): JSX.Element {
 			data_region: hostNameParts[1],
 			tenant_url: hostname,
 			company_domain: domain,
+			source: 'signoz-ui',
 		};
 
-		window.analytics.identify(user?.email, identifyPayload);
+		window.analytics.identify(email, sanitizedIdentifyPayload);
 
 		window.analytics.group(domain, groupTraits);
 
-		window.clarity('identify', user.email, user.name);
+		window.clarity('identify', email, name);
 	};
 
 	useEffect(() => {
@@ -148,6 +158,7 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		trackPageView(pathname);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [pathname]);
 
 	return (

frontend/src/AppRoutes/pageComponents.ts

@@ -49,7 +49,8 @@ export const Onboarding = Loadable(
 );
 
 export const DashboardPage = Loadable(
-	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/Dashboard'),
+	() =>
+		import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardsListPage'),
 );
 
 export const NewDashboardPage = Loadable(

frontend/src/AppRoutes/routes.ts

@@ -282,10 +282,10 @@ const routes: AppRoutes[] = [
 		isPrivate: false,
 	},
 	{
-		path: ROUTES.PIPELINES,
+		path: ROUTES.LOGS_PIPELINES,
 		exact: true,
 		component: PipelinePage,
-		key: 'PIPELINES',
+		key: 'LOGS_PIPELINES',
 		isPrivate: true,
 	},
 	{
@@ -299,7 +299,7 @@ const routes: AppRoutes[] = [
 		path: ROUTES.WORKSPACE_LOCKED,
 		exact: true,
 		component: WorkspaceBlocked,
-		isPrivate: false,
+		isPrivate: true,
 		key: 'WORKSPACE_LOCKED',
 	},
 ];

frontend/src/api/ErrorResponseHandler.ts

@@ -1,4 +1,4 @@
-import { AxiosError } from 'axios';
+import { AxiosError, AxiosResponse } from 'axios';
 import { ErrorResponse } from 'types/api';
 import { ErrorStatusCode } from 'types/common';
 
@@ -10,7 +10,7 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 		const statusCode = response.status as ErrorStatusCode;
 
 		if (statusCode >= 400 && statusCode < 500) {
-			const { data } = response;
+			const { data } = response as AxiosResponse;
 
 			if (statusCode === 404) {
 				return {

frontend/src/api/dashboard/get.ts

@@ -3,9 +3,9 @@ import { ApiResponse } from 'types/api';
 import { Props } from 'types/api/dashboard/get';
 import { Dashboard } from 'types/api/dashboard/getAll';
 
-const get = (props: Props): Promise<Dashboard> =>
+const getDashboard = (props: Props): Promise<Dashboard> =>
 	axios
 		.get<ApiResponse<Dashboard>>(`/dashboards/${props.uuid}`)
 		.then((res) => res.data.data);
 
-export default get;
+export default getDashboard;

frontend/src/api/dashboard/lockDashboard.ts

@@ -0,0 +1,11 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+
+interface LockDashboardProps {
+	uuid: string;
+}
+
+const lockDashboard = (props: LockDashboardProps): Promise<AxiosResponse> =>
+	axios.put(`/dashboards/${props.uuid}/lock`);
+
+export default lockDashboard;

frontend/src/api/dashboard/queryRangeFormat.ts

@@ -0,0 +1,15 @@
+import { ApiV3Instance as axios } from 'api';
+import { ApiResponse } from 'types/api';
+import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
+import { QueryRangePayload } from 'types/api/metrics/getQueryRange';
+
+interface IQueryRangeFormat {
+	compositeQuery: ICompositeMetricQuery;
+}
+
+export const getQueryRangeFormat = (
+	props?: Partial<QueryRangePayload>,
+): Promise<IQueryRangeFormat> =>
+	axios
+		.post<ApiResponse<IQueryRangeFormat>>('/query_range/format', props)
+		.then((res) => res.data.data);

frontend/src/api/dashboard/unlockDashboard.ts

@@ -0,0 +1,11 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+
+interface UnlockDashboardProps {
+	uuid: string;
+}
+
+const unlockDashboard = (props: UnlockDashboardProps): Promise<AxiosResponse> =>
+	axios.put(`/dashboards/${props.uuid}/unlock`);
+
+export default unlockDashboard;

frontend/src/api/dashboard/update.ts

@@ -4,7 +4,7 @@ import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/dashboard/update';
 
-const update = async (
+const updateDashboard = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
@@ -23,4 +23,4 @@ const update = async (
 	}
 };
 
-export default update;
+export default updateDashboard;

frontend/src/api/dashboard/variables/dashboardVariablesQuery.ts

@@ -0,0 +1,30 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	Props,
+	VariableResponseProps,
+} from 'types/api/dashboard/variables/query';
+
+const dashboardVariablesQuery = async (
+	props: Props,
+): Promise<SuccessResponse<VariableResponseProps> | ErrorResponse> => {
+	try {
+		const response = await axios.post(`/variables/query`, props);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		const formattedError = ErrorResponseHandler(error as AxiosError);
+
+		// eslint-disable-next-line @typescript-eslint/no-throw-literal
+		throw { message: 'Error fetching data', details: formattedError };
+	}
+};
+
+export default dashboardVariablesQuery;

frontend/src/api/dashboard/variables/query.ts

@@ -1,24 +0,0 @@
-import { ApiV2Instance as axios } from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/dashboard/variables/query';
-
-const query = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.post(`/variables/query`, props);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default query;

frontend/src/api/index.ts

@@ -4,7 +4,7 @@
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import loginApi from 'api/user/login';
 import afterLogin from 'AppRoutes/utils';
-import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import { ENVIRONMENT } from 'constants/env';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import store from 'store';
@@ -17,14 +17,16 @@ const interceptorsResponse = (
 ): Promise<AxiosResponse<any>> => Promise.resolve(value);
 
 const interceptorsRequestResponse = (
-	value: AxiosRequestConfig,
-): AxiosRequestConfig => {
+	value: InternalAxiosRequestConfig,
+): InternalAxiosRequestConfig => {
 	const token =
 		store.getState().app.user?.accessJwt ||
 		getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN) ||
 		'';
 
+	if (value && value.headers) {
 		value.headers.Authorization = token ? `Bearer ${token}` : '';
+	}
 
 	return value;
 };
@@ -92,8 +94,8 @@ const instance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiV1}`,
 });
 
-instance.interceptors.response.use(interceptorsResponse, interceptorRejected);
 instance.interceptors.request.use(interceptorsRequestResponse);
+instance.interceptors.response.use(interceptorsResponse, interceptorRejected);
 
 export const AxiosAlertManagerInstance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiAlertManager}`,

frontend/src/api/metrics/getQueryRange.ts

@@ -9,9 +9,10 @@ import {
 
 export const getMetricsQueryRange = async (
 	props: QueryRangePayload,
+	signal: AbortSignal,
 ): Promise<SuccessResponse<MetricRangePayloadV3> | ErrorResponse> => {
 	try {
-		const response = await axios.post('/query_range', props);
+		const response = await axios.post('/query_range', props, { signal });
 
 		return {
 			statusCode: 200,

frontend/src/components/DraggableTableRow/tests/__snapshots__/DraggableTableRow.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`DraggableTableRow Snapshot test should render DraggableTableRow 1`] = `
 <DocumentFragment>
   <div
-    class="ant-table-wrapper css-dev-only-do-not-override-1i536d8"
+    class="ant-table-wrapper css-dev-only-do-not-override-2i2tap"
   >
     <div
-      class="ant-spin-nested-loading css-dev-only-do-not-override-1i536d8"
+      class="ant-spin-nested-loading css-dev-only-do-not-override-2i2tap"
     >
       <div
         class="ant-spin-container"
@@ -28,7 +28,7 @@ exports[`DraggableTableRow Snapshot test should render DraggableTableRow 1`] = `
                   class="ant-table-thead"
                 >
                   <tr>
-                    <th
+                    <td
                       class="ant-table-cell"
                     />
                   </tr>
@@ -43,7 +43,7 @@ exports[`DraggableTableRow Snapshot test should render DraggableTableRow 1`] = `
                       class="ant-table-cell"
                     >
                       <div
-                        class="css-dev-only-do-not-override-1i536d8 ant-empty ant-empty-normal"
+                        class="css-dev-only-do-not-override-2i2tap ant-empty ant-empty-normal"
                       >
                         <div
                           class="ant-empty-image"

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

@@ -0,0 +1,11 @@
+.dropdown-button {
+    color: #fff;
+}
+
+.dropdown-button--dark {
+    color: #000;
+}
+
+.dropdown-icon {
+    font-size: 1.2rem;
+}

frontend/src/components/DropDown/DropDown.tsx

@@ -0,0 +1,30 @@
+import './DropDown.styles.scss';
+
+import { EllipsisOutlined } from '@ant-design/icons';
+import { Button, Dropdown, MenuProps } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
+	const items: MenuProps['items'] = element.map(
+		(e: JSX.Element, index: number) => ({
+			label: e,
+			key: index,
+		}),
+	);
+
+	return (
+		<Dropdown menu={{ items }}>
+			<Button
+				type="link"
+				className={!isDarkMode ? 'dropdown-button--dark' : 'dropdown-button'}
+				onClick={(e): void => e.preventDefault()}
+			>
+				<EllipsisOutlined className="dropdown-icon" />
+			</Button>
+		</Dropdown>
+	);
+}
+
+export default DropDown;

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -220,7 +220,11 @@ function ExplorerCard({
 								open={isOpen}
 								onOpenChange={handleOpenChange}
 							>
-								<Button type={saveButtonType} icon={saveButtonIcon}>
+								<Button
+									type={saveButtonType}
+									icon={saveButtonIcon}
+									data-testid="traces-save-view-action"
+								>
 									{isQueryUpdated
 										? SaveButtonText.SAVE_AS_NEW_VIEW
 										: SaveButtonText.SAVE_VIEW}

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -51,11 +51,10 @@ function SaveViewWithName({
 	return (
 		<Card>
 			<Typography>{t('name_of_the_view')}</Typography>
-			<Form form={form} onFinish={onSaveHandler}>
+			<Form form={form} onFinish={onSaveHandler} requiredMark>
 				<Form.Item
 					name={['viewName']}
 					required
-					requiredMark
 					rules={[
 						{
 							required: true,
@@ -65,7 +64,12 @@ function SaveViewWithName({
 				>
 					<Input placeholder="Enter Name" />
 				</Form.Item>
-				<SaveButton htmlType="submit" type="primary" loading={isLoading}>
+				<SaveButton
+					htmlType="submit"
+					type="primary"
+					loading={isLoading}
+					data-testid="save-view-name-action-button"
+				>
 					Save
 				</SaveButton>
 			</Form>

frontend/src/components/ExplorerCard/utils.ts

@@ -5,6 +5,7 @@ import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import isEqual from 'lodash-es/isEqual';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import {
 	DeleteViewHandlerProps,
@@ -35,24 +36,12 @@ export const getViewDetailsUsingViewKey: GetViewDetailsUsingViewKey = (
 	return undefined;
 };
 
-export const isQueryUpdatedInView = ({
-	viewKey,
-	data,
-	stagedQuery,
-	currentPanelType,
-}: IsQueryUpdatedInViewProps): boolean => {
-	const currentViewDetails = getViewDetailsUsingViewKey(viewKey, data);
-	if (!currentViewDetails) {
-		return false;
-	}
-	const { query, panelType } = currentViewDetails;
-
-	// Omitting id from aggregateAttribute and groupBy
-	const updatedCurrentQuery = {
-		...stagedQuery,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const omitIdFromQuery = (query: Query | null): any => ({
+	...query,
 	builder: {
-			...stagedQuery?.builder,
-			queryData: stagedQuery?.builder.queryData.map((queryData) => {
+		...query?.builder,
+		queryData: query?.builder.queryData.map((queryData) => {
 			const { id, ...rest } = queryData.aggregateAttribute;
 			const newAggregateAttribute = rest;
 			const newGroupByAttributes = queryData.groupBy.map((groupByAttribute) => {
@@ -84,7 +73,22 @@ export const isQueryUpdatedInView = ({
 			};
 		}),
 	},
-	};
+});
+
+export const isQueryUpdatedInView = ({
+	viewKey,
+	data,
+	stagedQuery,
+	currentPanelType,
+}: IsQueryUpdatedInViewProps): boolean => {
+	const currentViewDetails = getViewDetailsUsingViewKey(viewKey, data);
+	if (!currentViewDetails) {
+		return false;
+	}
+	const { query, panelType } = currentViewDetails;
+
+	// Omitting id from aggregateAttribute and groupBy
+	const updatedCurrentQuery = omitIdFromQuery(stagedQuery);
 
 	return (
 		panelType !== currentPanelType ||
@@ -153,7 +157,7 @@ export const deleteViewHandler = ({
 			if (viewId === viewKey) {
 				redirectWithQueryBuilderData(
 					updateAllQueriesOperators(
-						initialQueriesMap.traces,
+						initialQueriesMap[sourcePage],
 						panelType || PANEL_TYPES.LIST,
 						sourcePage,
 					),

frontend/src/components/Graph/types.ts

@@ -35,7 +35,7 @@ export type GraphOnClickHandler = (
 ) => void;
 
 export type ToggleGraphProps = {
-	toggleGraph(graphIndex: number, isVisible: boolean): void;
+	toggleGraph(graphIndex: number, isVisible: boolean, reference?: string): void;
 };
 
 export type CustomChartOptions = ChartOptions & {

frontend/src/components/Graph/yAxisConfig.ts

@@ -46,7 +46,7 @@ export const getYAxisFormattedValue = (
 	return `${parseFloat(value)}`;
 };
 
-export const getToolTipValue = (value: string, format: string): string => {
+export const getToolTipValue = (value: string, format?: string): string => {
 	try {
 		return formattedValueToString(
 			getValueFormat(format)(parseFloat(value), undefined, undefined, undefined),

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

@@ -7,7 +7,6 @@ import {
 } from '@ant-design/icons';
 import Convert from 'ansi-to-html';
 import { Button, Divider, Row, Typography } from 'antd';
-import LogDetail from 'components/LogDetail';
 import LogsExplorerContext from 'container/LogsExplorerContext';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
@@ -95,11 +94,15 @@ function LogSelectedField({
 type ListLogViewProps = {
 	logData: ILog;
 	selectedFields: IField[];
+	onSetActiveLog: (log: ILog) => void;
+	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 };
 
 function ListLogView({
 	logData,
 	selectedFields,
+	onSetActiveLog,
+	onAddToQuery,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -113,12 +116,6 @@ function ListLogView({
 		onSetActiveLog: handleSetActiveContextLog,
 		onClearActiveLog: handleClearActiveContextLog,
 	} = useActiveLog();
-	const {
-		activeLog,
-		onSetActiveLog,
-		onClearActiveLog,
-		onAddToQuery,
-	} = useActiveLog();
 
 	const handleDetailedView = useCallback(() => {
 		onSetActiveLog(logData);
@@ -223,12 +220,6 @@ function ListLogView({
 						onClose={handleClearActiveContextLog}
 					/>
 				)}
-				<LogDetail
-					log={activeLog}
-					onClose={onClearActiveLog}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-				/>
 			</Row>
 		</Container>
 	);

frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss

@@ -1,6 +1,8 @@
 .code-snippet-container {
 	position: relative;
-	background-color: rgb(43, 43, 43);
+	// background-color: rgb(43, 43, 43);
+	background-color: #111a2c;
+	border-color: #111a2c;
 }
 
 .code-copy-btn {

frontend/src/components/MessageTip/__snapshots__/MessageTip.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`MessageTip custom action 1`] = `
 }
 
 <div
-  class="ant-alert ant-alert-info ant-alert-with-description c0 css-dev-only-do-not-override-1i536d8"
+  class="ant-alert ant-alert-info ant-alert-with-description c0 css-dev-only-do-not-override-2i2tap"
   data-show="true"
   role="alert"
 >

frontend/src/components/ResizeTable/DynamicColumnTable.syles.scss

@@ -0,0 +1,25 @@
+.DynamicColumnTable {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .dynamicColumnTable-button {
+        align-self: flex-end;
+        margin: 10px 0;
+    }
+}
+
+.dynamicColumnsTable-items {
+    display: flex;
+    width: 10.625rem;
+    justify-content: space-between;
+    align-items: center;
+}
+
+@media (max-width: 768px) {
+    .dynamicColumnsTable-items {
+        flex-direction: column;
+        width: auto;
+        text-align: center;
+    }
+}

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import './DynamicColumnTable.syles.scss';
+
+import { SettingOutlined } from '@ant-design/icons';
+import { Button, Dropdown, MenuProps, Switch } from 'antd';
+import { ColumnsType } from 'antd/lib/table';
+import { memo, useEffect, useState } from 'react';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import ResizeTable from './ResizeTable';
+import { DynamicColumnTableProps } from './types';
+import {
+	getNewColumnData,
+	getVisibleColumns,
+	setVisibleColumns,
+} from './utils';
+
+function DynamicColumnTable({
+	tablesource,
+	columns,
+	dynamicColumns,
+	onDragColumn,
+	...restProps
+}: DynamicColumnTableProps): JSX.Element {
+	const [columnsData, setColumnsData] = useState<ColumnsType | undefined>(
+		columns,
+	);
+
+	useEffect(() => {
+		setColumnsData(columns);
+		const visibleColumns = getVisibleColumns({
+			tablesource,
+			columnsData: columns,
+			dynamicColumns,
+		});
+		setColumnsData((prevColumns) =>
+			prevColumns
+				? [
+						...prevColumns.slice(0, prevColumns.length - 1),
+						...visibleColumns,
+						prevColumns[prevColumns.length - 1],
+				  ]
+				: undefined,
+		);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [columns]);
+
+	const onToggleHandler = (index: number) => (
+		checked: boolean,
+		event: React.MouseEvent<HTMLButtonElement>,
+	): void => {
+		event.stopPropagation();
+		setVisibleColumns({
+			tablesource,
+			dynamicColumns,
+			index,
+			checked,
+		});
+		setColumnsData((prevColumns) =>
+			getNewColumnData({
+				checked,
+				index,
+				prevColumns,
+				dynamicColumns,
+			}),
+		);
+	};
+
+	const items: MenuProps['items'] =
+		dynamicColumns?.map((column, index) => ({
+			label: (
+				<div className="dynamicColumnsTable-items">
+					<div>{column.title?.toString()}</div>
+					<Switch
+						checked={columnsData?.findIndex((c) => c.key === column.key) !== -1}
+						onChange={onToggleHandler(index)}
+					/>
+				</div>
+			),
+			key: index,
+			type: 'checkbox',
+		})) || [];
+
+	return (
+		<div className="DynamicColumnTable">
+			{dynamicColumns && (
+				<Dropdown
+					getPopupContainer={popupContainer}
+					menu={{ items }}
+					trigger={['click']}
+				>
+					<Button
+						className="dynamicColumnTable-button"
+						size="middle"
+						icon={<SettingOutlined />}
+					/>
+				</Dropdown>
+			)}
+
+			<ResizeTable
+				columns={columnsData}
+				onDragColumn={onDragColumn}
+				{...restProps}
+			/>
+		</div>
+	);
+}
+
+DynamicColumnTable.defaultProps = {
+	onDragColumn: undefined,
+};
+
+export default memo(DynamicColumnTable);

frontend/src/components/ResizeTable/TableComponent/DateComponent.tsx

@@ -0,0 +1,15 @@
+import { Typography } from 'antd';
+
+import Time from './Time';
+
+function DateComponent(
+	CreatedOrUpdateTime: string | number | Date,
+): JSX.Element {
+	if (CreatedOrUpdateTime === null) {
+		return <Typography> - </Typography>;
+	}
+
+	return <Time CreatedOrUpdateTime={CreatedOrUpdateTime} />;
+}
+
+export default DateComponent;

frontend/src/components/ResizeTable/TableComponent/Time.tsx

@@ -2,16 +2,15 @@ import { Typography } from 'antd';
 import convertDateToAmAndPm from 'lib/convertDateToAmAndPm';
 import getFormattedDate from 'lib/getFormatedDate';
 
-import { Data } from '..';
-
-function DateComponent(lastUpdatedTime: Data['lastUpdatedTime']): JSX.Element {
-	const time = new Date(lastUpdatedTime);
-
+function Time({ CreatedOrUpdateTime }: DateProps): JSX.Element {
+	const time = new Date(CreatedOrUpdateTime);
 	const date = getFormattedDate(time);
-
 	const timeString = `${date} ${convertDateToAmAndPm(time)}`;
-
 	return <Typography>{timeString}</Typography>;
 }
 
-export default DateComponent;
+type DateProps = {
+	CreatedOrUpdateTime: string | number | Date;
+};
+
+export default Time;

frontend/src/components/ResizeTable/contants.ts

@@ -0,0 +1,11 @@
+export const TableDataSource = {
+	Alert: 'alert',
+	Dashboard: 'dashboard',
+} as const;
+
+export const DynamicColumnsKey = {
+	CreatedAt: 'createdAt',
+	CreatedBy: 'createdBy',
+	UpdatedAt: 'updatedAt',
+	UpdatedBy: 'updatedBy',
+};

frontend/src/components/ResizeTable/types.ts

@@ -1,6 +1,43 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { TableProps } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import { ColumnGroupType, ColumnType } from 'antd/lib/table';
+
+import { TableDataSource } from './contants';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface ResizeTableProps extends TableProps<any> {
 	onDragColumn?: (fromIndex: number, toIndex: number) => void;
 }
+export interface DynamicColumnTableProps extends TableProps<any> {
+	tablesource: typeof TableDataSource[keyof typeof TableDataSource];
+	dynamicColumns: TableProps<any>['columns'];
+	onDragColumn?: (fromIndex: number, toIndex: number) => void;
+}
+
+export type GetVisibleColumnsFunction = (
+	props: GetVisibleColumnProps,
+) => (ColumnGroupType<any> | ColumnType<any>)[];
+
+export type GetVisibleColumnProps = {
+	tablesource: typeof TableDataSource[keyof typeof TableDataSource];
+	dynamicColumns?: ColumnsType<any>;
+	columnsData?: ColumnsType;
+};
+
+export type SetVisibleColumnsProps = {
+	checked: boolean;
+	index: number;
+	tablesource: typeof TableDataSource[keyof typeof TableDataSource];
+	dynamicColumns?: ColumnsType<any>;
+};
+
+type GetNewColumnDataProps = {
+	prevColumns?: ColumnsType;
+	checked: boolean;
+	dynamicColumns?: ColumnsType<any>;
+	index: number;
+};
+
+export type GetNewColumnDataFunction = (
+	props: GetNewColumnDataProps,
+) => ColumnsType | undefined;

frontend/src/components/ResizeTable/utils.ts

@@ -0,0 +1,77 @@
+import { DynamicColumnsKey } from './contants';
+import {
+	GetNewColumnDataFunction,
+	GetVisibleColumnsFunction,
+	SetVisibleColumnsProps,
+} from './types';
+
+export const getVisibleColumns: GetVisibleColumnsFunction = ({
+	tablesource,
+	dynamicColumns,
+	columnsData,
+}) => {
+	let columnVisibilityData: { [key: string]: boolean };
+	try {
+		const storedData = localStorage.getItem(tablesource);
+		if (typeof storedData === 'string' && dynamicColumns) {
+			columnVisibilityData = JSON.parse(storedData);
+			return dynamicColumns.filter((column) => {
+				if (column.key && !columnsData?.find((c) => c.key === column.key)) {
+					return columnVisibilityData[column.key];
+				}
+				return false;
+			});
+		}
+
+		const initialColumnVisibility: Record<string, boolean> = {};
+		Object.values(DynamicColumnsKey).forEach((key) => {
+			initialColumnVisibility[key] = false;
+		});
+
+		localStorage.setItem(tablesource, JSON.stringify(initialColumnVisibility));
+	} catch (error) {
+		console.error(error);
+	}
+	return [];
+};
+
+export const setVisibleColumns = ({
+	checked,
+	index,
+	tablesource,
+	dynamicColumns,
+}: SetVisibleColumnsProps): void => {
+	try {
+		const storedData = localStorage.getItem(tablesource);
+		if (typeof storedData === 'string' && dynamicColumns) {
+			const columnVisibilityData = JSON.parse(storedData);
+			const { key } = dynamicColumns[index];
+			if (key) {
+				columnVisibilityData[key] = checked;
+			}
+			localStorage.setItem(tablesource, JSON.stringify(columnVisibilityData));
+		}
+	} catch (error) {
+		console.error(error);
+	}
+};
+
+export const getNewColumnData: GetNewColumnDataFunction = ({
+	prevColumns,
+	checked,
+	dynamicColumns,
+	index,
+}) => {
+	if (checked && dynamicColumns) {
+		return prevColumns
+			? [
+					...prevColumns.slice(0, prevColumns.length - 1),
+					dynamicColumns[index],
+					prevColumns[prevColumns.length - 1],
+			  ]
+			: undefined;
+	}
+	return prevColumns && dynamicColumns
+		? prevColumns.filter((column) => dynamicColumns[index].title !== column.title)
+		: undefined;
+};

frontend/src/components/TableRenderer/LabelColumn.styles.scss

@@ -0,0 +1,10 @@
+.label-column {
+
+    display: flex;
+    flex-wrap: wrap;
+
+    .label-column--tag {
+        white-space: normal;
+        margin: 0.2rem 0.2rem;
+    }
+}

frontend/src/components/TableRenderer/LabelColumn.tsx

@@ -0,0 +1,54 @@
+import './LabelColumn.styles.scss';
+
+import { Popover, Tag } from 'antd';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { LabelColumnProps } from './TableRenderer.types';
+import TagWithToolTip from './TagWithToolTip';
+
+function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
+	const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels;
+	const remainingLabels = labels.length > 3 ? labels.slice(3) : [];
+
+	return (
+		<div className="label-column">
+			{newLabels.map(
+				(label: string): JSX.Element => (
+					<TagWithToolTip key={label} label={label} color={color} value={value} />
+				),
+			)}
+			{remainingLabels.length > 0 && (
+				<Popover
+					getPopupContainer={popupContainer}
+					placement="bottomRight"
+					showArrow={false}
+					content={
+						<div>
+							{labels.map(
+								(label: string): JSX.Element => (
+									<TagWithToolTip
+										key={label}
+										label={label}
+										color={color}
+										value={value}
+									/>
+								),
+							)}
+						</div>
+					}
+					trigger="hover"
+				>
+					<Tag className="label-column--tag" color={color}>
+						+{remainingLabels.length}
+					</Tag>
+				</Popover>
+			)}
+		</div>
+	);
+}
+
+LabelColumn.defaultProps = {
+	value: {},
+};
+
+export default LabelColumn;

frontend/src/components/TableRenderer/TableRenderer.types.ts

@@ -0,0 +1,5 @@
+export type LabelColumnProps = {
+	labels: string[];
+	color?: string;
+	value?: { [key: string]: string };
+};

frontend/src/components/TableRenderer/TagWithToolTip.tsx

@@ -0,0 +1,36 @@
+import { Tag, Tooltip } from 'antd';
+
+import { getLabelRenderingValue } from './utils';
+
+function TagWithToolTip({
+	label,
+	value,
+	color,
+}: TagWithToolTipProps): JSX.Element {
+	const tooltipTitle =
+		value && value[label] ? `${label}: ${value[label]}` : label;
+	return (
+		<div key={label}>
+			<Tooltip title={tooltipTitle}>
+				<Tag className="label-column--tag" color={color}>
+					{getLabelRenderingValue(label, value && value[label])}
+				</Tag>
+			</Tooltip>
+		</div>
+	);
+}
+
+type TagWithToolTipProps = {
+	label: string;
+	color?: string;
+	value?: {
+		[key: string]: string;
+	};
+};
+
+TagWithToolTip.defaultProps = {
+	value: undefined,
+	color: undefined,
+};
+
+export default TagWithToolTip;

frontend/src/components/TableRenderer/utils.ts

@@ -16,6 +16,28 @@ export const generatorResizeTableColumns = <T>({
 		};
 	});
 
+export const getLabelRenderingValue = (
+	label: string,
+	value?: string,
+): string => {
+	const maxLength = 20;
+
+	if (label.length > maxLength) {
+		return `${label.slice(0, maxLength)}...`;
+	}
+
+	if (value) {
+		const remainingSpace = maxLength - label.length;
+		let newValue = value;
+		if (value.length > remainingSpace) {
+			newValue = `${value.slice(0, remainingSpace)}...`;
+		}
+		return `${label}: ${newValue}`;
+	}
+
+	return label;
+};
+
 interface GeneratorResizeTableColumnsProp<T> {
 	baseColumnOptions: ColumnsType<T>;
 	dynamicColumnOption: { key: string; columnOption: ColumnType<T> }[];

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,3 +1,4 @@
+import { DownOutlined } from '@ant-design/icons';
 import { Button, Dropdown } from 'antd';
 import TimeItems, {
 	timePreferance,
@@ -33,7 +34,9 @@ function TimePreference({
 	return (
 		<TextContainer noButtonMargin>
 			<Dropdown menu={menu}>
-				<Button>{selectedTime.name}</Button>
+				<Button>
+					{selectedTime.name} <DownOutlined />
+				</Button>
 			</Dropdown>
 		</TextContainer>
 	);