Merge pull request #1406 from SigNoz/release/v0.10.0

Release/v0.10.0

.github/workflows/dependency-review.yml

+# Dependency Review Action
+#
+# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+#
+# Source repository: https://github.com/actions/dependency-review-action
+# Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
+name: 'Dependency Review'
+on: [pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v3
+      - name: 'Dependency Review'
+        with:
+          fail-on-severity: high
+        uses: actions/dependency-review-action@v2

Makefile

@@ -82,15 +82,9 @@ dev-setup:
 run-x86:
 	@docker-compose -f $(STANDALONE_DIRECTORY)/docker-compose.yaml up -d
 
-run-arm:
-	@docker-compose -f $(STANDALONE_DIRECTORY)/docker-compose.arm.yaml up -d
-
 down-x86:
 	@docker-compose -f $(STANDALONE_DIRECTORY)/docker-compose.yaml down -v
 
-down-arm:
-	@docker-compose -f $(STANDALONE_DIRECTORY)/docker-compose.arm.yaml down -v
-
 clear-standalone-data:
 	@docker run --rm -v "$(PWD)/$(STANDALONE_DIRECTORY)/data:/pwd" busybox \
 	sh -c "cd /pwd && rm -rf alertmanager/* clickhouse/* signoz/*"

deploy/docker-swarm/clickhouse-setup/clickhouse-config.xml

@@ -22,7 +22,7 @@
 
             [1]: https://github.com/pocoproject/poco/blob/poco-1.9.4-release/Foundation/include/Poco/Logger.h#L105-L114
         -->
-        <level>trace</level>
+        <level>information</level>
         <log>/var/log/clickhouse-server/clickhouse-server.log</log>
         <errorlog>/var/log/clickhouse-server/clickhouse-server.err.log</errorlog>
         <!-- Rotation policy

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

@@ -40,7 +40,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.9.2
+    image: signoz/query-service:0.10.0
     command: ["-config=/root/config/prometheus.yml"]
     # ports:
     #   - "6060:6060"     # pprof port
@@ -68,7 +68,7 @@ services:
       - clickhouse
 
   frontend:
-    image: signoz/frontend:0.9.2
+    image: signoz/frontend:0.10.0
     deploy:
       restart_policy:
         condition: on-failure
@@ -81,20 +81,24 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/otelcontribcol:0.45.1-1.0
+    image: signoz/otelcontribcol:0.45.1-1.1
     command: ["--config=/etc/otel-collector-config.yaml"]
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
     ports:
+      # - "1777:1777"     # pprof extension
       - "4317:4317"     # OTLP gRPC receiver
       - "4318:4318"     # OTLP HTTP receiver
-      # - "8889:8889"     # Prometheus metrics exposed by the agent
-      # - "13133:13133"   # health_check
-      # - "14268:14268"   # Jaeger receiver
+      # - "8888:8888"     # OtelCollector internal metrics
+      # - "8889:8889"     # signoz spanmetrics exposed by the agent
+      # - "9411:9411"     # Zipkin port
+      # - "13133:13133"   # Health check extension
+      # - "14250:14250"   # Jaeger gRPC
+      # - "14268:14268"   # Jaeger thrift HTTP
       # - "55678:55678"   # OpenCensus receiver
-      # - "55679:55679"   # zpages extension
-      # - "55680:55680"   # OTLP gRPC legacy receiver
-      # - "55681:55681"   # OTLP HTTP legacy receiver
+      # - "55679:55679"   # zPages extension
+    environment:
+      - OTEL_RESOURCE_ATTRIBUTES=host.name={{.Node.Hostname}},os.type={{.Node.Platform.OS}},dockerswarm.service.name={{.Service.Name}},dockerswarm.task.name={{.Task.Name}}
     deploy:
       mode: replicated
       replicas: 3
@@ -107,10 +111,15 @@ services:
       - clickhouse
 
   otel-collector-metrics:
-    image: signoz/otelcontribcol:0.45.1-1.0
+    image: signoz/otelcontribcol:0.45.1-1.1
     command: ["--config=/etc/otel-collector-metrics-config.yaml"]
     volumes:
       - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml
+    # ports:
+    #   - "1777:1777"     # pprof extension
+    #   - "8888:8888"     # OtelCollector internal metrics
+    #   - "13133:13133"   # Health check extension
+    #   - "55679:55679"   # zPages extension
     deploy:
       restart_policy:
         condition: on-failure

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

 receivers:
+  opencensus:
+    endpoint: 0.0.0.0:55678
   otlp/spanmetrics:
     protocols:
       grpc:
-        endpoint: "localhost:12345"
+        endpoint: localhost:12345
   otlp:
     protocols:
       grpc:
+        endpoint: 0.0.0.0:4317
       http:
+        endpoint: 0.0.0.0:4318
   jaeger:
     protocols:
       grpc:
+        endpoint: 0.0.0.0:14250
       thrift_http:
+        endpoint: 0.0.0.0:14268
+      # thrift_compact:
+      #   endpoint: 0.0.0.0:6831
+      # thrift_binary:
+      #   endpoint: 0.0.0.0:6832
   hostmetrics:
     collection_interval: 60s
     scrapers:
-      cpu:
-      load:
-      memory:
-      disk:
-      filesystem:
-      network:
+      cpu: {}
+      load: {}
+      memory: {}
+      disk: {}
+      filesystem: {}
+      network: {}
+
 processors:
   batch:
     send_batch_size: 10000
     send_batch_max_size: 11000
     timeout: 10s
+  resourcedetection:
+    # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+    detectors: [env, system] # include ec2 for AWS, gce for GCP and azure for Azure.
+    timeout: 2s
+    override: false
   signozspanmetrics/prometheus:
     metrics_exporter: prometheus
     latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
@@ -49,9 +65,7 @@ processors:
   #   num_workers: 4
   #   queue_size: 100
   #   retry_on_failure: true
-extensions:
-  health_check: {}
-  zpages: {}
+
 exporters:
   clickhousetraces:
     datasource: tcp://clickhouse:9000/?database=signoz_traces
@@ -60,18 +74,35 @@ exporters:
     resource_to_telemetry_conversion:
       enabled: true
   prometheus:
-    endpoint: "0.0.0.0:8889"
+    endpoint: 0.0.0.0:8889
+  # logging: {}
+
+extensions:
+  health_check:
+    endpoint: 0.0.0.0:13133
+  zpages:
+    endpoint: 0.0.0.0:55679
+  pprof:
+    endpoint: 0.0.0.0:1777
+
 service:
-  extensions: [health_check, zpages]
+  telemetry:
+    metrics:
+      address: 0.0.0.0:8888
+  extensions: [health_check, zpages, pprof]
   pipelines:
     traces:
       receivers: [jaeger, otlp]
       processors: [signozspanmetrics/prometheus, batch]
       exporters: [clickhousetraces]
     metrics:
-      receivers: [otlp, hostmetrics]
+      receivers: [otlp]
       processors: [batch]
       exporters: [clickhousemetricswrite]
+    metrics/hostmetrics:
+      receivers: [hostmetrics]
+      processors: [resourcedetection, batch]
+      exporters: [clickhousemetricswrite]
     metrics/spanmetrics:
       receivers: [otlp/spanmetrics]
-      exporters: [prometheus]
\ No newline at end of file
+      exporters: [prometheus]

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

 receivers:
-  otlp:
-    protocols:
-      grpc:
-      http:
-
-  # Data sources: metrics
   prometheus:
     config:
       scrape_configs:
+        # otel-collector internal metrics
         - job_name: "otel-collector"
           scrape_interval: 60s
           static_configs:
-            - targets: ["otel-collector:8889"]
+            - targets:
+              - otel-collector:8888
+        # otel-collector-metrics internal metrics
+        - job_name: "otel-collector-metrics"
+          scrape_interval: 60s
+          static_configs:
+            - targets:
+              - localhost:8888
+        # SigNoz span metrics
+        - job_name: "signozspanmetrics-collector"
+          scrape_interval: 60s
+          static_configs:
+            - targets:
+              - otel-collector:8889
+
 processors:
   batch:
     send_batch_size: 10000
@@ -32,17 +41,26 @@ processors:
   #   num_workers: 4
   #   queue_size: 100
   #   retry_on_failure: true
-extensions:
-  health_check: {}
-  zpages: {}
+
 exporters:
   clickhousemetricswrite:
     endpoint: tcp://clickhouse:9000/?database=signoz_metrics
 
+extensions:
+  health_check:
+    endpoint: 0.0.0.0:13133
+  zpages:
+    endpoint: 0.0.0.0:55679
+  pprof:
+    endpoint: 0.0.0.0:1777
+
 service:
-  extensions: [health_check, zpages]
+  telemetry:
+    metrics:
+      address: 0.0.0.0:8888
+  extensions: [health_check, zpages, pprof]
   pipelines:
     metrics:
-      receivers: [otlp, prometheus]
+      receivers: [prometheus]
       processors: [batch]
-      exporters: [clickhousemetricswrite]
\ No newline at end of file
+      exporters: [clickhousemetricswrite]

deploy/docker/clickhouse-setup/clickhouse-config.xml

@@ -22,7 +22,7 @@
 
             [1]: https://github.com/pocoproject/poco/blob/poco-1.9.4-release/Foundation/include/Poco/Logger.h#L105-L114
         -->
-        <level>trace</level>
+        <level>information</level>
         <log>/var/log/clickhouse-server/clickhouse-server.log</log>
         <errorlog>/var/log/clickhouse-server/clickhouse-server.err.log</errorlog>
         <!-- Rotation policy

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

@@ -39,7 +39,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:0.9.2
+    image: signoz/query-service:0.10.0
     container_name: query-service
     command: ["-config=/root/config/prometheus.yml"]
     # ports:
@@ -66,7 +66,7 @@ services:
         condition: service_healthy
 
   frontend:
-    image: signoz/frontend:0.9.2
+    image: signoz/frontend:0.10.0
     container_name: frontend
     restart: on-failure
     depends_on:
@@ -78,20 +78,24 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/otelcontribcol:0.45.1-1.0
+    image: signoz/otelcontribcol:0.45.1-1.1
     command: ["--config=/etc/otel-collector-config.yaml"]
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
+    environment:
+      - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
     ports:
+      # - "1777:1777"     # pprof extension
       - "4317:4317"     # OTLP gRPC receiver
       - "4318:4318"     # OTLP HTTP receiver
-      # - "8889:8889"     # Prometheus metrics exposed by the agent
-      # - "13133:13133"   # health_check
-      # - "14268:14268"   # Jaeger receiver
+      # - "8888:8888"     # OtelCollector internal metrics
+      # - "8889:8889"     # signoz spanmetrics exposed by the agent
+      # - "9411:9411"     # Zipkin port
+      # - "13133:13133"   # health check extension
+      # - "14250:14250"   # Jaeger gRPC
+      # - "14268:14268"   # Jaeger thrift HTTP
       # - "55678:55678"   # OpenCensus receiver
-      # - "55679:55679"   # zpages extension
-      # - "55680:55680"   # OTLP gRPC legacy receiver
-      # - "55681:55681"   # OTLP HTTP legacy receiver
+      # - "55679:55679"   # zPages extension
     mem_limit: 2000m
     restart: on-failure
     depends_on:
@@ -99,10 +103,15 @@ services:
         condition: service_healthy
 
   otel-collector-metrics:
-    image: signoz/otelcontribcol:0.45.1-1.0
+    image: signoz/otelcontribcol:0.45.1-1.1
     command: ["--config=/etc/otel-collector-metrics-config.yaml"]
     volumes:
       - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml
+    # ports:
+    #   - "1777:1777"     # pprof extension
+    #   - "8888:8888"     # OtelCollector internal metrics
+    #   - "13133:13133"   # Health check extension
+    #   - "55679:55679"   # zPages extension
     restart: on-failure
     depends_on:
       clickhouse:

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

 receivers:
+  opencensus:
+    endpoint: 0.0.0.0:55678
   otlp/spanmetrics:
     protocols:
       grpc:
-        endpoint: "localhost:12345"
+        endpoint: localhost:12345
   otlp:
     protocols:
       grpc:
+        endpoint: 0.0.0.0:4317
       http:
+        endpoint: 0.0.0.0:4318
   jaeger:
     protocols:
       grpc:
+        endpoint: 0.0.0.0:14250
       thrift_http:
+        endpoint: 0.0.0.0:14268
+      # thrift_compact:
+      #   endpoint: 0.0.0.0:6831
+      # thrift_binary:
+      #   endpoint: 0.0.0.0:6832
   hostmetrics:
     collection_interval: 60s
     scrapers:
-      cpu:
-      load:
-      memory:
-      disk:
-      filesystem:
-      network:
+      cpu: {}
+      load: {}
+      memory: {}
+      disk: {}
+      filesystem: {}
+      network: {}
+
 processors:
   batch:
     send_batch_size: 10000
@@ -49,9 +60,20 @@ processors:
   #   num_workers: 4
   #   queue_size: 100
   #   retry_on_failure: true
+  resourcedetection:
+    # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+    detectors: [env, system] # include ec2 for AWS, gce for GCP and azure for Azure.
+    timeout: 2s
+    override: false
+
 extensions:
-  health_check: {}
-  zpages: {}
+  health_check:
+    endpoint: 0.0.0.0:13133
+  zpages:
+    endpoint: 0.0.0.0:55679
+  pprof:
+    endpoint: 0.0.0.0:1777
+
 exporters:
   clickhousetraces:
     datasource: tcp://clickhouse:9000/?database=signoz_traces
@@ -60,18 +82,30 @@ exporters:
     resource_to_telemetry_conversion:
       enabled: true
   prometheus:
-    endpoint: "0.0.0.0:8889"
+    endpoint: 0.0.0.0:8889
+  # logging: {}
+
 service:
-  extensions: [health_check, zpages]
+  telemetry:
+    metrics:
+      address: 0.0.0.0:8888
+  extensions:
+    - health_check
+    - zpages
+    - pprof
   pipelines:
     traces:
       receivers: [jaeger, otlp]
       processors: [signozspanmetrics/prometheus, batch]
       exporters: [clickhousetraces]
     metrics:
-      receivers: [otlp, hostmetrics]
+      receivers: [otlp]
       processors: [batch]
       exporters: [clickhousemetricswrite]
+    metrics/hostmetrics:
+      receivers: [hostmetrics]
+      processors: [resourcedetection, batch]
+      exporters: [clickhousemetricswrite]
     metrics/spanmetrics:
       receivers: [otlp/spanmetrics]
       exporters: [prometheus]

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

@@ -3,15 +3,28 @@ receivers:
     protocols:
       grpc:
       http:
-
-  # Data sources: metrics
   prometheus:
     config:
       scrape_configs:
+        # otel-collector internal metrics
         - job_name: "otel-collector"
           scrape_interval: 60s
           static_configs:
-            - targets: ["otel-collector:8889"]
+            - targets:
+              - otel-collector:8888
+        # otel-collector-metrics internal metrics
+        - job_name: "otel-collector-metrics"
+          scrape_interval: 60s
+          static_configs:
+            - targets:
+              - localhost:8888
+        # SigNoz span metrics
+        - job_name: "signozspanmetrics-collector"
+          scrape_interval: 60s
+          static_configs:
+            - targets:
+              - otel-collector:8889
+
 processors:
   batch:
     send_batch_size: 10000
@@ -32,17 +45,29 @@ processors:
   #   num_workers: 4
   #   queue_size: 100
   #   retry_on_failure: true
+
 extensions:
-  health_check: {}
-  zpages: {}
+  health_check:
+    endpoint: 0.0.0.0:13133
+  zpages:
+    endpoint: 0.0.0.0:55679
+  pprof:
+    endpoint: 0.0.0.0:1777
+
 exporters:
   clickhousemetricswrite:
     endpoint: tcp://clickhouse:9000/?database=signoz_metrics
 
 service:
-  extensions: [health_check, zpages]
+  telemetry:
+    metrics:
+      address: 0.0.0.0:8888
+  extensions:
+    - health_check
+    - zpages
+    - pprof
   pipelines:
     metrics:
-      receivers: [otlp, prometheus]
+      receivers: [prometheus]
       processors: [batch]
       exporters: [clickhousemetricswrite]

deploy/docker/clickhouse-setup/users.xml

-<?xml version="1.0"?>
-<clickhouse>
-    <!-- See also the files in users.d directory where the settings can be overridden. -->
-
-    <!-- Profiles of settings. -->
-    <profiles>
-        <!-- Default settings. -->
-        <default>
-            <!-- Maximum memory usage for processing single query, in bytes. -->
-            <max_memory_usage>10000000000</max_memory_usage>
-
-            <!-- How to choose between replicas during distributed query processing.
-                 random - choose random replica from set of replicas with minimum number of errors
-                 nearest_hostname - from set of replicas with minimum number of errors, choose replica
-                  with minimum number of different symbols between replica's hostname and local hostname
-                  (Hamming distance).
-                 in_order - first live replica is chosen in specified order.
-                 first_or_random - if first replica one has higher number of errors, pick a random one from replicas with minimum number of errors.
-            -->
-            <load_balancing>random</load_balancing>
-        </default>
-
-        <!-- Profile that allows only read queries. -->
-        <readonly>
-            <readonly>1</readonly>
-        </readonly>
-    </profiles>
-
-    <!-- Users and ACL. -->
-    <users>
-        <!-- If user name was not specified, 'default' user is used. -->
-        <default>
-            <!-- See also the files in users.d directory where the password can be overridden.
-
-                 Password could be specified in plaintext or in SHA256 (in hex format).
-
-                 If you want to specify password in plaintext (not recommended), place it in 'password' element.
-                 Example: <password>qwerty</password>.
-                 Password could be empty.
-
-                 If you want to specify SHA256, place it in 'password_sha256_hex' element.
-                 Example: <password_sha256_hex>65e84be33532fb784c48129675f9eff3a682b27168c0ea744b2cf58ee02337c5</password_sha256_hex>
-                 Restrictions of SHA256: impossibility to connect to ClickHouse using MySQL JS client (as of July 2019).
-
-                 If you want to specify double SHA1, place it in 'password_double_sha1_hex' element.
-                 Example: <password_double_sha1_hex>e395796d6546b1b65db9d665cd43f0e858dd4303</password_double_sha1_hex>
-
-                 If you want to specify a previously defined LDAP server (see 'ldap_servers' in the main config) for authentication,
-                  place its name in 'server' element inside 'ldap' element.
-                 Example: <ldap><server>my_ldap_server</server></ldap>
-
-                 If you want to authenticate the user via Kerberos (assuming Kerberos is enabled, see 'kerberos' in the main config),
-                  place 'kerberos' element instead of 'password' (and similar) elements.
-                 The name part of the canonical principal name of the initiator must match the user name for authentication to succeed.
-                 You can also place 'realm' element inside 'kerberos' element to further restrict authentication to only those requests
-                  whose initiator's realm matches it.
-                 Example: <kerberos />
-                 Example: <kerberos><realm>EXAMPLE.COM</realm></kerberos>
-
-                 How to generate decent password:
-                 Execute: PASSWORD=$(base64 < /dev/urandom | head -c8); echo "$PASSWORD"; echo -n "$PASSWORD" | sha256sum | tr -d '-'
-                 In first line will be password and in second - corresponding SHA256.
-
-                 How to generate double SHA1:
-                 Execute: PASSWORD=$(base64 < /dev/urandom | head -c8); echo "$PASSWORD"; echo -n "$PASSWORD" | sha1sum | tr -d '-' | xxd -r -p | sha1sum | tr -d '-'
-                 In first line will be password and in second - corresponding double SHA1.
-            -->
-            <password></password>
-
-            <!-- List of networks with open access.
-
-                 To open access from everywhere, specify:
-                    <ip>::/0</ip>
-
-                 To open access only from localhost, specify:
-                    <ip>::1</ip>
-                    <ip>127.0.0.1</ip>
-
-                 Each element of list has one of the following forms:
-                 <ip> IP-address or network mask. Examples: 213.180.204.3 or 10.0.0.1/8 or 10.0.0.1/255.255.255.0
-                     2a02:6b8::3 or 2a02:6b8::3/64 or 2a02:6b8::3/ffff:ffff:ffff:ffff::.
-                 <host> Hostname. Example: server01.clickhouse.com.
-                     To check access, DNS query is performed, and all received addresses compared to peer address.
-                 <host_regexp> Regular expression for host names. Example, ^server\d\d-\d\d-\d\.clickhouse\.com$
-                     To check access, DNS PTR query is performed for peer address and then regexp is applied.
-                     Then, for result of PTR query, another DNS query is performed and all received addresses compared to peer address.
-                     Strongly recommended that regexp is ends with $
-                 All results of DNS requests are cached till server restart.
-            -->
-            <networks>
-                <ip>::/0</ip>
-            </networks>
-
-            <!-- Settings profile for user. -->
-            <profile>default</profile>
-
-            <!-- Quota for user. -->
-            <quota>default</quota>
-
-            <!-- User can create other users and grant rights to them. -->
-            <!-- <access_management>1</access_management> -->
-        </default>
-    </users>
-
-    <!-- Quotas. -->
-    <quotas>
-        <!-- Name of quota. -->
-        <default>
-            <!-- Limits for time interval. You could specify many intervals with different limits. -->
-            <interval>
-                <!-- Length of interval. -->
-                <duration>3600</duration>
-
-                <!-- No limits. Just calculate resource usage for time interval. -->
-                <queries>0</queries>
-                <errors>0</errors>
-                <result_rows>0</result_rows>
-                <read_rows>0</read_rows>
-                <execution_time>0</execution_time>
-            </interval>
-        </default>
-    </quotas>
-</clickhouse>

frontend/package.json

@@ -13,8 +13,9 @@
 		"jest:coverage": "jest --coverage",
 		"jest:watch": "jest --watch",
 		"postinstall": "is-ci || yarn husky:configure",
-		"playwright": "playwright test --config=./playwright.config.ts",
+		"playwright": "NODE_ENV=testing playwright test --config=./playwright.config.ts",
 		"playwright:local:debug": "PWDEBUG=console yarn playwright --headed --browser=chromium",
+		"playwright:codegen:local":"playwright codegen http://localhost:3301",
 		"husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
 		"commitlint": "commitlint --edit $1"
 	},
@@ -43,6 +44,7 @@
 		"babel-preset-react-app": "^10.0.0",
 		"chart.js": "^3.4.0",
 		"chartjs-adapter-date-fns": "^2.0.0",
+		"chartjs-plugin-annotation": "^1.4.0",
 		"color": "^4.2.1",
 		"cross-env": "^7.0.3",
 		"css-loader": "4.3.0",
@@ -81,6 +83,7 @@
 		"style-loader": "1.3.0",
 		"styled-components": "^5.2.1",
 		"terser-webpack-plugin": "^5.2.5",
+		"timestamp-nano": "^1.0.0",
 		"ts-node": "^10.2.1",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"typescript": "^4.0.5",

frontend/playwright.config.ts

@@ -16,6 +16,8 @@ const config: PlaywrightTestConfig = {
 	updateSnapshots: 'all',
 	fullyParallel: false,
 	quiet: true,
+	testMatch: ['**/*.spec.ts'],
+	reporter: process.env.CI ? 'github' : 'list',
 };
 
 export default config;

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

+{
+  "preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
+  "preview_chart_threshold_label": "Threshold",
+  "placeholder_label_key_pair": "Click here to enter a label (key value pairs)",
+  "button_yes": "Yes",
+  "button_no": "No",
+  "remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
+  "remove_label_success": "Labels cleared",
+  "alert_form_step1": "Step 1 - Define the metric",
+  "alert_form_step2": "Step 2 - Define Alert Conditions",
+  "alert_form_step3": "Step 3 - Alert Configuration",
+  "metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
+  "confirm_save_title": "Save Changes",
+  "confirm_save_content_part1": "Your alert built with",
+  "confirm_save_content_part2": "query will be saved. Press OK to confirm.",
+  "unexpected_error": "Sorry, an unexpected error occurred. Please contact your admin",
+  "rule_created": "Rule created successfully",
+  "rule_edited": "Rule edited successfully",
+  "expression_missing": "expression is missing in {{where}}",
+  "metricname_missing": "metric name is missing in {{where}}",
+  "condition_required": "at least one metric condition is required",
+  "alertname_required": "alert name is required",
+  "promql_required": "promql expression is required when query format is set to PromQL",
+  "button_savechanges": "Save Rule",
+  "button_createrule": "Create Rule",
+  "button_returntorules": "Return to rules",
+  "button_cancelchanges": "Cancel",
+  "button_discard": "Discard",
+  "text_condition1": "Send a notification when the metric is",
+  "text_condition2": "the threshold",
+  "text_condition3": "during the last",
+  "option_5min": "5 mins",
+  "option_10min": "10 mins",
+  "option_15min": "15 mins",
+  "option_60min": "60 mins",
+  "option_4hours": "4 hours",
+  "option_24hours": "24 hours",
+  "field_threshold": "Alert Threshold",
+  "option_allthetimes": "all the times",
+  "option_atleastonce": "at least once",
+  "option_onaverage": "on average",
+  "option_intotal": "in total",
+  "option_above": "above",
+  "option_below": "below",
+  "option_equal": "is equal to",
+  "option_notequal": "not equal to",
+  "button_query": "Query",
+  "button_formula": "Formula",
+  "tab_qb": "Query Builder",
+  "tab_promql": "PromQL",
+  "title_confirm": "Confirm",
+  "button_ok": "Yes",
+  "button_cancel": "No",
+  "field_promql_expr": "PromQL Expression",
+  "field_alert_name": "Alert Name",
+  "field_alert_desc": "Alert Description",
+  "field_labels": "Labels",
+  "field_severity": "Severity",
+  "option_critical": "Critical",
+  "option_error": "Error",
+  "option_warning": "Warning",
+  "option_info": "Info",
+  "user_guide_headline": "Steps to create an Alert",
+  "user_guide_qb_step1": "Step 1 - Define the metric",
+  "user_guide_qb_step1a": "Choose a metric which you want to create an alert on",
+  "user_guide_qb_step1b": "Filter it based on WHERE field or GROUPBY if needed",
+  "user_guide_qb_step1c": "Apply an aggregatiion function like COUNT, SUM, etc. or choose NOOP to plot the raw metric",
+  "user_guide_qb_step1d": "Create a formula based on Queries if needed",
+  "user_guide_qb_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_qb_step2a": "Select the evaluation interval, threshold type and whether you want to alert above/below a value",
+  "user_guide_qb_step2b": "Enter the Alert threshold",
+  "user_guide_qb_step3": "Step 3 -Alert Configuration",
+  "user_guide_qb_step3a": "Set alert severity, name and descriptions",
+  "user_guide_qb_step3b": "Add tags to the alert in the Label field if needed",
+  "user_guide_pql_step1": "Step 1 - Define the metric",
+  "user_guide_pql_step1a": "Write a PromQL query for the metric",
+  "user_guide_pql_step1b": "Format the legends based on labels you want to highlight",
+  "user_guide_pql_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_pql_step2a": "Select the threshold type and whether you want to alert above/below a value",
+  "user_guide_pql_step2b": "Enter the Alert threshold",
+  "user_guide_pql_step3": "Step 3 -Alert Configuration",
+  "user_guide_pql_step3a": "Set alert severity, name and descriptions",
+  "user_guide_pql_step3b": "Add tags to the alert in the Label field if needed",
+  "user_tooltip_more_help": "More details on how to create alerts"
+}
\ No newline at end of file

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

+{
+  "preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
+  "preview_chart_threshold_label": "Threshold",
+  "placeholder_label_key_pair": "Click here to enter a label (key value pairs)",
+  "button_yes": "Yes",
+  "button_no": "No",
+  "remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
+  "remove_label_success": "Labels cleared",
+  "alert_form_step1": "Step 1 - Define the metric",
+  "alert_form_step2": "Step 2 - Define Alert Conditions",
+  "alert_form_step3": "Step 3 - Alert Configuration",
+  "metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
+  "confirm_save_title": "Save Changes",
+  "confirm_save_content_part1": "Your alert built with",
+  "confirm_save_content_part2": "query will be saved. Press OK to confirm.",
+  "unexpected_error": "Sorry, an unexpected error occurred. Please contact your admin",
+  "rule_created": "Rule created successfully",
+  "rule_edited": "Rule edited successfully",
+  "expression_missing": "expression is missing in {{where}}",
+  "metricname_missing": "metric name is missing in {{where}}",
+  "condition_required": "at least one metric condition is required",
+  "alertname_required": "alert name is required",
+  "promql_required": "promql expression is required when query format is set to PromQL",
+  "button_savechanges": "Save Rule",
+  "button_createrule": "Create Rule",
+  "button_returntorules": "Return to rules",
+  "button_cancelchanges": "Cancel",
+  "button_discard": "Discard",
+  "text_condition1": "Send a notification when the metric is",
+  "text_condition2": "the threshold",
+  "text_condition3": "during the last",
+  "option_5min": "5 mins",
+  "option_10min": "10 mins",
+  "option_15min": "15 mins",
+  "option_60min": "60 mins",
+  "option_4hours": "4 hours",
+  "option_24hours": "24 hours",
+  "field_threshold": "Alert Threshold",
+  "option_allthetimes": "all the times",
+  "option_atleastonce": "at least once",
+  "option_onaverage": "on average",
+  "option_intotal": "in total",
+  "option_above": "above",
+  "option_below": "below",
+  "option_equal": "is equal to",
+  "option_notequal": "not equal to",
+  "button_query": "Query",
+  "button_formula": "Formula",
+  "tab_qb": "Query Builder",
+  "tab_promql": "PromQL",
+  "title_confirm": "Confirm",
+  "button_ok": "Yes",
+  "button_cancel": "No",
+  "field_promql_expr": "PromQL Expression",
+  "field_alert_name": "Alert Name",
+  "field_alert_desc": "Alert Description",
+  "field_labels": "Labels",
+  "field_severity": "Severity",
+  "option_critical": "Critical",
+  "option_error": "Error",
+  "option_warning": "Warning",
+  "option_info": "Info",
+  "user_guide_headline": "Steps to create an Alert",
+  "user_guide_qb_step1": "Step 1 - Define the metric",
+  "user_guide_qb_step1a": "Choose a metric which you want to create an alert on",
+  "user_guide_qb_step1b": "Filter it based on WHERE field or GROUPBY if needed",
+  "user_guide_qb_step1c": "Apply an aggregatiion function like COUNT, SUM, etc. or choose NOOP to plot the raw metric",
+  "user_guide_qb_step1d": "Create a formula based on Queries if needed",
+  "user_guide_qb_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_qb_step2a": "Select the evaluation interval, threshold type and whether you want to alert above/below a value",
+  "user_guide_qb_step2b": "Enter the Alert threshold",
+  "user_guide_qb_step3": "Step 3 -Alert Configuration",
+  "user_guide_qb_step3a": "Set alert severity, name and descriptions",
+  "user_guide_qb_step3b": "Add tags to the alert in the Label field if needed",
+  "user_guide_pql_step1": "Step 1 - Define the metric",
+  "user_guide_pql_step1a": "Write a PromQL query for the metric",
+  "user_guide_pql_step1b": "Format the legends based on labels you want to highlight",
+  "user_guide_pql_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_pql_step2a": "Select the threshold type and whether you want to alert above/below a value",
+  "user_guide_pql_step2b": "Enter the Alert threshold",
+  "user_guide_pql_step3": "Step 3 -Alert Configuration",
+  "user_guide_pql_step3a": "Set alert severity, name and descriptions",
+  "user_guide_pql_step3b": "Add tags to the alert in the Label field if needed",
+  "user_tooltip_more_help": "More details on how to create alerts"
+}
\ No newline at end of file

frontend/public/locales/en/alerts.json

+{
+  "preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
+  "preview_chart_threshold_label": "Threshold",
+  "placeholder_label_key_pair": "Click here to enter a label (key value pairs)",
+  "button_yes": "Yes",
+  "button_no": "No",
+  "remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
+  "remove_label_success": "Labels cleared",
+  "alert_form_step1": "Step 1 - Define the metric",
+  "alert_form_step2": "Step 2 - Define Alert Conditions",
+  "alert_form_step3": "Step 3 - Alert Configuration",
+  "metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
+  "confirm_save_title": "Save Changes",
+  "confirm_save_content_part1": "Your alert built with",
+  "confirm_save_content_part2": "query will be saved. Press OK to confirm.",
+  "unexpected_error": "Sorry, an unexpected error occurred. Please contact your admin",
+  "rule_created": "Rule created successfully",
+  "rule_edited": "Rule edited successfully",
+  "expression_missing": "expression is missing in {{where}}",
+  "metricname_missing": "metric name is missing in {{where}}",
+  "condition_required": "at least one metric condition is required",
+  "alertname_required": "alert name is required",
+  "promql_required": "promql expression is required when query format is set to PromQL",
+  "button_savechanges": "Save Rule",
+  "button_createrule": "Create Rule",
+  "button_returntorules": "Return to rules",
+  "button_cancelchanges": "Cancel",
+  "button_discard": "Discard",
+  "text_condition1": "Send a notification when the metric is",
+  "text_condition2": "the threshold",
+  "text_condition3": "during the last",
+  "option_5min": "5 mins",
+  "option_10min": "10 mins",
+  "option_15min": "15 mins",
+  "option_60min": "60 mins",
+  "option_4hours": "4 hours",
+  "option_24hours": "24 hours",
+  "field_threshold": "Alert Threshold",
+  "option_allthetimes": "all the times",
+  "option_atleastonce": "at least once",
+  "option_onaverage": "on average",
+  "option_intotal": "in total",
+  "option_above": "above",
+  "option_below": "below",
+  "option_equal": "is equal to",
+  "option_notequal": "not equal to",
+  "button_query": "Query",
+  "button_formula": "Formula",
+  "tab_qb": "Query Builder",
+  "tab_promql": "PromQL",
+  "title_confirm": "Confirm",
+  "button_ok": "Yes",
+  "button_cancel": "No",
+  "field_promql_expr": "PromQL Expression",
+  "field_alert_name": "Alert Name",
+  "field_alert_desc": "Alert Description",
+  "field_labels": "Labels",
+  "field_severity": "Severity",
+  "option_critical": "Critical",
+  "option_error": "Error",
+  "option_warning": "Warning",
+  "option_info": "Info",
+  "user_guide_headline": "Steps to create an Alert",
+  "user_guide_qb_step1": "Step 1 - Define the metric",
+  "user_guide_qb_step1a": "Choose a metric which you want to create an alert on",
+  "user_guide_qb_step1b": "Filter it based on WHERE field or GROUPBY if needed",
+  "user_guide_qb_step1c": "Apply an aggregatiion function like COUNT, SUM, etc. or choose NOOP to plot the raw metric",
+  "user_guide_qb_step1d": "Create a formula based on Queries if needed",
+  "user_guide_qb_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_qb_step2a": "Select the evaluation interval, threshold type and whether you want to alert above/below a value",
+  "user_guide_qb_step2b": "Enter the Alert threshold",
+  "user_guide_qb_step3": "Step 3 -Alert Configuration",
+  "user_guide_qb_step3a": "Set alert severity, name and descriptions",
+  "user_guide_qb_step3b": "Add tags to the alert in the Label field if needed",
+  "user_guide_pql_step1": "Step 1 - Define the metric",
+  "user_guide_pql_step1a": "Write a PromQL query for the metric",
+  "user_guide_pql_step1b": "Format the legends based on labels you want to highlight",
+  "user_guide_pql_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_pql_step2a": "Select the threshold type and whether you want to alert above/below a value",
+  "user_guide_pql_step2b": "Enter the Alert threshold",
+  "user_guide_pql_step3": "Step 3 -Alert Configuration",
+  "user_guide_pql_step3a": "Set alert severity, name and descriptions",
+  "user_guide_pql_step3b": "Add tags to the alert in the Label field if needed",
+  "user_tooltip_more_help": "More details on how to create alerts"
+}
\ No newline at end of file

frontend/public/locales/en/rules.json

+{
+  "preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
+  "preview_chart_threshold_label": "Threshold",
+  "placeholder_label_key_pair": "Click here to enter a label (key value pairs)",
+  "button_yes": "Yes",
+  "button_no": "No",
+  "remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
+  "remove_label_success": "Labels cleared",
+  "alert_form_step1": "Step 1 - Define the metric",
+  "alert_form_step2": "Step 2 - Define Alert Conditions",
+  "alert_form_step3": "Step 3 - Alert Configuration",
+  "metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
+  "confirm_save_title": "Save Changes",
+  "confirm_save_content_part1": "Your alert built with",
+  "confirm_save_content_part2": "query will be saved. Press OK to confirm.",
+  "unexpected_error": "Sorry, an unexpected error occurred. Please contact your admin",
+  "rule_created": "Rule created successfully",
+  "rule_edited": "Rule edited successfully",
+  "expression_missing": "expression is missing in {{where}}",
+  "metricname_missing": "metric name is missing in {{where}}",
+  "condition_required": "at least one metric condition is required",
+  "alertname_required": "alert name is required",
+  "promql_required": "promql expression is required when query format is set to PromQL",
+  "button_savechanges": "Save Rule",
+  "button_createrule": "Create Rule",
+  "button_returntorules": "Return to rules",
+  "button_cancelchanges": "Cancel",
+  "button_discard": "Discard",
+  "text_condition1": "Send a notification when the metric is",
+  "text_condition2": "the threshold",
+  "text_condition3": "during the last",
+  "option_5min": "5 mins",
+  "option_10min": "10 mins",
+  "option_15min": "15 mins",
+  "option_60min": "60 mins",
+  "option_4hours": "4 hours",
+  "option_24hours": "24 hours",
+  "field_threshold": "Alert Threshold",
+  "option_allthetimes": "all the times",
+  "option_atleastonce": "at least once",
+  "option_onaverage": "on average",
+  "option_intotal": "in total",
+  "option_above": "above",
+  "option_below": "below",
+  "option_equal": "is equal to",
+  "option_notequal": "not equal to",
+  "button_query": "Query",
+  "button_formula": "Formula",
+  "tab_qb": "Query Builder",
+  "tab_promql": "PromQL",
+  "title_confirm": "Confirm",
+  "button_ok": "Yes",
+  "button_cancel": "No",
+  "field_promql_expr": "PromQL Expression",
+  "field_alert_name": "Alert Name",
+  "field_alert_desc": "Alert Description",
+  "field_labels": "Labels",
+  "field_severity": "Severity",
+  "option_critical": "Critical",
+  "option_error": "Error",
+  "option_warning": "Warning",
+  "option_info": "Info",
+  "user_guide_headline": "Steps to create an Alert",
+  "user_guide_qb_step1": "Step 1 - Define the metric",
+  "user_guide_qb_step1a": "Choose a metric which you want to create an alert on",
+  "user_guide_qb_step1b": "Filter it based on WHERE field or GROUPBY if needed",
+  "user_guide_qb_step1c": "Apply an aggregatiion function like COUNT, SUM, etc. or choose NOOP to plot the raw metric",
+  "user_guide_qb_step1d": "Create a formula based on Queries if needed",
+  "user_guide_qb_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_qb_step2a": "Select the evaluation interval, threshold type and whether you want to alert above/below a value",
+  "user_guide_qb_step2b": "Enter the Alert threshold",
+  "user_guide_qb_step3": "Step 3 -Alert Configuration",
+  "user_guide_qb_step3a": "Set alert severity, name and descriptions",
+  "user_guide_qb_step3b": "Add tags to the alert in the Label field if needed",
+  "user_guide_pql_step1": "Step 1 - Define the metric",
+  "user_guide_pql_step1a": "Write a PromQL query for the metric",
+  "user_guide_pql_step1b": "Format the legends based on labels you want to highlight",
+  "user_guide_pql_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_pql_step2a": "Select the threshold type and whether you want to alert above/below a value",
+  "user_guide_pql_step2b": "Enter the Alert threshold",
+  "user_guide_pql_step3": "Step 3 -Alert Configuration",
+  "user_guide_pql_step3a": "Set alert severity, name and descriptions",
+  "user_guide_pql_step3b": "Add tags to the alert in the Label field if needed",
+  "user_tooltip_more_help": "More details on how to create alerts"
+}
\ No newline at end of file

frontend/src/api/alerts/create.ts

@@ -9,7 +9,7 @@ const create = async (
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		const response = await axios.post('/rules', {
-			data: props.query,
+			...props.data,
 		});
 
 		return {

frontend/src/api/alerts/get.ts

@@ -14,7 +14,7 @@ const get = async (
 			statusCode: 200,
 			error: null,
 			message: response.data.status,
-			payload: response.data.data,
+			payload: response.data,
 		};
 	} catch (error) {
 		return ErrorResponseHandler(error as AxiosError);