chore(release): 📌 pin versions: SigNoz 0.10.2

Signed-off-by: Prashant Shahi <prashant@signoz.io>

.github/CODEOWNERS

@@ -4,4 +4,4 @@
 * @ankitnayan
 /frontend/ @palashgdev @pranshuchittora
 /deploy/ @prashant-shahi
-/pkg/query-service/ @srikanthccv @makeavish @nityanandagohain
+/pkg/query-service/ @srikanthccv

.github/workflows/dependency-review.yml

@@ -0,0 +1,22 @@
+# 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

CONTRIBUTING.md

@@ -1,122 +1,331 @@
-# How to Contribute
+# Contributing Guidelines
 
-There are primarily 2 areas in which you can contribute in SigNoz
+## Welcome to SigNoz Contributing section 🎉
 
-- Frontend ( written in Typescript, React)
-- Backend - ( Query Service - written in Go)
+Hi there! We're thrilled that you'd like to contribute to this project, thank you for your interest. Whether it's a bug report, new feature, correction, or additional documentation, we greatly value feedback and contributions from our community.
 
-Depending upon your area of expertise & interest, you can chose one or more to contribute. Below are detailed instructions to contribute in each area
+Please read through this document before submitting any issues or pull requests to ensure we have all the necessary information to effectively respond to your bug report or contribution.
 
-> Please note: If you want to work on an issue, please ask the maintainers to assign the issue to you before starting work on it. This would help us understand who is working on an issue and prevent duplicate work. 🙏🏻
+- We accept contributions made to the [SigNoz `develop` branch]()
+- Find all SigNoz Docker Hub images here 
+    - [signoz/frontend](https://hub.docker.com/r/signoz/frontend)
+    - [signoz/query-service](https://hub.docker.com/r/signoz/query-service)
+    - [signoz/otelcontribcol](https://hub.docker.com/r/signoz/otelcontribcol)
 
-> If you just raise a PR, without the corresponding issue being assigned to you - it may not be accepted.
+## Finding contributions to work on 💬
 
-# Develop Frontend
+Looking at the existing issues is a great way to find something to contribute on. 
+Also, have a look at these [good first issues label](https://github.com/SigNoz/signoz/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) to start with.
 
-Need to update [https://github.com/SigNoz/signoz/tree/main/frontend](https://github.com/SigNoz/signoz/tree/main/frontend)
 
-### Contribute to Frontend with Docker installation of SigNoz
+## Sections:
+- [General Instructions](#1-general-instructions-) 
+    - [For Creating Issue(s)](#11-for-creating-issues)
+    - [For Pull Requests(s)](#12-for-pull-requests)
+- [How to Contribute](#2-how-to-contribute-%EF%B8%8F)
+- [Develop Frontend](#3-develop-frontend-)
+  - [Contribute to Frontend with Docker installation of SigNoz](#31-contribute-to-frontend-with-docker-installation-of-signoz)
+  - [Contribute to Frontend without installing SigNoz backend](#32-contribute-to-frontend-without-installing-signoz-backend)
+- [Contribute to Backend (Query-Service)](#4-contribute-to-backend-query-service-)
+    - [To run ClickHouse setup](#41-to-run-clickhouse-setup-recommended-for-local-development)
+- [Contribute to SigNoz Helm Chart](#5-contribute-to-signoz-helm-chart-)
+    - [To run helm chart for local development](#51-to-run-helm-chart-for-local-development)
+- [Other Ways to Contribute](#other-ways-to-contribute)
 
-- `git clone https://github.com/SigNoz/signoz.git && cd signoz`
-- comment out frontend service section at `deploy/docker/clickhouse-setup/docker-compose.yaml#L62`
-- run `cd deploy` to move to deploy directory
-- Install signoz locally without the frontend
-    - Add below configuration to query-service section at `docker/clickhouse-setup/docker-compose.yaml#L38`
+# 1. General Instructions 📝
 
-    ```docker
+## 1.1 For Creating Issue(s)
+Before making any significant changes and before filing a new issue, please check [existing open](https://github.com/SigNoz/signoz/issues?q=is%3Aopen+is%3Aissue), or [recently closed](https://github.com/SigNoz/signoz/issues?q=is%3Aissue+is%3Aclosed) issues to make sure somebody else hasn't already reported the issue. Please try to include as much information as you can. 
+
+**Issue Types** - [Bug Report](https://github.com/SigNoz/signoz/issues/new?assignees=&labels=&template=bug_report.md&title=) | [Feature Request](https://github.com/SigNoz/signoz/issues/new?assignees=&labels=&template=feature_request.md&title=) | [Performance Issue Report](https://github.com/SigNoz/signoz/issues/new?assignees=&labels=&template=performance-issue-report.md&title=) | [Report a Security Vulnerability](https://github.com/SigNoz/signoz/security/policy)
+
+#### Details like these are incredibly useful:
+
+- **Requirement** - what kind of use case are you trying to solve?
+- **Proposal** - what do you suggest to solve the problem or improve the existing
+  situation?
+- Any open questions to address❓
+
+#### If you are reporting a bug, details like these are incredibly useful:
+
+- A reproducible test case or series of steps.
+- The version of our code being used.
+- Any modifications you've made relevant to the bug🐞.
+- Anything unusual about your environment or deployment.
+
+Discussing your proposed changes ahead of time will make the contribution
+process smooth for everyone 🙌.
+
+ **[`^top^`](#)**
+ 
+<hr>
+
+## 1.2 For Pull Request(s)
+
+Contributions via pull requests are much appreciated. Once the approach is agreed upon ✅, make your changes and open a Pull Request(s). 
+Before sending us a pull request, please ensure that,
+
+- Fork the SigNoz repo on GitHub, clone it on your machine.
+- Create a branch with your changes.
+- You are working against the latest source on the `develop` branch.
+- Modify the source; please focus only on the specific change you are contributing.
+- Ensure local tests pass.
+- Commit to your fork using clear commit messages.
+- Send us a pull request, answering any default questions in the pull request interface.
+- Pay attention to any automated CI failures reported in the pull request, and stay involved in the conversation
+- Once you've pushed your commits to GitHub, make sure that your branch can be auto-merged (there are no merge conflicts). If not, on your computer, merge main into your branch, resolve any merge conflicts, make sure everything still runs correctly and passes all the tests, and then push up those changes.
+- Once the change has been approved and merged, we will inform you in a comment.
+
+
+GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and 
+[creating a pull request](https://help.github.com/articles/creating-a-pull-request/).
+
+**Note:** Unless your change is small, **please** consider submitting different Pull Rrequest(s):
+
+* 1️⃣ First PR should include the overall structure of the new component:
+  * Readme, configuration, interfaces or base classes, etc...
+  * This PR is usually trivial to review, so the size limit does not apply to
+    it.
+* 2️⃣ Second PR should include the concrete implementation of the component. If the
+  size of this PR is larger than the recommended size, consider **splitting** ⚔️ it into
+  multiple PRs.
+* If there are multiple sub-component then ideally each one should be implemented as
+  a **separate** pull request.
+* Last PR should include changes to **any user-facing documentation.** And should include
+  end-to-end tests if applicable. The component must be enabled
+  only after sufficient testing, and there is enough confidence in the
+  stability and quality of the component.
+
+
+You can always reach out to `ankit@signoz.io` to understand more about the repo and product. We are very responsive over email and [SLACK](https://signoz.io/slack).
+
+### Pointers:
+- If you find any **bugs** → please create an [**issue.**](https://github.com/SigNoz/signoz/issues/new?assignees=&labels=&template=bug_report.md&title=)
+- If you find anything **missing** in documentation → you can create an issue with the label **`documentation`**.
+- If you want to build any **new feature** → please create an [issue with the label **`enhancement`**.](https://github.com/SigNoz/signoz/issues/new?assignees=&labels=&template=feature_request.md&title=)
+- If you want to **discuss** something about the product, start a new [**discussion**.](https://github.com/SigNoz/signoz/discussions)
+
+<hr>
+
+### Conventions to follow when submitting Commits and Pull Request(s).
+
+We try to follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/), more specifically the commits and PRs **should have type specifiers** prefixed in the name. [This](https://www.conventionalcommits.org/en/v1.0.0/#specification) should give you a better idea.
+
+e.g. If you are submitting a fix for an issue in frontend, the PR name should be prefixed with **`fix(FE):`**
+
+- Follow [GitHub Flow](https://guides.github.com/introduction/flow/) guidelines for your contribution flows.
+
+- Feel free to ping us on [`#contributing`](https://signoz-community.slack.com/archives/C01LWQ8KS7M) or [`#contributing-frontend`](https://signoz-community.slack.com/archives/C027134DM8B) on our slack community if you need any help on this :)
+
+ **[`^top^`](#)**
+ 
+<hr>
+
+# 2. How to Contribute 🙋🏻‍♂️
+
+#### There are primarily 2 areas in which you can contribute to SigNoz
+
+- [**Frontend**](#3-develop-frontend-) (Written in Typescript, React)
+- [**Backend**](#4-contribute-to-backend-query-service-) (Query Service,  written in Go)
+
+Depending upon your area of expertise & interest, you can choose one or more to contribute. Below are detailed instructions to contribute in each area.
+
+**Please note:** If you want to work on an issue, please ask the maintainers to assign the issue to you before starting work on it. This would help us understand who is working on an issue and prevent duplicate work. 🙏🏻
+
+⚠️ If you just raise a PR, without the corresponding issue being assigned to you - it may not be accepted.
+
+ **[`^top^`](#)**
+ 
+<hr>
+
+# 3. Develop Frontend 🌚
+
+**Need to Update: [https://github.com/SigNoz/signoz/tree/develop/frontend](https://github.com/SigNoz/signoz/tree/develop/frontend)**
+
+Also, have a look at [Frontend README.md](https://github.com/SigNoz/signoz/blob/develop/frontend/README.md) sections for more info on how to setup SigNoz frontend locally (with and without Docker).
+
+## 3.1 Contribute to Frontend with Docker installation of SigNoz
+
+- Clone the SigNoz repository and cd into signoz directory,
+  ```
+  git clone https://github.com/SigNoz/signoz.git && cd signoz
+  ```
+- Comment out `frontend` service section at [`deploy/docker/clickhouse-setup/docker-compose.yaml#L68`](https://github.com/SigNoz/signoz/blob/develop/deploy/docker/clickhouse-setup/docker-compose.yaml#L68)
+
+![develop-frontend](https://user-images.githubusercontent.com/52788043/179009217-6692616b-17dc-4d27-b587-9d007098d739.jpeg)
+
+
+- run `cd deploy` to move to deploy directory,
+- Install signoz locally **without** the frontend,
+    - Add / Uncomment the below configuration to query-service section at [`deploy/docker/clickhouse-setup/docker-compose.yaml#L47`](https://github.com/SigNoz/signoz/blob/develop/deploy/docker/clickhouse-setup/docker-compose.yaml#L47)
+    ```
     ports:
       - "8080:8080"
     ```
-  - If you are using x86_64 processors (All Intel/AMD processors) run `sudo docker-compose -f docker/clickhouse-setup/docker-compose.yaml up -d`
-  - If you are on arm64 processors (Apple M1 Macbooks) run `sudo docker-compose -f docker/clickhouse-setup/docker-compose.arm.yaml up -d`
-- `cd ../frontend` and change baseURL to `http://localhost:8080` in file `src/constants/env.ts`
-- `yarn install`
-- `yarn dev`
+<img width="869" alt="query service" src="https://user-images.githubusercontent.com/52788043/179010251-8489be31-04ca-42f8-b30d-ef0bb6accb6b.png">    
+    
+  - Next run,
+    ```
+    sudo docker-compose -f docker/clickhouse-setup/docker-compose.yaml up -d
+    ```
+- `cd ../frontend` and change baseURL in file [`frontend/src/constants/env.ts#L2`](https://github.com/SigNoz/signoz/blob/develop/frontend/src/constants/env.ts#L2) and for that, you need to create a `.env` file in the `frontend` directory with the following environment variable (`FRONTEND_API_ENDPOINT`) matching your configuration.
 
-> Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh`
+    If you have backend api exposed via frontend nginx:
+    ```
+    FRONTEND_API_ENDPOINT=http://localhost:3301
+    ```
+    If not:
+    ```
+    FRONTEND_API_ENDPOINT=http://localhost:8080
+    ```
 
-### Contribute to Frontend without installing SigNoz backend
+- Next, 
+  ```
+  yarn install
+  yarn dev
+  ```
 
-If you don't want to install SigNoz backend just for doing frontend development, we can provide you with test environments which you can use as the backend. Please ping us in #contributing channel in our [slack community](https://signoz.io/slack) and we will DM you with `<test environment URL>`
+### Important Notes:
+The Maintainers / Contributors who will change Line Numbers of `Frontend` & `Query-Section`, please update line numbers in [`/.scripts/commentLinesForSetup.sh`](https://github.com/SigNoz/signoz/blob/develop/.scripts/commentLinesForSetup.sh)
 
-- `git clone https://github.com/SigNoz/signoz.git && cd signoz/frontend`
-- Create a file `.env` with `FRONTEND_API_ENDPOINT=<test environment URL>`
-- `yarn install`
-- `yarn dev`
+ **[`^top^`](#)**
 
-**_Frontend should now be accessible at `http://localhost:3301/application`_**
+## 3.2 Contribute to Frontend without installing SigNoz backend
 
-# Contribute to Query-Service
+If you don't want to install the SigNoz backend just for doing frontend development, we can provide you with test environments that you can use as the backend. 
 
-Need to update [https://github.com/SigNoz/signoz/tree/main/pkg/query-service](https://github.com/SigNoz/signoz/tree/main/pkg/query-service)
+- Clone the SigNoz repository and cd into signoz/frontend directory,
+  ```
+  git clone https://github.com/SigNoz/signoz.git && cd signoz/frontend
+  ````
+- Create a file `.env` in the `frontend` directory with `FRONTEND_API_ENDPOINT=<test environment URL>`
+- Next, 
+  ```
+  yarn install
+  yarn dev
+  ```
 
-### To run ClickHouse setup (recommended for local development)
+Please ping us in the [`#contributing`](https://signoz-community.slack.com/archives/C01LWQ8KS7M) channel or ask `@Prashant Shahi` in our [Slack Community](https://signoz.io/slack)  and we will DM you with `<test environment URL>`.
 
-- git clone https://github.com/SigNoz/signoz.git
-- run `cd signoz` to move to signoz directory
-- run `sudo make dev-setup` to configure local setup to run query-service
-- comment out frontend service section at `docker/clickhouse-setup/docker-compose.yaml`
-- comment out query-service section at `docker/clickhouse-setup/docker-compose.yaml`
-- add below configuration to clickhouse section at `docker/clickhouse-setup/docker-compose.yaml`
-```docker
-    expose:
-      - 9000
-    ports:
-      - 9001:9000
+**Frontend should now be accessible at** [`http://localhost:3301/application`](http://localhost:3301/application)
+
+ **[`^top^`](#)**
+ 
+<hr>
+
+# 4. Contribute to Backend (Query-Service) 🌑
+
+[**https://github.com/SigNoz/signoz/tree/develop/pkg/query-service**](https://github.com/SigNoz/signoz/tree/develop/pkg/query-service)
+
+## 4.1 To run ClickHouse setup (recommended for local development)
+
+- Clone the SigNoz repository and cd into signoz directory,
+    ```
+    git clone https://github.com/SigNoz/signoz.git && cd signoz
+    ```
+- run `sudo make dev-setup` to configure local setup to run query-service,
+- Comment out `frontend` service section at [`deploy/docker/clickhouse-setup/docker-compose.yaml#L68`](https://github.com/SigNoz/signoz/blob/develop/deploy/docker/clickhouse-setup/docker-compose.yaml#L68)
+<img width="982" alt="develop-frontend" src="https://user-images.githubusercontent.com/52788043/179043977-012be8b0-a2ed-40d1-b2e6-2ab72d7989c0.png">
+
+- Comment out `query-service` section at [`deploy/docker/clickhouse-setup/docker-compose.yaml#L41`,](https://github.com/SigNoz/signoz/blob/develop/deploy/docker/clickhouse-setup/docker-compose.yaml#L41)
+<img width="1068" alt="Screenshot 2022-07-14 at 22 48 07" src="https://user-images.githubusercontent.com/52788043/179044151-a65ba571-db0b-4a16-b64b-ca3fadcf3af0.png">
+
+- add below configuration to `clickhouse` section at [`deploy/docker/clickhouse-setup/docker-compose.yaml`,](https://github.com/SigNoz/signoz/blob/develop/deploy/docker/clickhouse-setup/docker-compose.yaml)
+  ```
+  ports:
+    - 9001:9000
+  ```
+<img width="1013" alt="Screenshot 2022-07-14 at 22 50 37" src="https://user-images.githubusercontent.com/52788043/179044544-a293d3bc-4c4f-49ea-a276-505a381de67d.png">
+
+- run `cd pkg/query-service/` to move to `query-service` directory,
+- Then, you need to create a `.env` file with the following environment variable 
+    ```
+    SIGNOZ_LOCAL_DB_PATH="./signoz.db"
+    ```
+to set your local environment with the right `RELATIONAL_DATASOURCE_PATH` as mentioned in [`./constants/constants.go#L38`,](https://github.com/SigNoz/signoz/blob/develop/pkg/query-service/constants/constants.go#L38)
+
+- Now, install SigNoz locally **without** the `frontend` and `query-service`,
+  - If you are using `x86_64` processors (All Intel/AMD processors) run `sudo make run-x86`
+  - If you are on `arm64` processors (Apple M1 Macs) run `sudo make run-arm`
+
+#### Run locally,
 ```
-
-- run `cd pkg/query-service/` to move to query-service directory
-- Open ./constants/constants.go
-    - Replace ```const RELATIONAL_DATASOURCE_PATH = "/var/lib/signoz/signoz.db"``` \
-        with ```const RELATIONAL_DATASOURCE_PATH = "./signoz.db".```
-
-- Install signoz locally without the frontend and query-service
-  - If you are using x86_64 processors (All Intel/AMD processors) run `sudo make run-x86`
-  - If you are on arm64 processors (Apple M1 Macbooks) run `sudo make run-arm`
-
-#### Run locally
-```console
 ClickHouseUrl=tcp://localhost:9001 STORAGE=clickhouse go run main.go
 ```
 
-> Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh`
+#### Build and Run locally
+```
+cd pkg/query-service
+go build -o build/query-service main.go
+ClickHouseUrl=tcp://localhost:9001 STORAGE=clickhouse build/query-service
+```
 
-**_Query Service should now be available at `http://localhost:8080`_**
+#### Docker Images
+The docker images of query-service is available at https://hub.docker.com/r/signoz/query-service
 
-> If you want to see how, frontend plays with query service, you can run frontend also in you local env with the baseURL changed to `http://localhost:8080` in file `src/constants/env.ts` as the query-service is now running at port `8080`
+```
+docker pull signoz/query-service
+```
+
+```
+docker pull signoz/query-service:latest
+```
+
+```
+docker pull signoz/query-service:develop
+```
+
+### Important Note:
+The Maintainers / Contributors who will change Line Numbers of `Frontend` & `Query-Section`, please update line numbers in [`/.scripts/commentLinesForSetup.sh`](https://github.com/SigNoz/signoz/blob/develop/.scripts/commentLinesForSetup.sh)
+
+
+
+**Query Service should now be available at** [`http://localhost:8080`](http://localhost:8080)
+
+If you want to see how the frontend plays with query service, you can run the frontend also in your local env with the baseURL changed to `http://localhost:8080` in file [`frontend/src/constants/env.ts`](https://github.com/SigNoz/signoz/blob/develop/frontend/src/constants/env.ts) as the `query-service` is now running at port `8080`.
 
----
 <!-- Instead of configuring a local setup, you can also use [Gitpod](https://www.gitpod.io/), a VSCode-based Web IDE.
 
 Click the button below. A workspace with all required environments will be created.
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/SigNoz/signoz)
 
-> To use it on your forked repo, edit the 'Open in Gitpod' button url to `https://gitpod.io/#https://github.com/<your-github-username>/signoz` -->
+> To use it on your forked repo, edit the 'Open in Gitpod' button URL to `https://gitpod.io/#https://github.com/<your-github-username>/signoz` -->
 
-# Contribute to SigNoz Helm Chart
+ **[`^top^`](#)**
+ 
+<hr>
 
-Need to update [https://github.com/SigNoz/charts](https://github.com/SigNoz/charts).
+# 5. Contribute to SigNoz Helm Chart 📊
 
-### To run helm chart for local development
+**Need to Update: [https://github.com/SigNoz/charts](https://github.com/SigNoz/charts).**
 
-- run `git clone https://github.com/SigNoz/charts.git` followed by `cd charts`
-- it is recommended to use lightweight kubernetes (k8s) cluster for local development:
+## 5.1 To run helm chart for local development
+
+- Clone the SigNoz repository and cd into charts directory,
+    ```
+    git clone https://github.com/SigNoz/charts.git && cd charts
+    ``` 
+- It is recommended to use lightweight kubernetes (k8s) cluster for local development:
   - [kind](https://kind.sigs.k8s.io/docs/user/quick-start/#installation)
   - [k3d](https://k3d.io/#installation)
   - [minikube](https://minikube.sigs.k8s.io/docs/start/)
-- create a k8s cluster and make sure `kubectl` points to the locally created k8s cluster
-- run `make dev-install` to install SigNoz chart with `my-release` release name in `platform` namespace.
-- run `kubectl -n platform port-forward svc/my-release-signoz-frontend 3301:3301` to make SigNoz UI available at [localhost:3301](http://localhost:3301)
+- create a k8s cluster and make sure `kubectl` points to the locally created k8s cluster,
+- run `make dev-install` to install SigNoz chart with `my-release` release name in `platform` namespace,
+- next run,
+    ```
+    kubectl -n platform port-forward svc/my-release-signoz-frontend 3301:3301
+    ``` 
+to make SigNoz UI available at [localhost:3301](http://localhost:3301)
 
-**To install HotROD sample app:**
+**5.1.1 To install the HotROD sample app:**
 
 ```bash
 curl -sL https://github.com/SigNoz/signoz/raw/main/sample-apps/hotrod/hotrod-install.sh \
   | HELM_RELEASE=my-release SIGNOZ_NAMESPACE=platform bash
 ```
 
-**To load data with HotROD sample app:**
+**5.1.2 To load data with the HotROD sample app:**
 
 ```bash
 kubectl -n sample-application run strzal --image=djbingham/curl \
@@ -124,7 +333,7 @@ kubectl -n sample-application run strzal --image=djbingham/curl \
   'locust_count=6' -F 'hatch_rate=2' http://locust-master:8089/swarm
 ```
 
-**To stop the load generation:**
+**5.1.3 To stop the load generation:**
 
 ```bash
 kubectl -n sample-application run strzal --image=djbingham/curl \
@@ -132,59 +341,32 @@ kubectl -n sample-application run strzal --image=djbingham/curl \
   http://locust-master:8089/stop
 ```
 
-**To delete HotROD sample app:**
+**5.1.4 To delete the HotROD sample app:**
 
 ```bash
 curl -sL https://github.com/SigNoz/signoz/raw/main/sample-apps/hotrod/hotrod-delete.sh \
   | HOTROD_NAMESPACE=sample-application bash
 ```
 
+ **[`^top^`](#)**
+ 
 ---
 
-## General Instructions
+## Other Ways to Contribute
 
-**Before making any significant changes, please open an issue**. Each issue
-should describe the following:
+There are many other ways to get involved with the community and to participate in this project:
 
-* Requirement - what kind of use case are you trying to solve?
-* Proposal - what do you suggest to solve the problem or improve the existing
-  situation?
-* Any open questions to address
-
-Discussing your proposed changes ahead of time will make the contribution
-process smooth for everyone. Once the approach is agreed upon, make your changes
-and open a pull request(s). Unless your change is small, Please consider submitting different PRs:
-
-* First PR should include the overall structure of the new component:
-  * Readme, configuration, interfaces or base classes etc...
-  * This PR is usually trivial to review, so the size limit does not apply to
-    it.
-* Second PR should include the concrete implementation of the component. If the
-  size of this PR is larger than the recommended size consider splitting it in
-  multiple PRs.
-* If there are multiple sub-component then ideally each one should be implemented as
-  a separate pull request.
-* Last PR should include changes to any user facing documentation. And should include
-  end to end tests if applicable. The component must be enabled
-  only after sufficient testing, and there is enough confidence in the
-  stability and quality of the component.
+- Use the product, submitting GitHub issues when a problem is found.
+- Help code review pull requests and participate in issue threads.
+- Submit a new feature request as an issue.
+- Help answer questions on forums such as Stack Overflow and [SigNoz Community Slack Channel](https://signoz.io/slack).
+- Tell others about the project on Twitter, your blog, etc.
 
 
-You can always reach out to `ankit@signoz.io` to understand more about the repo and product. We are very responsive over email and [slack](https://signoz.io/slack).
+## License
 
-- If you find any bugs, please create an issue
-- If you find anything missing in documentation, you can create an issue with label **documentation**
-- If you want to build any new feature, please create an issue with label `enhancement`
-- If you want to discuss something about the product, start a new [discussion](https://github.com/SigNoz/signoz/discussions)
+By contributing to SigNoz, you agree that your contributions will be licensed under its MIT license.
 
-### Conventions to follow when submitting commits, PRs
+Again, Feel free to ping us on [`#contributing`](https://signoz-community.slack.com/archives/C01LWQ8KS7M) or [`#contributing-frontend`](https://signoz-community.slack.com/archives/C027134DM8B) on our slack community if you need any help on this :)
 
-1. We try to follow https://www.conventionalcommits.org/en/v1.0.0/
-
-More specifically the commits and PRs should have type specifiers prefixed in the name. [This](https://www.conventionalcommits.org/en/v1.0.0/#specification) should give you a better idea.
-
-e.g. If you are submitting a fix for an issue in frontend - PR name should be prefixed with `fix(FE):`
-
-2. Follow [GitHub Flow](https://guides.github.com/introduction/flow/) guidelines for your contribution flows
-
-3. Feel free to ping us on `#contributing` or `#contributing-frontend` on our slack community if you need any help on this :)
+Thank You!

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/*"

README.md

@@ -32,7 +32,6 @@ SigNoz helps developers monitor applications and troubleshoot problems in their
 
 👉 Run aggregates on trace data to get business relevant metrics
 
-
 ![screenzy-1644432902955](https://user-images.githubusercontent.com/504541/153270713-1b2156e6-ec03-42de-975b-3c02b8ec1836.png)
 <br />
 ![screenzy-1644432986784](https://user-images.githubusercontent.com/504541/153270725-0efb73b3-06ed-4207-bf13-9b7e2e17c4b8.png)
@@ -88,8 +87,7 @@ You can find the complete list of languages here - https://opentelemetry.io/docs
 <img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Philosophy.svg" width="50px" />
 
 ## Getting Started
-  
-  
+
 ### Deploy using Docker
 
 Please follow the steps listed [here](https://signoz.io/docs/deployment/docker/) to install using docker
@@ -102,7 +100,6 @@ The [troubleshooting instructions](https://signoz.io/docs/deployment/troubleshoo
 ### Deploy in Kubernetes using Helm
 
 Please follow the steps listed [here](https://signoz.io/docs/deployment/helm_chart) to install using helm charts
-  
 
 <br /><br />
 
@@ -112,7 +109,7 @@ Please follow the steps listed [here](https://signoz.io/docs/deployment/helm_cha
 
 ### SigNoz vs Prometheus
 
-Prometheus is good if you want to do just metrics. But if you want to have a seamless experience between metrics and traces, then current experience of stitching together Prometheus & Jaeger is not great. 
+Prometheus is good if you want to do just metrics. But if you want to have a seamless experience between metrics and traces, then current experience of stitching together Prometheus & Jaeger is not great.
 
 Our goal is to provide an integrated UI between metrics & traces - similar to what SaaS vendors like Datadog provides - and give advanced filtering and aggregation over traces, something which Jaeger currently lack.
 
@@ -133,11 +130,28 @@ Moreover, SigNoz has few more advanced features wrt Jaeger:
 
 ## Contributing
 
-
-We ❤️  contributions big or small. Please read [CONTRIBUTING.md](CONTRIBUTING.md) to get started with making contributions to SigNoz. 
+We ❤️ contributions big or small. Please read [CONTRIBUTING.md](CONTRIBUTING.md) to get started with making contributions to SigNoz.
 
 Not sure how to get started? Just ping us on `#contributing` in our [slack community](https://signoz.io/slack)
 
+### Project maintainers
+
+#### Backend
+
+- [Ankit Nayan](https://github.com/ankitnayan)
+- [Nityananda Gohain](https://github.com/nityanandagohain)
+- [Srikanth Chekuri](https://github.com/srikanthccv)
+- [Vishal Sharma](https://github.com/makeavish)
+
+#### Frontend
+
+- [Palash Gupta](https://github.com/palashgdev)
+- [Pranshu Chittora](https://github.com/pranshuchittora)
+
+#### DevOps
+
+- [Prashant Shahi](https://github.com/prashant-shahi)
+
 <br /><br />
 
 <img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/DevelopingLocally.svg" width="50px" />
@@ -156,11 +170,8 @@ Join the [slack community](https://signoz.io/slack) to know more about distribut
 
 If you have any ideas, questions, or any feedback, please share on our [Github Discussions](https://github.com/SigNoz/signoz/discussions)
 
-As always, thanks to our amazing contributors!    
+As always, thanks to our amazing contributors!
 
 <a href="https://github.com/signoz/signoz/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=signoz/signoz" />
 </a>
-
-
-

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/clickhouse-storage.xml

@@ -20,6 +20,7 @@
                 </default>
                 <s3>
                     <disk>s3</disk>
+                    <perform_ttl_move_on_insert>0</perform_ttl_move_on_insert>
                 </s3>
             </volumes>
         </tiered>

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

@@ -27,7 +27,7 @@ services:
       retries: 3
 
   alertmanager:
-    image: signoz/alertmanager:0.23.0-0.1
+    image: signoz/alertmanager:0.23.0-0.2
     volumes:
       - ./data/alertmanager:/data
     command:
@@ -40,7 +40,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.9.1
+    image: signoz/query-service:0.10.2
     command: ["-config=/root/config/prometheus.yml"]
     # ports:
     #   - "6060:6060"     # pprof port
@@ -68,7 +68,7 @@ services:
       - clickhouse
 
   frontend:
-    image: signoz/frontend:0.9.1
+    image: signoz/frontend:0.10.2
     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.3
     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.3
     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

@@ -1,30 +1,46 @@
 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]
+      exporters: [prometheus]

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

@@ -1,17 +1,30 @@
 receivers:
-  otlp:
-    protocols:
-      grpc:
-      http:
-
-  # Data sources: metrics
   prometheus:
     config:
       scrape_configs:
+        # otel-collector internal metrics
         - job_name: "otel-collector"
+          scrape_interval: 60s
+          dns_sd_configs:
+            - names:
+                - 'tasks.otel-collector'
+              type: 'A'
+              port: 8888
+        # otel-collector-metrics internal metrics
+        - job_name: "otel-collector-metrics"
           scrape_interval: 60s
           static_configs:
-            - targets: ["otel-collector:8889"]
+            - targets:
+              - localhost:8888
+        # SigNoz span metrics
+        - job_name: "signozspanmetrics-collector"
+          scrape_interval: 60s
+          dns_sd_configs:
+            - names:
+                - 'tasks.otel-collector'
+              type: 'A'
+              port: 8889
+
 processors:
   batch:
     send_batch_size: 10000
@@ -32,17 +45,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]
+      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/clickhouse-storage.xml

@@ -20,6 +20,7 @@
                 </default>
                 <s3>
                     <disk>s3</disk>
+                    <perform_ttl_move_on_insert>0</perform_ttl_move_on_insert>
                 </s3>
             </volumes>
         </tiered>

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

@@ -25,7 +25,7 @@ services:
       retries: 3
 
   alertmanager:
-    image: signoz/alertmanager:0.23.0-0.1
+    image: signoz/alertmanager:0.23.0-0.2
     volumes:
       - ./data/alertmanager:/data
     depends_on:
@@ -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.1
+    image: signoz/query-service:0.10.2
     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.1
+    image: signoz/frontend:0.10.2
     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.3
     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.3
     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

@@ -1,25 +1,36 @@
 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

@@ -1,123 +0,0 @@
-<?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>

deploy/install.sh

@@ -204,9 +204,14 @@ start_docker() {
             echo "Starting docker service"
             $sudo_cmd systemctl start docker.service
         fi
+        # if [[ -z $sudo_cmd ]]; then
+        #     docker ps > /dev/null && true
+        #     if [[ $? -ne 0 ]]; then
+        #         request_sudo
+        #     fi
+        # fi
         if [[ -z $sudo_cmd ]]; then
-            docker ps > /dev/null && true
-            if [[ $? -ne 0 ]]; then
+            if ! docker ps > /dev/null && true; then
                 request_sudo
             fi
         fi
@@ -268,8 +273,12 @@ request_sudo() {
         if (( $EUID != 0 )); then
             sudo_cmd="sudo"
             echo -e "Please enter your sudo password, if prompt."
-            $sudo_cmd -l | grep -e "NOPASSWD: ALL" > /dev/null
-            if [[ $? -ne 0 ]] && ! $sudo_cmd -v; then
+            # $sudo_cmd -l | grep -e "NOPASSWD: ALL" > /dev/null
+            # if [[ $? -ne 0 ]] && ! $sudo_cmd -v; then
+            #     echo "Need sudo privileges to proceed with the installation."
+            #     exit 1;
+            # fi
+            if ! $sudo_cmd -l | grep -e "NOPASSWD: ALL" > /dev/null && ! $sudo_cmd -v; then
                 echo "Need sudo privileges to proceed with the installation."
                 exit 1;
             fi
@@ -303,8 +312,13 @@ echo -e "🌏 Detecting your OS ...\n"
 check_os
 
 # Obtain unique installation id
-sysinfo="$(uname -a)"
-if [[ $? -ne 0 ]]; then
+# sysinfo="$(uname -a)"
+# if [[ $? -ne 0 ]]; then
+#     uuid="$(uuidgen)"
+#     uuid="${uuid:-$(cat /proc/sys/kernel/random/uuid)}"
+#     sysinfo="${uuid:-$(cat /proc/sys/kernel/random/uuid)}"
+# fi
+if ! sysinfo="$(uname -a)"; then
     uuid="$(uuidgen)"
     uuid="${uuid:-$(cat /proc/sys/kernel/random/uuid)}"
     sysinfo="${uuid:-$(cat /proc/sys/kernel/random/uuid)}"

frontend/commitlint.config.js

@@ -1 +0,0 @@
-module.exports = { extends: ['@commitlint/config-conventional'] };

frontend/commitlint.config.ts

@@ -0,0 +1 @@
+export default { extends: ['@commitlint/config-conventional'] };

frontend/package.json

@@ -13,8 +13,10 @@
 		"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",
+		"playwright:codegen:local:auth":"yarn playwright:codegen:local --load-storage=tests/auth.json",
 		"husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
 		"commitlint": "commitlint --edit $1"
 	},
@@ -43,6 +45,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 +84,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

@@ -14,8 +14,10 @@ const config: PlaywrightTestConfig = {
 		baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3301',
 	},
 	updateSnapshots: 'all',
-	fullyParallel: false,
-	quiet: true,
+	fullyParallel: !!process.env.CI,
+	quiet: false,
+	testMatch: ['**/*.spec.ts'],
+	reporter: process.env.CI ? 'github' : 'list',
 };
 
 export default config;

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

@@ -0,0 +1,92 @@
+{
+  "target_missing": "Please enter a threshold to proceed",
+  "rule_test_fired": "Test notification sent successfully",
+  "no_alerts_found": "No alerts found during the evaluation. This happens when rule condition is unsatisfied. You may adjust the rule threshold and retry.",
+  "button_testrule": "Test Notification",
+  "label_channel_select": "Notification Channels",
+  "placeholder_channel_select": "select one or more channels",
+  "channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
+  "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"
+}

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

@@ -1,4 +1,14 @@
 {
+  "channel_delete_unexp_error": "Something went wrong",
+  "channel_delete_success": "Channel Deleted Successfully",
+  "column_channel_name": "Name",
+  "column_channel_type": "Type",
+  "column_channel_action": "Action",
+  "column_channel_edit": "Edit",
+  "button_new_channel": "New Alert Channel",
+  "tooltip_notification_channels": "More details on how to setting notification channels",
+  "sending_channels_note": "The alerts will be sent to all the configured channels.",
+  "loading_channels_message": "Loading Channels..",
   "page_title_create": "New Notification Channels",
   "page_title_edit": "Edit Notification Channels",
   "button_save_channel": "Save",

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

@@ -0,0 +1,85 @@
+{
+  "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"
+}

frontend/public/locales/en/alerts.json

@@ -0,0 +1,92 @@
+{
+  "target_missing": "Please enter a threshold to proceed",
+  "rule_test_fired": "Test notification sent successfully",
+  "no_alerts_found": "No alerts found during the evaluation. This happens when rule condition is unsatisfied. You may adjust the rule threshold and retry.",
+  "button_testrule": "Test Notification",
+  "label_channel_select": "Notification Channels",
+  "placeholder_channel_select": "select one or more channels",
+  "channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
+  "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"
+}

frontend/public/locales/en/channels.json

@@ -1,4 +1,14 @@
 {
+  "channel_delete_unexp_error": "Something went wrong",
+  "channel_delete_success": "Channel Deleted Successfully",
+  "column_channel_name": "Name",
+  "column_channel_type": "Type",
+  "column_channel_action": "Action",
+  "column_channel_edit": "Edit",
+  "button_new_channel": "New Alert Channel",
+  "tooltip_notification_channels": "More details on how to setting notification channels",
+  "sending_channels_note": "The alerts will be sent to all the configured channels.",
+  "loading_channels_message": "Loading Channels..",
   "page_title_create": "New Notification Channels",
   "page_title_edit": "Edit Notification Channels",
   "button_save_channel": "Save",

frontend/public/locales/en/rules.json

@@ -0,0 +1,85 @@
+{
+  "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"
+}

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);

frontend/src/api/alerts/patch.ts

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

frontend/src/api/alerts/put.ts

@@ -2,14 +2,14 @@ import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/alerts/put';
+import { PayloadProps, Props } from 'types/api/alerts/save';
 
 const put = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		const response = await axios.put(`/rules/${props.id}`, {
-			data: props.data,
+			...props.data,
 		});
 
 		return {

frontend/src/api/alerts/save.ts

@@ -0,0 +1,17 @@
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/alerts/save';
+
+import create from './create';
+import put from './put';
+
+const save = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	if (props.id && props.id > 0) {
+		return put({ ...props });
+	}
+
+	return create({ ...props });
+};
+
+export default save;

frontend/src/api/alerts/testAlert.ts

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

frontend/src/api/errors/getAll.ts

@@ -10,9 +10,8 @@ const getAll = async (
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		const response = await axios.get(
-			`/errors?${createQueryParams({
-				start: props.start.toString(),
-				end: props.end.toString(),
+			`/listErrors?${createQueryParams({
+				...props,
 			})}`,
 		);
 

frontend/src/api/errors/getByErrorTypeAndService.ts

@@ -10,11 +10,8 @@ const getByErrorType = async (
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		const response = await axios.get(
-			`/errorWithType?${createQueryParams({
-				start: props.start.toString(),
-				end: props.end.toString(),
-				serviceName: props.serviceName,
-				errorType: props.errorType,
+			`/errorFromGroupID?${createQueryParams({
+				...props,
 			})}`,
 		);
 

frontend/src/api/errors/getById.ts

@@ -3,17 +3,15 @@ import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import createQueryParams from 'lib/createQueryParams';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/errors/getById';
+import { PayloadProps, Props } from 'types/api/errors/getByErrorId';
 
 const getById = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		const response = await axios.get(
-			`/errorWithId?${createQueryParams({
-				start: props.start.toString(),
-				end: props.end.toString(),
-				errorId: props.errorId,
+			`/errorFromErrorID?${createQueryParams({
+				...props,
 			})}`,
 		);
 

frontend/src/api/errors/getErrorCounts.ts

@@ -0,0 +1,29 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import createQueryParams from 'lib/createQueryParams';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/errors/getErrorCounts';
+
+const getErrorCounts = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/countErrors?${createQueryParams({
+				...props,
+			})}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.message,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getErrorCounts;

frontend/src/api/errors/getNextPrevId.ts

@@ -0,0 +1,29 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import createQueryParams from 'lib/createQueryParams';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/errors/getNextPrevId';
+
+const getErrorCounts = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/nextPrevErrorIDs?${createQueryParams({
+				...props,
+			})}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.message,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getErrorCounts;

frontend/src/api/index.ts

@@ -102,6 +102,11 @@ export const AxiosAlertManagerInstance = axios.create({
 export const ApiV2Instance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiV2}`,
 });
+ApiV2Instance.interceptors.response.use(
+	interceptorsResponse,
+	interceptorRejected,
+);
+ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
 
 AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorsResponse,

frontend/src/api/metrics/getTopLevelOperations.ts

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

frontend/src/api/metrics/getTopOperations.ts

@@ -2,13 +2,13 @@ import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/metrics/getTopEndPoints';
+import { PayloadProps, Props } from 'types/api/metrics/getTopOperations';
 
-const getTopEndPoints = async (
+const getTopOperations = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post(`/service/top_endpoints`, {
+		const response = await axios.post(`/service/top_operations`, {
 			start: `${props.start}`,
 			end: `${props.end}`,
 			service: props.service,
@@ -26,4 +26,4 @@ const getTopEndPoints = async (
 	}
 };
 
-export default getTopEndPoints;
+export default getTopOperations;

frontend/src/api/user/getVersion.ts

@@ -1,14 +1,15 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
+import { getVersion } from 'constants/api';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps } from 'types/api/user/getVersion';
 
-const getVersion = async (): Promise<
+const getVersionApi = async (): Promise<
 	SuccessResponse<PayloadProps> | ErrorResponse
 > => {
 	try {
-		const response = await axios.get(`/version`);
+		const response = await axios.get(`/${getVersion}`);
 
 		return {
 			statusCode: 200,
@@ -21,4 +22,4 @@ const getVersion = async (): Promise<
 	}
 };
 
-export default getVersion;
+export default getVersionApi;

frontend/src/components/Graph/index.tsx

@@ -22,6 +22,7 @@ import {
 	Tooltip,
 } from 'chart.js';
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
+import annotationPlugin from 'chartjs-plugin-annotation';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -50,6 +51,7 @@ Chart.register(
 	SubTitle,
 	BarController,
 	BarElement,
+	annotationPlugin,
 );
 
 function Graph({
@@ -62,6 +64,7 @@ function Graph({
 	name,
 	yAxisUnit = 'short',
 	forceReRender,
+	staticLine,
 }: GraphProps): JSX.Element {
 	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
 	const chartRef = useRef<HTMLCanvasElement>(null);
@@ -99,6 +102,30 @@ function Graph({
 					intersect: false,
 				},
 				plugins: {
+					annotation: staticLine
+						? {
+								annotations: [
+									{
+										type: 'line',
+										yMin: staticLine.yMin,
+										yMax: staticLine.yMax,
+										borderColor: staticLine.borderColor,
+										borderWidth: staticLine.borderWidth,
+										label: {
+											content: staticLine.lineText,
+											enabled: true,
+											font: {
+												size: 10,
+											},
+											borderWidth: 0,
+											position: 'start',
+											backgroundColor: 'transparent',
+											color: staticLine.textColor,
+										},
+									},
+								],
+						  }
+						: undefined,
 					title: {
 						display: title !== undefined,
 						text: title,
@@ -180,6 +207,7 @@ function Graph({
 					}
 				},
 			};
+
 			const chartHasData = hasData(data);
 			const chartPlugins = [];
 
@@ -205,6 +233,7 @@ function Graph({
 		name,
 		yAxisUnit,
 		onClickHandler,
+		staticLine,
 	]);
 
 	useEffect(() => {
@@ -229,6 +258,16 @@ interface GraphProps {
 	name: string;
 	yAxisUnit?: string;
 	forceReRender?: boolean | null | number;
+	staticLine?: StaticLineProps | undefined;
+}
+
+export interface StaticLineProps {
+	yMin: number | undefined;
+	yMax: number | undefined;
+	borderColor: string;
+	borderWidth: number;
+	lineText: string;
+	textColor: string;
 }
 
 export type GraphOnClickHandler = (
@@ -245,5 +284,6 @@ Graph.defaultProps = {
 	onClickHandler: undefined,
 	yAxisUnit: undefined,
 	forceReRender: undefined,
+	staticLine: undefined,
 };
 export default Graph;

frontend/src/constants/api.ts

@@ -0,0 +1,3 @@
+const getVersion = 'version';
+
+export { getVersion };

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -5,6 +5,7 @@ import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { generatePath } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -14,6 +15,7 @@ import AppReducer from 'types/reducer/app';
 import Delete from './Delete';
 
 function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
+	const { t } = useTranslation(['channels']);
 	const [notifications, Element] = notification.useNotification();
 	const [channels, setChannels] = useState<Channels[]>(allChannels);
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
@@ -29,12 +31,12 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 
 	const columns: ColumnsType<Channels> = [
 		{
-			title: 'Name',
+			title: t('column_channel_name'),
 			dataIndex: 'name',
 			key: 'name',
 		},
 		{
-			title: 'Type',
+			title: t('column_channel_type'),
 			dataIndex: 'type',
 			key: 'type',
 		},
@@ -42,14 +44,14 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 
 	if (action) {
 		columns.push({
-			title: 'Action',
+			title: t('column_channel_action'),
 			dataIndex: 'id',
 			key: 'action',
 			align: 'center',
 			render: (id: string): JSX.Element => (
 				<>
 					<Button onClick={(): void => onClickEditHandler(id)} type="link">
-						Edit
+						{t('column_channel_edit')}
 					</Button>
 					<Delete id={id} setChannels={setChannels} notifications={notifications} />
 				</>

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -1,29 +1,31 @@
 import { Button } from 'antd';
 import { NotificationInstance } from 'antd/lib/notification';
-import deleteAlert from 'api/channels/delete';
+import deleteChannel from 'api/channels/delete';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Channels } from 'types/api/channels/getAll';
 
 function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
+	const { t } = useTranslation(['channels']);
 	const [loading, setLoading] = useState(false);
 
 	const onClickHandler = async (): Promise<void> => {
 		try {
 			setLoading(true);
-			const response = await deleteAlert({
+			const response = await deleteChannel({
 				id,
 			});
 
 			if (response.statusCode === 200) {
 				notifications.success({
 					message: 'Success',
-					description: 'Channel Deleted Successfully',
+					description: t('channel_delete_success'),
 				});
 				setChannels((preChannels) => preChannels.filter((e) => e.id !== id));
 			} else {
 				notifications.error({
 					message: 'Error',
-					description: response.error || 'Something went wrong',
+					description: response.error || t('channel_delete_unexp_error'),
 				});
 			}
 			setLoading(false);
@@ -31,7 +33,9 @@ function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
 			notifications.error({
 				message: 'Error',
 				description:
-					error instanceof Error ? error.toString() : 'Something went wrong',
+					error instanceof Error
+						? error.toString()
+						: t('channel_delete_unexp_error'),
 			});
 			setLoading(false);
 		}

frontend/src/container/AllAlertChannels/index.tsx

@@ -8,16 +8,18 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import useFetch from 'hooks/useFetch';
 import history from 'lib/history';
 import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import AppReducer from 'types/reducer/app';
 
 import AlertChannelsComponent from './AlertChannels';
-import { Button, ButtonContainer } from './styles';
+import { Button, ButtonContainer, RightActionContainer } from './styles';
 
 const { Paragraph } = Typography;
 
 function AlertChannels(): JSX.Element {
+	const { t } = useTranslation(['channels']);
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 	const [addNewChannelPermission] = useComponentPermission(
 		['add_new_channel'],
@@ -34,28 +36,28 @@ function AlertChannels(): JSX.Element {
 	}
 
 	if (loading || payload === undefined) {
-		return <Spinner tip="Loading Channels.." height="90vh" />;
+		return <Spinner tip={t('loading_channels_message')} height="90vh" />;
 	}
 
 	return (
 		<>
 			<ButtonContainer>
 				<Paragraph ellipsis type="secondary">
-					The latest added channel is used as the default channel for sending alerts
+					{t('sending_channels_note')}
 				</Paragraph>
 
-				<div>
+				<RightActionContainer>
 					<TextToolTip
-						text="More details on how to setting notification channels"
+						text={t('tooltip_notification_channels')}
 						url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel"
 					/>
 
 					{addNewChannelPermission && (
 						<Button onClick={onToggleHandler} icon={<PlusOutlined />}>
-							New Alert Channel
+							{t('button_new_channel')}
 						</Button>
 					)}
-				</div>
+				</RightActionContainer>
 			</ButtonContainer>
 
 			<AlertChannelsComponent allChannels={payload} />

frontend/src/container/AllAlertChannels/styles.ts

@@ -1,6 +1,13 @@
 import { Button as ButtonComponent } from 'antd';
 import styled from 'styled-components';
 
+export const RightActionContainer = styled.div`
+	&&& {
+		display: flex;
+		align-items: center;
+	}
+`;
+
 export const ButtonContainer = styled.div`
 	&&& {
 		display: flex;

frontend/src/container/AllError/index.tsx

@@ -1,31 +1,85 @@
-import { notification, Table, Tooltip, Typography } from 'antd';
+import { notification, Table, TableProps, Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import getAll from 'api/errors/getAll';
+import getErrorCounts from 'api/errors/getErrorCounts';
 import ROUTES from 'constants/routes';
 import dayjs from 'dayjs';
-import React, { useEffect } from 'react';
+import createQueryParams from 'lib/createQueryParams';
+import history from 'lib/history';
+import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useQuery } from 'react-query';
+import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { AppState } from 'store/reducers';
-import { Exception } from 'types/api/errors/getAll';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { Exception, PayloadProps } from 'types/api/errors/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import {
+	getDefaultOrder,
+	getNanoSeconds,
+	getOffSet,
+	getOrder,
+	getOrderParams,
+	getUpdatePageSize,
+	urlKey,
+} from './utils';
+
 function AllErrors(): JSX.Element {
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+	const { maxTime, minTime, loading } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
+	const { search, pathname } = useLocation();
+	const params = useMemo(() => new URLSearchParams(search), [search]);
 
 	const { t } = useTranslation(['common']);
 
-	const { isLoading, data } = useQuery(['getAllError', [maxTime, minTime]], {
-		queryFn: () =>
-			getAll({
-				end: maxTime,
-				start: minTime,
-			}),
-	});
+	const updatedOrder = getOrder(params.get(urlKey.order));
+	const getUpdatedOffset = getOffSet(params.get(urlKey.offset));
+	const getUpdatedParams = getOrderParams(params.get(urlKey.orderParam));
+	const getUpdatedPageSize = getUpdatePageSize(params.get(urlKey.pageSize));
+
+	const updatedPath = useMemo(
+		() =>
+			`${pathname}?${createQueryParams({
+				order: updatedOrder,
+				offset: getUpdatedOffset,
+				orderParam: getUpdatedParams,
+				pageSize: getUpdatedPageSize,
+			})}`,
+		[
+			pathname,
+			updatedOrder,
+			getUpdatedOffset,
+			getUpdatedParams,
+			getUpdatedPageSize,
+		],
+	);
+
+	const [{ isLoading, data }, errorCountResponse] = useQueries([
+		{
+			queryKey: ['getAllErrors', updatedPath, maxTime, minTime],
+			queryFn: (): Promise<SuccessResponse<PayloadProps> | ErrorResponse> =>
+				getAll({
+					end: maxTime,
+					start: minTime,
+					order: updatedOrder,
+					limit: getUpdatedPageSize,
+					offset: getUpdatedOffset,
+					orderParam: getUpdatedParams,
+				}),
+			enabled: !loading,
+		},
+		{
+			queryKey: ['getErrorCounts', maxTime, minTime],
+			queryFn: (): Promise<ErrorResponse | SuccessResponse<number>> =>
+				getErrorCounts({
+					end: maxTime,
+					start: minTime,
+				}),
+		},
+	]);
 
 	useEffect(() => {
 		if (data?.error) {
@@ -35,11 +89,9 @@ function AllErrors(): JSX.Element {
 		}
 	}, [data?.error, data?.payload, t]);
 
-	const getDateValue = (value: string): JSX.Element => {
-		return (
-			<Typography>{dayjs(value).format('DD/MM/YYYY HH:mm:ss A')}</Typography>
-		);
-	};
+	const getDateValue = (value: string): JSX.Element => (
+		<Typography>{dayjs(value).format('DD/MM/YYYY HH:mm:ss A')}</Typography>
+	);
 
 	const columns: ColumnsType<Exception> = [
 		{
@@ -49,14 +101,20 @@ function AllErrors(): JSX.Element {
 			render: (value, record): JSX.Element => (
 				<Tooltip overlay={(): JSX.Element => value}>
 					<Link
-						to={`${ROUTES.ERROR_DETAIL}?serviceName=${record.serviceName}&errorType=${record.exceptionType}`}
+						to={`${ROUTES.ERROR_DETAIL}?groupId=${
+							record.groupID
+						}&timestamp=${getNanoSeconds(record.lastSeen)}`}
 					>
 						{value}
 					</Link>
 				</Tooltip>
 			),
-			sorter: (a, b): number =>
-				a.exceptionType.charCodeAt(0) - b.exceptionType.charCodeAt(0),
+			sorter: true,
+			defaultSortOrder: getDefaultOrder(
+				getUpdatedParams,
+				updatedOrder,
+				'exceptionType',
+			),
 		},
 		{
 			title: 'Error Message',
@@ -78,39 +136,86 @@ function AllErrors(): JSX.Element {
 			title: 'Count',
 			dataIndex: 'exceptionCount',
 			key: 'exceptionCount',
-			sorter: (a, b): number => a.exceptionCount - b.exceptionCount,
+			sorter: true,
+			defaultSortOrder: getDefaultOrder(
+				getUpdatedParams,
+				updatedOrder,
+				'exceptionCount',
+			),
 		},
 		{
 			title: 'Last Seen',
 			dataIndex: 'lastSeen',
 			key: 'lastSeen',
 			render: getDateValue,
-			sorter: (a, b): number =>
-				dayjs(b.lastSeen).isBefore(dayjs(a.lastSeen)) === true ? 1 : 0,
+			sorter: true,
+			defaultSortOrder: getDefaultOrder(
+				getUpdatedParams,
+				updatedOrder,
+				'lastSeen',
+			),
 		},
 		{
 			title: 'First Seen',
 			dataIndex: 'firstSeen',
 			key: 'firstSeen',
 			render: getDateValue,
-			sorter: (a, b): number =>
-				dayjs(b.firstSeen).isBefore(dayjs(a.firstSeen)) === true ? 1 : 0,
+			sorter: true,
+			defaultSortOrder: getDefaultOrder(
+				getUpdatedParams,
+				updatedOrder,
+				'firstSeen',
+			),
 		},
 		{
 			title: 'Application',
 			dataIndex: 'serviceName',
 			key: 'serviceName',
-			sorter: (a, b): number =>
-				a.serviceName.charCodeAt(0) - b.serviceName.charCodeAt(0),
+			sorter: true,
+			defaultSortOrder: getDefaultOrder(
+				getUpdatedParams,
+				updatedOrder,
+				'serviceName',
+			),
 		},
 	];
 
+	const onChangeHandler: TableProps<Exception>['onChange'] = (
+		paginations,
+		_,
+		sorter,
+	) => {
+		if (!Array.isArray(sorter)) {
+			const { pageSize = 0, current = 0 } = paginations;
+			const { columnKey = '', order } = sorter;
+			const updatedOrder = order === 'ascend' ? 'ascending' : 'descending';
+
+			history.replace(
+				`${pathname}?${createQueryParams({
+					order: updatedOrder,
+					offset: (current - 1) * pageSize,
+					orderParam: columnKey,
+					pageSize,
+				})}`,
+			);
+		}
+	};
+
 	return (
 		<Table
 			tableLayout="fixed"
 			dataSource={data?.payload as Exception[]}
 			columns={columns}
-			loading={isLoading || false}
+			rowKey="firstSeen"
+			loading={isLoading || false || errorCountResponse.status === 'loading'}
+			pagination={{
+				pageSize: getUpdatedPageSize,
+				responsive: true,
+				current: getUpdatedOffset / 10 + 1,
+				position: ['bottomLeft'],
+				total: errorCountResponse.data?.payload || 0,
+			}}
+			onChange={onChangeHandler}
 		/>
 	);
 }

frontend/src/container/AllError/utils.test.ts

@@ -0,0 +1,109 @@
+import { Order, OrderBy } from 'types/api/errors/getAll';
+
+import {
+	getDefaultOrder,
+	getLimit,
+	getOffSet,
+	getOrder,
+	getOrderParams,
+	getUpdatePageSize,
+	isOrder,
+	isOrderParams,
+} from './utils';
+
+describe('Error utils', () => {
+	test('Valid OrderBy Params', () => {
+		expect(isOrderParams('serviceName')).toBe(true);
+		expect(isOrderParams('exceptionCount')).toBe(true);
+		expect(isOrderParams('lastSeen')).toBe(true);
+		expect(isOrderParams('firstSeen')).toBe(true);
+		expect(isOrderParams('exceptionType')).toBe(true);
+	});
+
+	test('Invalid OrderBy Params', () => {
+		expect(isOrderParams('invalid')).toBe(false);
+		expect(isOrderParams(null)).toBe(false);
+		expect(isOrderParams('')).toBe(false);
+	});
+
+	test('Valid Order', () => {
+		expect(isOrder('ascending')).toBe(true);
+		expect(isOrder('descending')).toBe(true);
+	});
+
+	test('Invalid Order', () => {
+		expect(isOrder('invalid')).toBe(false);
+		expect(isOrder(null)).toBe(false);
+		expect(isOrder('')).toBe(false);
+	});
+
+	test('Default Order', () => {
+		const OrderBy: OrderBy[] = [
+			'exceptionCount',
+			'exceptionType',
+			'firstSeen',
+			'lastSeen',
+			'serviceName',
+		];
+
+		const order: Order[] = ['ascending', 'descending'];
+
+		const ascOrd = order[0];
+		const desOrd = order[1];
+
+		OrderBy.forEach((order) => {
+			expect(getDefaultOrder(order, ascOrd, order)).toBe('ascend');
+			expect(getDefaultOrder(order, desOrd, order)).toBe('descend');
+		});
+	});
+
+	test('Limit', () => {
+		expect(getLimit(null)).toBe(10);
+		expect(getLimit('')).toBe(10);
+		expect(getLimit('0')).toBe(0);
+		expect(getLimit('1')).toBe(1);
+		expect(getLimit('10')).toBe(10);
+		expect(getLimit('11')).toBe(11);
+		expect(getLimit('100')).toBe(100);
+		expect(getLimit('101')).toBe(101);
+	});
+
+	test('Update Page Size', () => {
+		expect(getUpdatePageSize(null)).toBe(10);
+		expect(getUpdatePageSize('')).toBe(10);
+		expect(getUpdatePageSize('0')).toBe(0);
+		expect(getUpdatePageSize('1')).toBe(1);
+		expect(getUpdatePageSize('10')).toBe(10);
+		expect(getUpdatePageSize('11')).toBe(11);
+		expect(getUpdatePageSize('100')).toBe(100);
+		expect(getUpdatePageSize('101')).toBe(101);
+	});
+
+	test('Order Params', () => {
+		expect(getOrderParams(null)).toBe('serviceName');
+		expect(getOrderParams('')).toBe('serviceName');
+		expect(getOrderParams('serviceName')).toBe('serviceName');
+		expect(getOrderParams('exceptionCount')).toBe('exceptionCount');
+		expect(getOrderParams('lastSeen')).toBe('lastSeen');
+		expect(getOrderParams('firstSeen')).toBe('firstSeen');
+		expect(getOrderParams('exceptionType')).toBe('exceptionType');
+	});
+
+	test('OffSet', () => {
+		expect(getOffSet(null)).toBe(0);
+		expect(getOffSet('')).toBe(0);
+		expect(getOffSet('0')).toBe(0);
+		expect(getOffSet('1')).toBe(1);
+		expect(getOffSet('10')).toBe(10);
+		expect(getOffSet('11')).toBe(11);
+		expect(getOffSet('100')).toBe(100);
+		expect(getOffSet('101')).toBe(101);
+	});
+
+	test('Order', () => {
+		expect(getOrder(null)).toBe('ascending');
+		expect(getOrder('')).toBe('ascending');
+		expect(getOrder('ascending')).toBe('ascending');
+		expect(getOrder('descending')).toBe('descending');
+	});
+});

frontend/src/container/AllError/utils.ts

@@ -0,0 +1,89 @@
+import { SortOrder } from 'antd/lib/table/interface';
+import Timestamp from 'timestamp-nano';
+import { Order, OrderBy } from 'types/api/errors/getAll';
+
+export const isOrder = (order: string | null): order is Order =>
+	!!(order === 'ascending' || order === 'descending');
+
+export const urlKey = {
+	order: 'order',
+	offset: 'offset',
+	orderParam: 'orderParam',
+	pageSize: 'pageSize',
+};
+
+export const isOrderParams = (orderBy: string | null): orderBy is OrderBy => {
+	return !!(
+		orderBy === 'serviceName' ||
+		orderBy === 'exceptionCount' ||
+		orderBy === 'lastSeen' ||
+		orderBy === 'firstSeen' ||
+		orderBy === 'exceptionType'
+	);
+};
+
+export const getOrder = (order: string | null): Order => {
+	if (isOrder(order)) {
+		return order;
+	}
+	return 'ascending';
+};
+
+export const getLimit = (limit: string | null): number => {
+	if (limit) {
+		return parseInt(limit, 10);
+	}
+	return 10;
+};
+
+export const getOffSet = (offset: string | null): number => {
+	if (offset && typeof offset === 'string') {
+		return parseInt(offset, 10);
+	}
+	return 0;
+};
+
+export const getOrderParams = (order: string | null): OrderBy => {
+	if (isOrderParams(order)) {
+		return order;
+	}
+	return 'serviceName';
+};
+
+export const getDefaultOrder = (
+	orderBy: OrderBy,
+	order: Order,
+	data: OrderBy,
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+): SortOrder | undefined => {
+	if (orderBy === 'exceptionType' && data === 'exceptionType') {
+		return order === 'ascending' ? 'ascend' : 'descend';
+	}
+	if (orderBy === 'serviceName' && data === 'serviceName') {
+		return order === 'ascending' ? 'ascend' : 'descend';
+	}
+	if (orderBy === 'exceptionCount' && data === 'exceptionCount') {
+		return order === 'ascending' ? 'ascend' : 'descend';
+	}
+	if (orderBy === 'lastSeen' && data === 'lastSeen') {
+		return order === 'ascending' ? 'ascend' : 'descend';
+	}
+	if (orderBy === 'firstSeen' && data === 'firstSeen') {
+		return order === 'ascending' ? 'ascend' : 'descend';
+	}
+	return undefined;
+};
+
+export const getNanoSeconds = (date: string): string => {
+	return (
+		Math.floor(new Date(date).getTime() / 1e3).toString() +
+		Timestamp.fromString(date).getNano().toString()
+	);
+};
+
+export const getUpdatePageSize = (pageSize: string | null): number => {
+	if (pageSize) {
+		return parseInt(pageSize, 10);
+	}
+	return 10;
+};

frontend/src/container/CreateAlertRule/index.tsx

@@ -0,0 +1,22 @@
+import { Form } from 'antd';
+import FormAlertRules from 'container/FormAlertRules';
+import React from 'react';
+import { AlertDef } from 'types/api/alerts/def';
+
+function CreateRules({ initialValue }: CreateRulesProps): JSX.Element {
+	const [formInstance] = Form.useForm();
+
+	return (
+		<FormAlertRules
+			formInstance={formInstance}
+			initialValue={initialValue}
+			ruleId={0}
+		/>
+	);
+}
+
+interface CreateRulesProps {
+	initialValue: AlertDef;
+}
+
+export default CreateRules;

frontend/src/container/EditRules/index.tsx

@@ -1,102 +1,23 @@
-import { SaveFilled } from '@ant-design/icons';
-import { Button, notification } from 'antd';
-import put from 'api/alerts/put';
-import Editor from 'components/Editor';
-import ROUTES from 'constants/routes';
-import { State } from 'hooks/useFetch';
-import history from 'lib/history';
-import React, { useCallback, useState } from 'react';
-import { PayloadProps } from 'types/api/alerts/get';
-import { PayloadProps as PutPayloadProps } from 'types/api/alerts/put';
+import { Form } from 'antd';
+import FormAlertRules from 'container/FormAlertRules';
+import React from 'react';
+import { AlertDef } from 'types/api/alerts/def';
 
-import { ButtonContainer } from './styles';
-
-function EditRules({ initialData, ruleId }: EditRulesProps): JSX.Element {
-	const [value, setEditorValue] = useState<string>(initialData);
-	const [notifications, Element] = notification.useNotification();
-	const [editButtonState, setEditButtonState] = useState<State<PutPayloadProps>>(
-		{
-			error: false,
-			errorMessage: '',
-			loading: false,
-			success: false,
-			payload: undefined,
-		},
-	);
-
-	const onClickHandler = useCallback(async () => {
-		try {
-			setEditButtonState((state) => ({
-				...state,
-				loading: true,
-			}));
-			const response = await put({
-				data: value,
-				id: parseInt(ruleId, 10),
-			});
-
-			if (response.statusCode === 200) {
-				setEditButtonState((state) => ({
-					...state,
-					loading: false,
-					payload: response.payload,
-				}));
-
-				notifications.success({
-					message: 'Success',
-					description: 'Congrats. The alert was Edited correctly.',
-				});
-
-				setTimeout(() => {
-					history.push(ROUTES.LIST_ALL_ALERT);
-				}, 2000);
-			} else {
-				setEditButtonState((state) => ({
-					...state,
-					loading: false,
-					errorMessage: response.error || 'Something went wrong',
-					error: true,
-				}));
-
-				notifications.error({
-					message: 'Error',
-					description:
-						response.error ||
-						'Oops! Some issue occured in editing the alert please try again or contact support@signoz.io',
-				});
-			}
-		} catch (error) {
-			notifications.error({
-				message: 'Error',
-				description:
-					'Oops! Some issue occured in editing the alert please try again or contact support@signoz.io',
-			});
-		}
-	}, [value, ruleId, notifications]);
+function EditRules({ initialValue, ruleId }: EditRulesProps): JSX.Element {
+	const [formInstance] = Form.useForm();
 
 	return (
-		<>
-			{Element}
-
-			<Editor onChange={(value): void => setEditorValue(value)} value={value} />
-
-			<ButtonContainer>
-				<Button
-					loading={editButtonState.loading || false}
-					disabled={editButtonState.loading || false}
-					icon={<SaveFilled />}
-					onClick={onClickHandler}
-				>
-					Save
-				</Button>
-			</ButtonContainer>
-		</>
+		<FormAlertRules
+			formInstance={formInstance}
+			initialValue={initialValue}
+			ruleId={ruleId}
+		/>
 	);
 }
 
 interface EditRulesProps {
-	initialData: PayloadProps['data'];
-	ruleId: string;
+	initialValue: AlertDef;
+	ruleId: number;
 }
 
 export default EditRules;

frontend/src/container/ErrorDetails/index.tsx

@@ -1,25 +1,49 @@
 import { Button, Divider, notification, Space, Table, Typography } from 'antd';
+import getNextPrevId from 'api/errors/getNextPrevId';
 import Editor from 'components/Editor';
+import { getNanoSeconds } from 'container/AllError/utils';
 import dayjs from 'dayjs';
 import history from 'lib/history';
+import { urlKey } from 'pages/ErrorDetails/utils';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { PayloadProps as GetByErrorTypeAndServicePayload } from 'types/api/errors/getByErrorTypeAndService';
-import { PayloadProps } from 'types/api/errors/getById';
 
 import { DashedContainer, EditorContainer, EventContainer } from './styles';
 
 function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 	const { idPayload } = props;
-	const [isLoading, setLoading] = useState<boolean>(false);
 	const { t } = useTranslation(['errorDetails', 'common']);
-
 	const { search } = useLocation();
-	const params = new URLSearchParams(search);
-	const queryErrorId = params.get('errorId');
-	const serviceName = params.get('serviceName');
-	const errorType = params.get('errorType');
+
+	const params = useMemo(() => new URLSearchParams(search), [search]);
+
+	const errorId = params.get(urlKey.errorId);
+	const serviceName = params.get(urlKey.serviceName);
+	const errorType = params.get(urlKey.exceptionType);
+	const timestamp = params.get(urlKey.timestamp);
+
+	const { data: nextPrevData, status: nextPrevStatus } = useQuery(
+		[
+			idPayload.errorId,
+			idPayload.groupID,
+			idPayload.timestamp,
+			errorId,
+			serviceName,
+			errorType,
+			timestamp,
+		],
+		{
+			queryFn: () =>
+				getNextPrevId({
+					errorID: errorId || idPayload.errorId,
+					groupID: idPayload.groupID,
+					timestamp: timestamp || getNanoSeconds(idPayload.timestamp),
+				}),
+		},
+	);
 
 	const errorDetail = idPayload;
 
@@ -48,34 +72,32 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 			'errorId',
 			'timestamp',
 			'exceptionMessage',
-			'newerErrorId',
-			'olderErrorId',
+			'exceptionEscaped',
 		],
 		[],
 	);
 
-	const onClickErrorIdHandler = async (id: string): Promise<void> => {
+	const onClickErrorIdHandler = async (
+		id: string,
+		timestamp: string,
+	): Promise<void> => {
 		try {
-			setLoading(true);
-
 			if (id.length === 0) {
 				notification.error({
 					message: 'Error Id cannot be empty',
 				});
-				setLoading(false);
 				return;
 			}
 
-			setLoading(false);
-
-			history.push(
-				`${history.location.pathname}?errorId=${id}&serviceName=${serviceName}&errorType=${errorType}`,
+			history.replace(
+				`${history.location.pathname}?&groupId=${
+					idPayload.groupID
+				}&timestamp=${getNanoSeconds(timestamp)}&errorId=${id}`,
 			);
 		} catch (error) {
 			notification.error({
 				message: t('something_went_wrong'),
 			});
-			setLoading(false);
 		}
 	};
 
@@ -106,25 +128,25 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 				<div>
 					<Space align="end" direction="horizontal">
 						<Button
-							loading={isLoading}
-							disabled={
-								errorDetail.olderErrorId.length === 0 ||
-								queryErrorId === errorDetail.olderErrorId
-							}
+							loading={nextPrevStatus === 'loading'}
+							disabled={nextPrevData?.payload?.prevErrorID.length === 0}
 							onClick={(): Promise<void> =>
-								onClickErrorIdHandler(errorDetail.olderErrorId)
+								onClickErrorIdHandler(
+									nextPrevData?.payload?.prevErrorID || '',
+									nextPrevData?.payload?.prevTimestamp || '',
+								)
 							}
 						>
 							{t('older')}
 						</Button>
 						<Button
-							loading={isLoading}
-							disabled={
-								errorDetail.newerErrorId.length === 0 ||
-								queryErrorId === errorDetail.newerErrorId
-							}
+							loading={nextPrevStatus === 'loading'}
+							disabled={nextPrevData?.payload?.nextErrorID.length === 0}
 							onClick={(): Promise<void> =>
-								onClickErrorIdHandler(errorDetail.newerErrorId)
+								onClickErrorIdHandler(
+									nextPrevData?.payload?.nextErrorID || '',
+									nextPrevData?.payload?.nextTimestamp || '',
+								)
 							}
 						>
 							{t('newer')}
@@ -153,7 +175,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 }
 
 interface ErrorDetailsProps {
-	idPayload: PayloadProps;
+	idPayload: GetByErrorTypeAndServicePayload;
 }
 
 export default ErrorDetails;

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -0,0 +1,116 @@
+import { Select } from 'antd';
+import FormItem from 'antd/lib/form/FormItem';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { AlertDef, Labels } from 'types/api/alerts/def';
+
+import ChannelSelect from './ChannelSelect';
+import LabelSelect from './labels';
+import {
+	ChannelSelectTip,
+	FormContainer,
+	FormItemMedium,
+	InputSmall,
+	SeveritySelect,
+	StepHeading,
+	TextareaMedium,
+} from './styles';
+
+const { Option } = Select;
+
+interface BasicInfoProps {
+	alertDef: AlertDef;
+	setAlertDef: (a: AlertDef) => void;
+}
+
+function BasicInfo({ alertDef, setAlertDef }: BasicInfoProps): JSX.Element {
+	// init namespace for translations
+	const { t } = useTranslation('alerts');
+
+	return (
+		<>
+			<StepHeading> {t('alert_form_step3')} </StepHeading>
+			<FormContainer>
+				<FormItem
+					label={t('field_severity')}
+					labelAlign="left"
+					name={['labels', 'severity']}
+				>
+					<SeveritySelect
+						defaultValue="critical"
+						onChange={(value: unknown | string): void => {
+							const s = (value as string) || 'critical';
+							setAlertDef({
+								...alertDef,
+								labels: {
+									...alertDef.labels,
+									severity: s,
+								},
+							});
+						}}
+					>
+						<Option value="critical">{t('option_critical')}</Option>
+						<Option value="error">{t('option_error')}</Option>
+						<Option value="warning">{t('option_warning')}</Option>
+						<Option value="info">{t('option_info')}</Option>
+					</SeveritySelect>
+				</FormItem>
+
+				<FormItem label={t('field_alert_name')} labelAlign="left" name="alert">
+					<InputSmall
+						onChange={(e): void => {
+							setAlertDef({
+								...alertDef,
+								alert: e.target.value,
+							});
+						}}
+					/>
+				</FormItem>
+				<FormItem
+					label={t('field_alert_desc')}
+					labelAlign="left"
+					name={['annotations', 'description']}
+				>
+					<TextareaMedium
+						onChange={(e): void => {
+							setAlertDef({
+								...alertDef,
+								annotations: {
+									...alertDef.annotations,
+									description: e.target.value,
+								},
+							});
+						}}
+					/>
+				</FormItem>
+				<FormItemMedium label={t('field_labels')}>
+					<LabelSelect
+						onSetLabels={(l: Labels): void => {
+							setAlertDef({
+								...alertDef,
+								labels: {
+									...l,
+								},
+							});
+						}}
+						initialValues={alertDef.labels}
+					/>
+				</FormItemMedium>
+				<FormItemMedium label="Notification Channels">
+					<ChannelSelect
+						currentValue={alertDef.preferredChannels}
+						onSelectChannels={(s: string[]): void => {
+							setAlertDef({
+								...alertDef,
+								preferredChannels: s,
+							});
+						}}
+					/>
+					<ChannelSelectTip> {t('channel_select_tooltip')}</ChannelSelectTip>
+				</FormItemMedium>
+			</FormContainer>
+		</>
+	);
+}
+
+export default BasicInfo;

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

@@ -0,0 +1,70 @@
+import { notification, Select } from 'antd';
+import getChannels from 'api/channels/getAll';
+import useFetch from 'hooks/useFetch';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { StyledSelect } from './styles';
+
+export interface ChannelSelectProps {
+	currentValue?: string[];
+	onSelectChannels: (s: string[]) => void;
+}
+
+function ChannelSelect({
+	currentValue,
+	onSelectChannels,
+}: ChannelSelectProps): JSX.Element | null {
+	// init namespace for translations
+	const { t } = useTranslation('alerts');
+
+	const { loading, payload, error, errorMessage } = useFetch(getChannels);
+
+	const handleChange = (value: string[]): void => {
+		onSelectChannels(value);
+	};
+
+	if (error && errorMessage !== '') {
+		notification.error({
+			message: 'Error',
+			description: errorMessage,
+		});
+	}
+	const renderOptions = (): React.ReactNode[] => {
+		const children: React.ReactNode[] = [];
+
+		if (loading || payload === undefined || payload.length === 0) {
+			return children;
+		}
+
+		payload.forEach((o) => {
+			children.push(
+				<Select.Option key={o.id} value={o.name}>
+					{o.name}
+				</Select.Option>,
+			);
+		});
+
+		return children;
+	};
+	return (
+		<StyledSelect
+			status={error ? 'error' : ''}
+			mode="multiple"
+			style={{ width: '100%' }}
+			placeholder={t('placeholder_channel_select')}
+			value={currentValue}
+			onChange={(value): void => {
+				handleChange(value as string[]);
+			}}
+			optionLabelProp="label"
+		>
+			{renderOptions()}
+		</StyledSelect>
+	);
+}
+
+ChannelSelect.defaultProps = {
+	currentValue: [],
+};
+export default ChannelSelect;

frontend/src/container/FormAlertRules/ChannelSelect/styles.ts

@@ -0,0 +1,6 @@
+import { Select } from 'antd';
+import styled from 'styled-components';
+
+export const StyledSelect = styled(Select)`
+	border-radius: 4px;
+`;

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

@@ -0,0 +1,123 @@
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { StaticLineProps } from 'components/Graph';
+import GridGraphComponent from 'container/GridGraphComponent';
+import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
+import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
+import { Time } from 'container/TopNav/DateTimeSelection/config';
+import getChartData from 'lib/getChartData';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
+import { GetMetricQueryRange } from 'store/actions/dashboard/getQueryResults';
+import { Query } from 'types/api/dashboard/getAll';
+import { EQueryType } from 'types/common/dashboard';
+
+import { ChartContainer, FailedMessageContainer } from './styles';
+
+export interface ChartPreviewProps {
+	name: string;
+	query: Query | undefined;
+	graphType?: GRAPH_TYPES;
+	selectedTime?: timePreferenceType;
+	selectedInterval?: Time;
+	headline?: JSX.Element;
+	threshold?: number | undefined;
+}
+
+function ChartPreview({
+	name,
+	query,
+	graphType = 'TIME_SERIES',
+	selectedTime = 'GLOBAL_TIME',
+	selectedInterval = '5min',
+	headline,
+	threshold,
+}: ChartPreviewProps): JSX.Element | null {
+	const { t } = useTranslation('alerts');
+	const staticLine: StaticLineProps | undefined =
+		threshold !== undefined
+			? {
+					yMin: threshold,
+					yMax: threshold,
+					borderColor: '#f14',
+					borderWidth: 1,
+					lineText: `${t('preview_chart_threshold_label')} (y=${threshold})`,
+					textColor: '#f14',
+			  }
+			: undefined;
+
+	const queryKey = JSON.stringify(query);
+	const queryResponse = useQuery({
+		queryKey: ['chartPreview', queryKey, selectedInterval],
+		queryFn: () =>
+			GetMetricQueryRange({
+				query: query || {
+					queryType: 1,
+					promQL: [],
+					metricsBuilder: {
+						formulas: [],
+						queryBuilder: [],
+					},
+					clickHouse: [],
+				},
+				globalSelectedInterval: selectedInterval,
+				graphType,
+				selectedTime,
+			}),
+		enabled:
+			query != null &&
+			((query.queryType === EQueryType.PROM &&
+				query.promQL?.length > 0 &&
+				query.promQL[0].query !== '') ||
+				(query.queryType === EQueryType.QUERY_BUILDER &&
+					query.metricsBuilder?.queryBuilder?.length > 0 &&
+					query.metricsBuilder?.queryBuilder[0].metricName !== '')),
+	});
+
+	const chartDataSet = queryResponse.isError
+		? null
+		: getChartData({
+				queryData: [
+					{
+						queryData: queryResponse?.data?.payload?.data?.result
+							? queryResponse?.data?.payload?.data?.result
+							: [],
+					},
+				],
+		  });
+
+	return (
+		<ChartContainer>
+			{headline}
+			{(queryResponse?.data?.error || queryResponse?.isError) && (
+				<FailedMessageContainer color="red" title="Failed to refresh the chart">
+					<InfoCircleOutlined />{' '}
+					{queryResponse?.data?.error ||
+						queryResponse?.error ||
+						t('preview_chart_unexpected_error')}
+				</FailedMessageContainer>
+			)}
+
+			{chartDataSet && !queryResponse.isError && (
+				<GridGraphComponent
+					title={name}
+					data={chartDataSet}
+					isStacked
+					GRAPH_TYPES={graphType || 'TIME_SERIES'}
+					name={name || 'Chart Preview'}
+					staticLine={staticLine}
+				/>
+			)}
+		</ChartContainer>
+	);
+}
+
+ChartPreview.defaultProps = {
+	graphType: 'TIME_SERIES',
+	selectedTime: 'GLOBAL_TIME',
+	selectedInterval: '5min',
+	headline: undefined,
+	threshold: undefined,
+};
+
+export default ChartPreview;

frontend/src/container/FormAlertRules/ChartPreview/styles.ts

@@ -0,0 +1,28 @@
+import { Card, Tooltip } from 'antd';
+import styled from 'styled-components';
+
+export const NotFoundContainer = styled.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 55vh;
+`;
+
+export const FailedMessageContainer = styled(Tooltip)`
+	position: absolute;
+	top: 10px;
+	left: 10px;
+`;
+
+export const ChartContainer = styled(Card)`
+	border-radius: 4px;
+	&&& {
+		position: relative;
+	}
+
+	.ant-card-body {
+		padding: 1.5rem 0;
+		height: 57vh;
+		/* padding-bottom: 2rem; */
+	}
+`;

frontend/src/container/FormAlertRules/PromqlSection.tsx

@@ -0,0 +1,49 @@
+import PromQLQueryBuilder from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query';
+import { IPromQLQueryHandleChange } from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/types';
+import React from 'react';
+import { IPromQueries } from 'types/api/alerts/compositeQuery';
+
+function PromqlSection({
+	promQueries,
+	setPromQueries,
+}: PromqlSectionProps): JSX.Element {
+	const handlePromQLQueryChange = ({
+		query,
+		legend,
+		toggleDelete,
+	}: IPromQLQueryHandleChange): void => {
+		let promQuery = promQueries.A;
+
+		// todo(amol): how to remove query, make it null?
+		if (query) promQuery.query = query;
+		if (legend) promQuery.legend = legend;
+		if (toggleDelete) {
+			promQuery = {
+				query: '',
+				legend: '',
+				name: 'A',
+				disabled: false,
+			};
+		}
+		setPromQueries({
+			A: {
+				...promQuery,
+			},
+		});
+	};
+	return (
+		<PromQLQueryBuilder
+			key="A"
+			queryIndex="A"
+			queryData={{ ...promQueries?.A, name: 'A' }}
+			handleQueryChange={handlePromQLQueryChange}
+		/>
+	);
+}
+
+interface PromqlSectionProps {
+	promQueries: IPromQueries;
+	setPromQueries: (p: IPromQueries) => void;
+}
+
+export default PromqlSection;

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -0,0 +1,288 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { notification, Tabs } from 'antd';
+import MetricsBuilderFormula from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/formula';
+import MetricsBuilder from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/query';
+import {
+	IQueryBuilderFormulaHandleChange,
+	IQueryBuilderQueryHandleChange,
+} from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/types';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+	IFormulaQueries,
+	IMetricQueries,
+	IPromQueries,
+} from 'types/api/alerts/compositeQuery';
+import { EAggregateOperator, EQueryType } from 'types/common/dashboard';
+
+import PromqlSection from './PromqlSection';
+import { FormContainer, QueryButton, StepHeading } from './styles';
+import { toIMetricsBuilderQuery } from './utils';
+
+const { TabPane } = Tabs;
+function QuerySection({
+	queryCategory,
+	setQueryCategory,
+	metricQueries,
+	setMetricQueries,
+	formulaQueries,
+	setFormulaQueries,
+	promQueries,
+	setPromQueries,
+}: QuerySectionProps): JSX.Element {
+	// init namespace for translations
+	const { t } = useTranslation('alerts');
+
+	const handleQueryCategoryChange = (s: string): void => {
+		if (
+			parseInt(s, 10) === EQueryType.PROM &&
+			(!promQueries || Object.keys(promQueries).length === 0)
+		) {
+			setPromQueries({
+				A: {
+					query: '',
+					stats: '',
+					name: 'A',
+					legend: '',
+					disabled: false,
+				},
+			});
+		}
+
+		setQueryCategory(parseInt(s, 10));
+	};
+
+	const getNextQueryLabel = useCallback((): string => {
+		let maxAscii = 0;
+
+		Object.keys(metricQueries).forEach((key) => {
+			const n = key.charCodeAt(0);
+			if (n > maxAscii) {
+				maxAscii = n - 64;
+			}
+		});
+
+		return String.fromCharCode(64 + maxAscii + 1);
+	}, [metricQueries]);
+
+	const handleFormulaChange = ({
+		formulaIndex,
+		expression,
+		toggleDisable,
+		toggleDelete,
+	}: IQueryBuilderFormulaHandleChange): void => {
+		const allFormulas = formulaQueries;
+		const current = allFormulas[formulaIndex];
+		if (expression) {
+			current.expression = expression;
+		}
+
+		if (toggleDisable) {
+			current.disabled = !current.disabled;
+		}
+
+		if (toggleDelete) {
+			delete allFormulas[formulaIndex];
+		} else {
+			allFormulas[formulaIndex] = current;
+		}
+
+		setFormulaQueries({
+			...allFormulas,
+		});
+	};
+
+	const handleMetricQueryChange = ({
+		queryIndex,
+		aggregateFunction,
+		metricName,
+		tagFilters,
+		groupBy,
+		legend,
+		toggleDisable,
+		toggleDelete,
+	}: IQueryBuilderQueryHandleChange): void => {
+		const allQueries = metricQueries;
+		const current = metricQueries[queryIndex];
+		if (aggregateFunction) {
+			current.aggregateOperator = aggregateFunction;
+		}
+		if (metricName) {
+			current.metricName = metricName;
+		}
+
+		if (tagFilters && current.tagFilters) {
+			current.tagFilters.items = tagFilters;
+		}
+
+		if (legend) {
+			current.legend = legend;
+		}
+
+		if (groupBy) {
+			current.groupBy = groupBy;
+		}
+
+		if (toggleDisable) {
+			current.disabled = !current.disabled;
+		}
+
+		if (toggleDelete) {
+			delete allQueries[queryIndex];
+		} else {
+			allQueries[queryIndex] = current;
+		}
+
+		setMetricQueries({
+			...allQueries,
+		});
+	};
+
+	const addMetricQuery = useCallback(() => {
+		if (Object.keys(metricQueries).length > 5) {
+			notification.error({
+				message: t('metric_query_max_limit'),
+			});
+			return;
+		}
+
+		const queryLabel = getNextQueryLabel();
+
+		const queries = metricQueries;
+		queries[queryLabel] = {
+			name: queryLabel,
+			queryName: queryLabel,
+			metricName: '',
+			formulaOnly: false,
+			aggregateOperator: EAggregateOperator.NOOP,
+			legend: '',
+			tagFilters: {
+				op: 'AND',
+				items: [],
+			},
+			groupBy: [],
+			disabled: false,
+			expression: queryLabel,
+		};
+		setMetricQueries({ ...queries });
+	}, [t, getNextQueryLabel, metricQueries, setMetricQueries]);
+
+	const addFormula = useCallback(() => {
+		// defaulting to F1 as only one formula is supported
+		// in alert definition
+		const queryLabel = 'F1';
+
+		const formulas = formulaQueries;
+		formulas[queryLabel] = {
+			queryName: queryLabel,
+			name: queryLabel,
+			formulaOnly: true,
+			expression: 'A',
+			disabled: false,
+		};
+
+		setFormulaQueries({ ...formulas });
+	}, [formulaQueries, setFormulaQueries]);
+
+	const renderPromqlUI = (): JSX.Element => {
+		return (
+			<PromqlSection promQueries={promQueries} setPromQueries={setPromQueries} />
+		);
+	};
+
+	const renderFormulaButton = (): JSX.Element => {
+		return (
+			<QueryButton onClick={addFormula} icon={<PlusOutlined />}>
+				{t('button_formula')}
+			</QueryButton>
+		);
+	};
+
+	const renderQueryButton = (): JSX.Element => {
+		return (
+			<QueryButton onClick={addMetricQuery} icon={<PlusOutlined />}>
+				{t('button_query')}
+			</QueryButton>
+		);
+	};
+
+	const renderMetricUI = (): JSX.Element => {
+		return (
+			<div>
+				{metricQueries &&
+					Object.keys(metricQueries).map((key: string) => {
+						// todo(amol): need to handle this in fetch
+						const current = metricQueries[key];
+						current.name = key;
+
+						return (
+							<MetricsBuilder
+								key={key}
+								queryIndex={key}
+								queryData={toIMetricsBuilderQuery(current)}
+								selectedGraph="TIME_SERIES"
+								handleQueryChange={handleMetricQueryChange}
+							/>
+						);
+					})}
+
+				{queryCategory !== EQueryType.PROM && renderQueryButton()}
+				<div style={{ marginTop: '1rem' }}>
+					{formulaQueries &&
+						Object.keys(formulaQueries).map((key: string) => {
+							// todo(amol): need to handle this in fetch
+							const current = formulaQueries[key];
+							current.name = key;
+
+							return (
+								<MetricsBuilderFormula
+									key={key}
+									formulaIndex={key}
+									formulaData={current}
+									handleFormulaChange={handleFormulaChange}
+								/>
+							);
+						})}
+					{queryCategory === EQueryType.QUERY_BUILDER &&
+						(!formulaQueries || Object.keys(formulaQueries).length === 0) &&
+						metricQueries &&
+						Object.keys(metricQueries).length > 0 &&
+						renderFormulaButton()}
+				</div>
+			</div>
+		);
+	};
+	return (
+		<>
+			<StepHeading> {t('alert_form_step1')}</StepHeading>
+			<FormContainer>
+				<div style={{ display: 'flex' }}>
+					<Tabs
+						type="card"
+						style={{ width: '100%' }}
+						defaultActiveKey={EQueryType.QUERY_BUILDER.toString()}
+						activeKey={queryCategory.toString()}
+						onChange={handleQueryCategoryChange}
+					>
+						<TabPane tab={t('tab_qb')} key={EQueryType.QUERY_BUILDER.toString()} />
+						<TabPane tab={t('tab_promql')} key={EQueryType.PROM.toString()} />
+					</Tabs>
+				</div>
+				{queryCategory === EQueryType.PROM ? renderPromqlUI() : renderMetricUI()}
+			</FormContainer>
+		</>
+	);
+}
+
+interface QuerySectionProps {
+	queryCategory: EQueryType;
+	setQueryCategory: (n: EQueryType) => void;
+	metricQueries: IMetricQueries;
+	setMetricQueries: (b: IMetricQueries) => void;
+	formulaQueries: IFormulaQueries;
+	setFormulaQueries: (b: IFormulaQueries) => void;
+	promQueries: IPromQueries;
+	setPromQueries: (p: IPromQueries) => void;
+}
+
+export default QuerySection;

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -0,0 +1,177 @@
+import { Select, Typography } from 'antd';
+import FormItem from 'antd/lib/form/FormItem';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+	AlertDef,
+	defaultCompareOp,
+	defaultEvalWindow,
+	defaultMatchType,
+} from 'types/api/alerts/def';
+import { EQueryType } from 'types/common/dashboard';
+
+import {
+	FormContainer,
+	InlineSelect,
+	StepHeading,
+	ThresholdInput,
+} from './styles';
+
+const { Option } = Select;
+
+function RuleOptions({
+	alertDef,
+	setAlertDef,
+	queryCategory,
+}: RuleOptionsProps): JSX.Element {
+	// init namespace for translations
+	const { t } = useTranslation('alerts');
+
+	const handleMatchOptChange = (value: string | unknown): void => {
+		const m = (value as string) || alertDef.condition?.matchType;
+		setAlertDef({
+			...alertDef,
+			condition: {
+				...alertDef.condition,
+				matchType: m,
+			},
+		});
+	};
+
+	const renderCompareOps = (): JSX.Element => {
+		return (
+			<InlineSelect
+				defaultValue={defaultCompareOp}
+				value={alertDef.condition?.op}
+				style={{ minWidth: '120px' }}
+				onChange={(value: string | unknown): void => {
+					const newOp = (value as string) || '';
+
+					setAlertDef({
+						...alertDef,
+						condition: {
+							...alertDef.condition,
+							op: newOp,
+						},
+					});
+				}}
+			>
+				<Option value="1">{t('option_above')}</Option>
+				<Option value="2">{t('option_below')}</Option>
+				<Option value="3">{t('option_equal')}</Option>
+				<Option value="4">{t('option_notequal')}</Option>
+			</InlineSelect>
+		);
+	};
+
+	const renderThresholdMatchOpts = (): JSX.Element => {
+		return (
+			<InlineSelect
+				defaultValue={defaultMatchType}
+				style={{ minWidth: '130px' }}
+				value={alertDef.condition?.matchType}
+				onChange={(value: string | unknown): void => handleMatchOptChange(value)}
+			>
+				<Option value="1">{t('option_atleastonce')}</Option>
+				<Option value="2">{t('option_allthetimes')}</Option>
+				<Option value="3">{t('option_onaverage')}</Option>
+				<Option value="4">{t('option_intotal')}</Option>
+			</InlineSelect>
+		);
+	};
+
+	const renderPromMatchOpts = (): JSX.Element => {
+		return (
+			<InlineSelect
+				defaultValue={defaultMatchType}
+				style={{ minWidth: '130px' }}
+				value={alertDef.condition?.matchType}
+				onChange={(value: string | unknown): void => handleMatchOptChange(value)}
+			>
+				<Option value="1">{t('option_atleastonce')}</Option>
+			</InlineSelect>
+		);
+	};
+
+	const renderEvalWindows = (): JSX.Element => {
+		return (
+			<InlineSelect
+				defaultValue={defaultEvalWindow}
+				style={{ minWidth: '120px' }}
+				value={alertDef.evalWindow}
+				onChange={(value: string | unknown): void => {
+					const ew = (value as string) || alertDef.evalWindow;
+					setAlertDef({
+						...alertDef,
+						evalWindow: ew,
+					});
+				}}
+			>
+				{' '}
+				<Option value="5m0s">{t('option_5min')}</Option>
+				<Option value="10m0s">{t('option_10min')}</Option>
+				<Option value="15m0s">{t('option_15min')}</Option>
+				<Option value="60m0s">{t('option_60min')}</Option>
+				<Option value="4h0m0s">{t('option_4hours')}</Option>
+				<Option value="24h0m0s">{t('option_24hours')}</Option>
+			</InlineSelect>
+		);
+	};
+
+	const renderThresholdRuleOpts = (): JSX.Element => {
+		return (
+			<FormItem>
+				<Typography.Text>
+					{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
+					{renderThresholdMatchOpts()} {t('text_condition3')} {renderEvalWindows()}
+				</Typography.Text>
+			</FormItem>
+		);
+	};
+	const renderPromRuleOptions = (): JSX.Element => {
+		return (
+			<FormItem>
+				<Typography.Text>
+					{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
+					{renderPromMatchOpts()}
+				</Typography.Text>
+			</FormItem>
+		);
+	};
+
+	return (
+		<>
+			<StepHeading>{t('alert_form_step2')}</StepHeading>
+			<FormContainer>
+				{queryCategory === EQueryType.PROM
+					? renderPromRuleOptions()
+					: renderThresholdRuleOpts()}
+				<div style={{ display: 'flex', alignItems: 'center' }}>
+					<ThresholdInput
+						controls={false}
+						addonBefore={t('field_threshold')}
+						value={alertDef?.condition?.target}
+						onChange={(value: number | unknown): void => {
+							setAlertDef({
+								...alertDef,
+								condition: {
+									...alertDef.condition,
+									op: alertDef.condition?.op || defaultCompareOp,
+									matchType: alertDef.condition?.matchType || defaultMatchType,
+									target: value as number,
+								},
+							});
+						}}
+					/>
+				</div>
+			</FormContainer>
+		</>
+	);
+}
+
+interface RuleOptionsProps {
+	alertDef: AlertDef;
+	setAlertDef: (a: AlertDef) => void;
+	queryCategory: EQueryType;
+}
+export default RuleOptions;

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

@@ -0,0 +1,132 @@
+import { Col, Row, Typography } from 'antd';
+import TextToolTip from 'components/TextToolTip';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { EQueryType } from 'types/common/dashboard';
+
+import {
+	StyledList,
+	StyledListItem,
+	StyledMainContainer,
+	StyledTopic,
+} from './styles';
+
+function UserGuide({ queryType }: UserGuideProps): JSX.Element {
+	// init namespace for translations
+	const { t } = useTranslation('alerts');
+
+	const renderStep1QB = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_qb_step1')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_qb_step1a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step1b')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step1c')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step1d')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+	const renderStep2QB = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_qb_step2a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step2b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+
+	const renderStep3QB = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_qb_step3')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_qb_step3a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step3b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+
+	const renderGuideForQB = (): JSX.Element => {
+		return (
+			<>
+				{renderStep1QB()}
+				{renderStep2QB()}
+				{renderStep3QB()}
+			</>
+		);
+	};
+	const renderStep1PQL = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_pql_step1a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_pql_step1b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+	const renderStep2PQL = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_pql_step2')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_pql_step2a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_pql_step2b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+
+	const renderStep3PQL = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_pql_step3')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_pql_step3a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_pql_step3b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+
+	const renderGuideForPQL = (): JSX.Element => {
+		return (
+			<>
+				{renderStep1PQL()}
+				{renderStep2PQL()}
+				{renderStep3PQL()}
+			</>
+		);
+	};
+
+	return (
+		<StyledMainContainer>
+			<Row>
+				<Col flex="auto">
+					<Typography.Paragraph> {t('user_guide_headline')} </Typography.Paragraph>
+				</Col>
+				<Col flex="none">
+					<TextToolTip
+						text={t('user_tooltip_more_help')}
+						url="https://signoz.io/docs/userguide/alerts-management/#create-alert-rules"
+					/>
+				</Col>
+			</Row>
+			{queryType === EQueryType.QUERY_BUILDER && renderGuideForQB()}
+			{queryType === EQueryType.PROM && renderGuideForPQL()}
+		</StyledMainContainer>
+	);
+}
+
+interface UserGuideProps {
+	queryType: EQueryType;
+}
+
+export default UserGuide;

frontend/src/container/FormAlertRules/UserGuide/styles.ts

@@ -0,0 +1,17 @@
+import { Card, Typography } from 'antd';
+import styled from 'styled-components';
+
+export const StyledMainContainer = styled(Card)``;
+
+export const StyledTopic = styled(Typography.Paragraph)`
+	font-weight: 600;
+`;
+
+export const StyledList = styled.ul`
+	padding-left: 18px;
+`;
+
+export const StyledListItem = styled.li`
+	font-style: italic;
+	padding-bottom: 0.5rem;
+`;

frontend/src/container/FormAlertRules/index.tsx

@@ -0,0 +1,455 @@
+import { ExclamationCircleOutlined, SaveOutlined } from '@ant-design/icons';
+import { FormInstance, Modal, notification, Typography } from 'antd';
+import saveAlertApi from 'api/alerts/save';
+import testAlertApi from 'api/alerts/testAlert';
+import ROUTES from 'constants/routes';
+import QueryTypeTag from 'container/NewWidget/LeftContainer/QueryTypeTag';
+import PlotTag from 'container/NewWidget/LeftContainer/WidgetGraph/PlotTag';
+import history from 'lib/history';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQueryClient } from 'react-query';
+import {
+	IFormulaQueries,
+	IMetricQueries,
+	IPromQueries,
+} from 'types/api/alerts/compositeQuery';
+import {
+	AlertDef,
+	defaultEvalWindow,
+	defaultMatchType,
+} from 'types/api/alerts/def';
+import { Query as StagedQuery } from 'types/api/dashboard/getAll';
+import { EQueryType } from 'types/common/dashboard';
+
+import BasicInfo from './BasicInfo';
+import ChartPreview from './ChartPreview';
+import QuerySection from './QuerySection';
+import RuleOptions from './RuleOptions';
+import {
+	ActionButton,
+	ButtonContainer,
+	MainFormContainer,
+	PanelContainer,
+	StyledLeftContainer,
+	StyledRightContainer,
+} from './styles';
+import useDebounce from './useDebounce';
+import UserGuide from './UserGuide';
+import {
+	prepareBuilderQueries,
+	prepareStagedQuery,
+	toChartInterval,
+	toFormulaQueries,
+	toMetricQueries,
+} from './utils';
+
+function FormAlertRules({
+	formInstance,
+	initialValue,
+	ruleId,
+}: FormAlertRuleProps): JSX.Element {
+	// init namespace for translations
+	const { t } = useTranslation('alerts');
+
+	// use query client
+	const ruleCache = useQueryClient();
+
+	const [loading, setLoading] = useState(false);
+
+	// alertDef holds the form values to be posted
+	const [alertDef, setAlertDef] = useState<AlertDef>(initialValue);
+
+	// initQuery contains initial query when component was mounted
+	const initQuery = initialValue?.condition?.compositeMetricQuery;
+
+	const [queryCategory, setQueryCategory] = useState<EQueryType>(
+		initQuery?.queryType,
+	);
+
+	// local state to handle metric queries
+	const [metricQueries, setMetricQueries] = useState<IMetricQueries>(
+		toMetricQueries(initQuery?.builderQueries),
+	);
+
+	// local state to handle formula queries
+	const [formulaQueries, setFormulaQueries] = useState<IFormulaQueries>(
+		toFormulaQueries(initQuery?.builderQueries),
+	);
+
+	// local state to handle promql queries
+	const [promQueries, setPromQueries] = useState<IPromQueries>({
+		...initQuery?.promQueries,
+	});
+
+	// staged query is used to display chart preview
+	const [stagedQuery, setStagedQuery] = useState<StagedQuery>();
+	const debouncedStagedQuery = useDebounce(stagedQuery, 1000);
+
+	// this use effect initiates staged query and
+	// other queries based on server data.
+	// useful when fetching of initial values (from api)
+	// is delayed
+	useEffect(() => {
+		const initQuery = initialValue?.condition?.compositeMetricQuery;
+		const typ = initQuery?.queryType;
+
+		// extract metric query from builderQueries
+		const mq = toMetricQueries(initQuery?.builderQueries);
+
+		// extract formula query from builderQueries
+		const fq = toFormulaQueries(initQuery?.builderQueries);
+
+		// prepare staged query
+		const sq = prepareStagedQuery(typ, mq, fq, initQuery?.promQueries);
+		const pq = initQuery?.promQueries;
+
+		setQueryCategory(typ);
+		setMetricQueries(mq);
+		setFormulaQueries(fq);
+		setPromQueries(pq);
+		setStagedQuery(sq);
+		setAlertDef(initialValue);
+	}, [initialValue]);
+
+	// this useEffect updates staging query when
+	// any of its sub-parameters changes
+	useEffect(() => {
+		// prepare staged query
+		const sq: StagedQuery = prepareStagedQuery(
+			queryCategory,
+			metricQueries,
+			formulaQueries,
+			promQueries,
+		);
+		setStagedQuery(sq);
+	}, [queryCategory, metricQueries, formulaQueries, promQueries]);
+
+	const onCancelHandler = useCallback(() => {
+		history.replace(ROUTES.LIST_ALL_ALERT);
+	}, []);
+
+	// onQueryCategoryChange handles changes to query category
+	// in state as well as sets additional defaults
+	const onQueryCategoryChange = (val: EQueryType): void => {
+		setQueryCategory(val);
+		if (val === EQueryType.PROM) {
+			setAlertDef({
+				...alertDef,
+				condition: {
+					...alertDef.condition,
+					matchType: defaultMatchType,
+				},
+				evalWindow: defaultEvalWindow,
+			});
+		}
+	};
+	const validatePromParams = useCallback((): boolean => {
+		let retval = true;
+		if (queryCategory !== EQueryType.PROM) return retval;
+
+		if (!promQueries || Object.keys(promQueries).length === 0) {
+			notification.error({
+				message: 'Error',
+				description: t('promql_required'),
+			});
+			return false;
+		}
+
+		Object.keys(promQueries).forEach((key) => {
+			if (promQueries[key].query === '') {
+				notification.error({
+					message: 'Error',
+					description: t('promql_required'),
+				});
+				retval = false;
+			}
+		});
+
+		return retval;
+	}, [t, promQueries, queryCategory]);
+
+	const validateQBParams = useCallback((): boolean => {
+		let retval = true;
+		if (queryCategory !== EQueryType.QUERY_BUILDER) return true;
+
+		if (!metricQueries || Object.keys(metricQueries).length === 0) {
+			notification.error({
+				message: 'Error',
+				description: t('condition_required'),
+			});
+			return false;
+		}
+
+		if (!alertDef.condition?.target) {
+			notification.error({
+				message: 'Error',
+				description: t('target_missing'),
+			});
+			return false;
+		}
+
+		Object.keys(metricQueries).forEach((key) => {
+			if (metricQueries[key].metricName === '') {
+				notification.error({
+					message: 'Error',
+					description: t('metricname_missing', { where: metricQueries[key].name }),
+				});
+				retval = false;
+			}
+		});
+
+		Object.keys(formulaQueries).forEach((key) => {
+			if (formulaQueries[key].expression === '') {
+				notification.error({
+					message: 'Error',
+					description: t('expression_missing', formulaQueries[key].name),
+				});
+				retval = false;
+			}
+		});
+		return retval;
+	}, [t, alertDef, queryCategory, metricQueries, formulaQueries]);
+
+	const isFormValid = useCallback((): boolean => {
+		if (!alertDef.alert || alertDef.alert === '') {
+			notification.error({
+				message: 'Error',
+				description: t('alertname_required'),
+			});
+			return false;
+		}
+
+		if (!validatePromParams()) {
+			return false;
+		}
+
+		return validateQBParams();
+	}, [t, validateQBParams, alertDef, validatePromParams]);
+
+	const preparePostData = (): AlertDef => {
+		const postableAlert: AlertDef = {
+			...alertDef,
+			source: window?.location.toString(),
+			ruleType:
+				queryCategory === EQueryType.PROM ? 'promql_rule' : 'threshold_rule',
+			condition: {
+				...alertDef.condition,
+				compositeMetricQuery: {
+					builderQueries: prepareBuilderQueries(metricQueries, formulaQueries),
+					promQueries,
+					queryType: queryCategory,
+				},
+			},
+		};
+		return postableAlert;
+	};
+
+	const memoizedPreparePostData = useCallback(preparePostData, [
+		queryCategory,
+		alertDef,
+		metricQueries,
+		formulaQueries,
+		promQueries,
+	]);
+
+	const saveRule = useCallback(async () => {
+		if (!isFormValid()) {
+			return;
+		}
+		const postableAlert = memoizedPreparePostData();
+
+		setLoading(true);
+		try {
+			const apiReq =
+				ruleId && ruleId > 0
+					? { data: postableAlert, id: ruleId }
+					: { data: postableAlert };
+
+			const response = await saveAlertApi(apiReq);
+
+			if (response.statusCode === 200) {
+				notification.success({
+					message: 'Success',
+					description:
+						!ruleId || ruleId === 0 ? t('rule_created') : t('rule_edited'),
+				});
+
+				// invalidate rule in cache
+				ruleCache.invalidateQueries(['ruleId', ruleId]);
+
+				setTimeout(() => {
+					history.replace(ROUTES.LIST_ALL_ALERT);
+				}, 2000);
+			} else {
+				notification.error({
+					message: 'Error',
+					description: response.error || t('unexpected_error'),
+				});
+			}
+		} catch (e) {
+			notification.error({
+				message: 'Error',
+				description: t('unexpected_error'),
+			});
+		}
+		setLoading(false);
+	}, [t, isFormValid, ruleId, ruleCache, memoizedPreparePostData]);
+
+	const onSaveHandler = useCallback(async () => {
+		const content = (
+			<Typography.Text>
+				{' '}
+				{t('confirm_save_content_part1')} <QueryTypeTag queryType={queryCategory} />{' '}
+				{t('confirm_save_content_part2')}
+			</Typography.Text>
+		);
+		Modal.confirm({
+			icon: <ExclamationCircleOutlined />,
+			title: t('confirm_save_title'),
+			centered: true,
+			content,
+			onOk() {
+				saveRule();
+			},
+		});
+	}, [t, saveRule, queryCategory]);
+
+	const onTestRuleHandler = useCallback(async () => {
+		if (!isFormValid()) {
+			return;
+		}
+		const postableAlert = memoizedPreparePostData();
+
+		setLoading(true);
+		try {
+			const response = await testAlertApi({ data: postableAlert });
+
+			if (response.statusCode === 200) {
+				const { payload } = response;
+				if (payload?.alertCount === 0) {
+					notification.error({
+						message: 'Error',
+						description: t('no_alerts_found'),
+					});
+				} else {
+					notification.success({
+						message: 'Success',
+						description: t('rule_test_fired'),
+					});
+				}
+			} else {
+				notification.error({
+					message: 'Error',
+					description: response.error || t('unexpected_error'),
+				});
+			}
+		} catch (e) {
+			notification.error({
+				message: 'Error',
+				description: t('unexpected_error'),
+			});
+		}
+		setLoading(false);
+	}, [t, isFormValid, memoizedPreparePostData]);
+
+	const renderBasicInfo = (): JSX.Element => (
+		<BasicInfo alertDef={alertDef} setAlertDef={setAlertDef} />
+	);
+
+	const renderQBChartPreview = (): JSX.Element => {
+		return (
+			<ChartPreview
+				headline={<PlotTag queryType={queryCategory} />}
+				name=""
+				threshold={alertDef.condition?.target}
+				query={debouncedStagedQuery}
+				selectedInterval={toChartInterval(alertDef.evalWindow)}
+			/>
+		);
+	};
+
+	const renderPromChartPreview = (): JSX.Element => {
+		return (
+			<ChartPreview
+				headline={<PlotTag queryType={queryCategory} />}
+				name="Chart Preview"
+				threshold={alertDef.condition?.target}
+				query={debouncedStagedQuery}
+			/>
+		);
+	};
+
+	return (
+		<>
+			{Element}
+			<PanelContainer>
+				<StyledLeftContainer flex="5 1 600px">
+					<MainFormContainer
+						initialValues={initialValue}
+						layout="vertical"
+						form={formInstance}
+					>
+						{queryCategory === EQueryType.QUERY_BUILDER && renderQBChartPreview()}
+						{queryCategory === EQueryType.PROM && renderPromChartPreview()}
+						<QuerySection
+							queryCategory={queryCategory}
+							setQueryCategory={onQueryCategoryChange}
+							metricQueries={metricQueries}
+							setMetricQueries={setMetricQueries}
+							formulaQueries={formulaQueries}
+							setFormulaQueries={setFormulaQueries}
+							promQueries={promQueries}
+							setPromQueries={setPromQueries}
+						/>
+
+						<RuleOptions
+							queryCategory={queryCategory}
+							alertDef={alertDef}
+							setAlertDef={setAlertDef}
+						/>
+
+						{renderBasicInfo()}
+						<ButtonContainer>
+							<ActionButton
+								loading={loading || false}
+								type="primary"
+								onClick={onSaveHandler}
+								icon={<SaveOutlined />}
+							>
+								{ruleId > 0 ? t('button_savechanges') : t('button_createrule')}
+							</ActionButton>
+							<ActionButton
+								loading={loading || false}
+								type="default"
+								onClick={onTestRuleHandler}
+							>
+								{' '}
+								{t('button_testrule')}
+							</ActionButton>
+							<ActionButton
+								disabled={loading || false}
+								type="default"
+								onClick={onCancelHandler}
+							>
+								{ruleId === 0 && t('button_cancelchanges')}
+								{ruleId > 0 && t('button_discard')}
+							</ActionButton>
+						</ButtonContainer>
+					</MainFormContainer>
+				</StyledLeftContainer>
+				<StyledRightContainer flex="1 1 300px">
+					<UserGuide queryType={queryCategory} />
+				</StyledRightContainer>
+			</PanelContainer>
+		</>
+	);
+}
+
+interface FormAlertRuleProps {
+	formInstance: FormInstance;
+	initialValue: AlertDef;
+	ruleId: number;
+}
+
+export default FormAlertRules;

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

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

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { QueryChipContainer, QueryChipItem } from './styles';
+import { ILabelRecord } from './types';
+
+interface QueryChipProps {
+	queryData: ILabelRecord;
+	onRemove: (id: string) => void;
+}
+
+export default function QueryChip({
+	queryData,
+	onRemove,
+}: QueryChipProps): JSX.Element {
+	const { key, value } = queryData;
+	return (
+		<QueryChipContainer>
+			<QueryChipItem
+				closable={key !== 'severity' && key !== 'description'}
+				onClose={(): void => onRemove(key)}
+			>
+				{key}: {value}
+			</QueryChipItem>
+		</QueryChipContainer>
+	);
+}

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

@@ -0,0 +1,164 @@
+import {
+	CloseCircleFilled,
+	ExclamationCircleOutlined,
+} from '@ant-design/icons';
+import { useMachine } from '@xstate/react';
+import { Button, Input, message, Modal } from 'antd';
+import { map } from 'lodash-es';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { Labels } from 'types/api/alerts/def';
+import AppReducer from 'types/reducer/app';
+import { v4 as uuid } from 'uuid';
+
+import { ResourceAttributesFilterMachine } from './Labels.machine';
+import QueryChip from './QueryChip';
+import { QueryChipItem, SearchContainer } from './styles';
+import { ILabelRecord } from './types';
+import { createQuery, flattenLabels, prepareLabels } from './utils';
+
+interface LabelSelectProps {
+	onSetLabels: (q: Labels) => void;
+	initialValues: Labels | undefined;
+}
+
+function LabelSelect({
+	onSetLabels,
+	initialValues,
+}: LabelSelectProps): JSX.Element | null {
+	const { t } = useTranslation('alerts');
+	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
+	const [currentVal, setCurrentVal] = useState('');
+	const [staging, setStaging] = useState<string[]>([]);
+	const [queries, setQueries] = useState<ILabelRecord[]>(
+		initialValues ? flattenLabels(initialValues) : [],
+	);
+
+	const dispatchChanges = (updatedRecs: ILabelRecord[]): void => {
+		onSetLabels(prepareLabels(updatedRecs, initialValues));
+		setQueries(updatedRecs);
+	};
+
+	const [state, send] = useMachine(ResourceAttributesFilterMachine, {
+		actions: {
+			onSelectLabelKey: () => {},
+			onSelectLabelValue: () => {
+				if (currentVal !== '') {
+					setStaging((prevState) => [...prevState, currentVal]);
+				} else {
+					return;
+				}
+				setCurrentVal('');
+			},
+			onValidateQuery: (): void => {
+				if (currentVal === '') {
+					return;
+				}
+
+				const generatedQuery = createQuery([...staging, currentVal]);
+
+				if (generatedQuery) {
+					dispatchChanges([...queries, generatedQuery]);
+					setStaging([]);
+					setCurrentVal('');
+					send('RESET');
+				}
+			},
+		},
+	});
+
+	const handleFocus = (): void => {
+		if (state.value === 'Idle') {
+			send('NEXT');
+		}
+	};
+
+	const handleBlur = useCallback((): void => {
+		if (staging.length === 1 && staging[0] !== undefined) {
+			send('onBlur');
+		}
+	}, [send, staging]);
+
+	useEffect(() => {
+		handleBlur();
+	}, [handleBlur]);
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+		setCurrentVal(e.target?.value);
+	};
+
+	const handleClose = (key: string): void => {
+		dispatchChanges(queries.filter((queryData) => queryData.key !== key));
+	};
+
+	const handleClearAll = (): void => {
+		Modal.confirm({
+			title: 'Confirm',
+			icon: <ExclamationCircleOutlined />,
+			content: t('remove_label_confirm'),
+			onOk() {
+				send('RESET');
+				dispatchChanges([]);
+				setStaging([]);
+				message.success(t('remove_label_success'));
+			},
+			okText: t('button_yes'),
+			cancelText: t('button_no'),
+		});
+	};
+	const renderPlaceholder = useCallback((): string => {
+		if (state.value === 'LabelKey') return 'Enter a label key then press ENTER.';
+		if (state.value === 'LabelValue')
+			return `Enter a value for label key(${staging[0]}) then press ENTER.`;
+		return t('placeholder_label_key_pair');
+	}, [t, state, staging]);
+	return (
+		<SearchContainer isDarkMode={isDarkMode} disabled={false}>
+			<div style={{ display: 'inline-flex', flexWrap: 'wrap' }}>
+				{queries.length > 0 &&
+					map(
+						queries,
+						(query): JSX.Element => {
+							return (
+								<QueryChip key={query.key} queryData={query} onRemove={handleClose} />
+							);
+						},
+					)}
+			</div>
+			<div>
+				{map(staging, (item) => {
+					return <QueryChipItem key={uuid()}>{item}</QueryChipItem>;
+				})}
+			</div>
+
+			<div style={{ display: 'flex', width: '100%' }}>
+				<Input
+					placeholder={renderPlaceholder()}
+					onChange={handleChange}
+					onKeyUp={(e): void => {
+						if (e.key === 'Enter' || e.code === 'Enter') {
+							send('NEXT');
+						}
+					}}
+					bordered={false}
+					value={currentVal as never}
+					style={{ flex: 1 }}
+					onFocus={handleFocus}
+					onBlur={handleBlur}
+				/>
+
+				{queries.length || staging.length || currentVal ? (
+					<Button
+						onClick={handleClearAll}
+						icon={<CloseCircleFilled />}
+						type="text"
+					/>
+				) : null}
+			</div>
+		</SearchContainer>
+	);
+}
+
+export default LabelSelect;

frontend/src/container/FormAlertRules/labels/styles.ts

@@ -0,0 +1,34 @@
+import { grey } from '@ant-design/colors';
+import { Tag } from 'antd';
+import styled from 'styled-components';
+
+interface SearchContainerProps {
+	isDarkMode: boolean;
+	disabled: boolean;
+}
+
+export const SearchContainer = styled.div<SearchContainerProps>`
+	border-radius: 4px;
+	background: ${({ isDarkMode }): string => (isDarkMode ? '#000' : '#fff')};
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	padding: 0.2rem;
+	border: 1px solid #ccc5;
+	${({ disabled }): string => (disabled ? `cursor: not-allowed;` : '')}
+`;
+
+export const QueryChipContainer = styled.span`
+	display: flex;
+	align-items: center;
+	margin-right: 0.5rem;
+	&:hover {
+		& > * {
+			background: ${grey.primary}44;
+		}
+	}
+`;
+
+export const QueryChipItem = styled(Tag)`
+	margin-right: 0.1rem;
+`;

frontend/src/container/FormAlertRules/labels/types.ts

@@ -0,0 +1,9 @@
+export interface ILabelRecord {
+	key: string;
+	value: string;
+}
+
+export interface IOption {
+	label: string;
+	value: string;
+}

frontend/src/container/FormAlertRules/labels/utils.ts

@@ -0,0 +1,54 @@
+import { Labels } from 'types/api/alerts/def';
+
+import { ILabelRecord } from './types';
+
+const hiddenLabels = ['severity', 'description'];
+
+export const createQuery = (
+	selectedItems: Array<string | string[]> = [],
+): ILabelRecord | null => {
+	if (selectedItems.length === 2) {
+		return {
+			key: selectedItems[0] as string,
+			value: selectedItems[1] as string,
+		};
+	}
+	return null;
+};
+
+export const flattenLabels = (labels: Labels): ILabelRecord[] => {
+	const recs: ILabelRecord[] = [];
+
+	Object.keys(labels).forEach((key) => {
+		if (!hiddenLabels.includes(key)) {
+			recs.push({
+				key,
+				value: labels[key],
+			});
+		}
+	});
+
+	return recs;
+};
+
+export const prepareLabels = (
+	recs: ILabelRecord[],
+	alertLabels: Labels | undefined,
+): Labels => {
+	const labels: Labels = {};
+
+	recs.forEach((rec) => {
+		if (!hiddenLabels.includes(rec.key)) {
+			labels[rec.key] = rec.value;
+		}
+	});
+	if (alertLabels) {
+		Object.keys(alertLabels).forEach((key) => {
+			if (hiddenLabels.includes(key)) {
+				labels[key] = alertLabels[key];
+			}
+		});
+	}
+
+	return labels;
+};

frontend/src/container/FormAlertRules/styles.ts

@@ -0,0 +1,120 @@
+import {
+	Button,
+	Card,
+	Col,
+	Form,
+	Input,
+	InputNumber,
+	Row,
+	Select,
+	Typography,
+} from 'antd';
+import FormItem from 'antd/lib/form/FormItem';
+import TextArea from 'antd/lib/input/TextArea';
+import styled from 'styled-components';
+
+export const PanelContainer = styled(Row)`
+	flex-wrap: nowrap;
+`;
+
+export const StyledRightContainer = styled(Col)`
+	&&& {
+	}
+`;
+
+export const StyledLeftContainer = styled(Col)`
+	&&& {
+		margin-right: 1rem;
+	}
+`;
+
+export const MainFormContainer = styled(Form)``;
+
+export const ButtonContainer = styled.div`
+	&&& {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		margin-top: 1rem;
+		margin-bottom: 3rem;
+	}
+`;
+
+export const ActionButton = styled(Button)`
+	margin-right: 1rem;
+`;
+
+export const QueryButton = styled(Button)`
+	&&& {
+		display: flex;
+		align-items: center;
+		margin-right: 1rem;
+	}
+`;
+
+export const QueryContainer = styled(Card)`
+	&&& {
+		margin-top: 1rem;
+		min-height: 23.5%;
+	}
+`;
+
+export const Container = styled.div`
+	margin-top: 1rem;
+	display: flex;
+	flex-direction: column;
+`;
+
+export const StepHeading = styled.p`
+	margin-top: 1rem;
+	font-weight: bold;
+`;
+
+export const InlineSelect = styled(Select)`
+	display: inline-block;
+	width: 10% !important;
+	margin-left: 0.2em;
+	margin-right: 0.2em;
+`;
+
+export const SeveritySelect = styled(Select)`
+	width: 25% !important;
+`;
+
+export const InputSmall = styled(Input)`
+	width: 40% !important;
+`;
+
+export const FormContainer = styled(Card)`
+	padding: 2em;
+	margin-top: 1rem;
+	display: flex;
+	flex-direction: column;
+	border-radius: 4px;
+`;
+
+export const ThresholdInput = styled(InputNumber)`
+	& > div {
+		display: flex;
+		align-items: center;
+		& > .ant-input-number-group-addon {
+			width: 130px;
+		}
+		& > .ant-input-number {
+			width: 50%;
+			margin-left: 1em;
+		}
+	}
+`;
+
+export const TextareaMedium = styled(TextArea)`
+	width: 70%;
+`;
+
+export const FormItemMedium = styled(FormItem)`
+	width: 70%;
+`;
+
+export const ChannelSelectTip = styled(Typography.Text)`
+	color: hsla(0, 0%, 100%, 0.3);
+`;

frontend/src/container/FormAlertRules/useDebounce.js

@@ -0,0 +1,31 @@
+/* eslint-disable  */
+// @ts-ignore
+// @ts-nocheck
+
+import { useEffect, useState } from 'react';
+
+// see https://github.com/tannerlinsley/react-query/issues/293
+// see https://usehooks.com/useDebounce/
+export default function useDebounce(value, delay) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  );
+
+  return debouncedValue;
+}

frontend/src/container/FormAlertRules/utils.ts

@@ -0,0 +1,136 @@
+import { Time } from 'container/TopNav/DateTimeSelection/config';
+import {
+	IBuilderQueries,
+	IFormulaQueries,
+	IFormulaQuery,
+	IMetricQueries,
+	IMetricQuery,
+	IPromQueries,
+	IPromQuery,
+} from 'types/api/alerts/compositeQuery';
+import {
+	IMetricsBuilderQuery,
+	Query as IStagedQuery,
+} from 'types/api/dashboard/getAll';
+import { EQueryType } from 'types/common/dashboard';
+
+export const toFormulaQueries = (b: IBuilderQueries): IFormulaQueries => {
+	const f: IFormulaQueries = {};
+	if (!b) return f;
+	Object.keys(b).forEach((key) => {
+		if (key === 'F1') {
+			f[key] = b[key] as IFormulaQuery;
+		}
+	});
+
+	return f;
+};
+
+export const toMetricQueries = (b: IBuilderQueries): IMetricQueries => {
+	const m: IMetricQueries = {};
+	if (!b) return m;
+	Object.keys(b).forEach((key) => {
+		if (key !== 'F1') {
+			m[key] = b[key] as IMetricQuery;
+		}
+	});
+
+	return m;
+};
+
+export const toIMetricsBuilderQuery = (
+	q: IMetricQuery,
+): IMetricsBuilderQuery => {
+	return {
+		name: q.name,
+		metricName: q.metricName,
+		tagFilters: q.tagFilters,
+		groupBy: q.groupBy,
+		aggregateOperator: q.aggregateOperator,
+		disabled: q.disabled,
+		legend: q.legend,
+	};
+};
+
+export const prepareBuilderQueries = (
+	m: IMetricQueries,
+	f: IFormulaQueries,
+): IBuilderQueries => {
+	if (!m) return {};
+	const b: IBuilderQueries = {
+		...m,
+	};
+
+	Object.keys(f).forEach((key) => {
+		b[key] = {
+			...f[key],
+			aggregateOperator: undefined,
+			metricName: '',
+		};
+	});
+	return b;
+};
+
+export const prepareStagedQuery = (
+	t: EQueryType,
+	m: IMetricQueries,
+	f: IFormulaQueries,
+	p: IPromQueries,
+): IStagedQuery => {
+	const qbList: IMetricQuery[] = [];
+	const formulaList: IFormulaQuery[] = [];
+	const promList: IPromQuery[] = [];
+
+	// convert map[string]IMetricQuery to IMetricQuery[]
+	if (m) {
+		Object.keys(m).forEach((key) => {
+			qbList.push(m[key]);
+		});
+	}
+
+	// convert map[string]IFormulaQuery to IFormulaQuery[]
+	if (f) {
+		Object.keys(f).forEach((key) => {
+			formulaList.push(f[key]);
+		});
+	}
+
+	// convert map[string]IPromQuery to IPromQuery[]
+	if (p) {
+		Object.keys(p).forEach((key) => {
+			promList.push({ ...p[key], name: key });
+		});
+	}
+
+	return {
+		queryType: t,
+		promQL: promList,
+		metricsBuilder: {
+			formulas: formulaList,
+			queryBuilder: qbList,
+		},
+		clickHouse: [],
+	};
+};
+
+// toChartInterval converts eval window to chart selection time interval
+export const toChartInterval = (evalWindow: string | undefined): Time => {
+	switch (evalWindow) {
+		case '5m0s':
+			return '5min';
+		case '10m0s':
+			return '10min';
+		case '15m0s':
+			return '15min';
+		case '30m0s':
+			return '30min';
+		case '60m0s':
+			return '30min';
+		case '4h0m0s':
+			return '4hr';
+		case '24h0m0s':
+			return '1day';
+		default:
+			return '5min';
+	}
+};

frontend/src/container/GantChart/SpanName/index.tsx

@@ -10,7 +10,7 @@ function SpanNameComponent({
 		<Container title={`${name} ${serviceName}`}>
 			<SpanWrapper>
 				<Span ellipsis>{name}</Span>
-				<Service>{serviceName}</Service>
+				<Service ellipsis>{serviceName}</Service>
 			</SpanWrapper>
 		</Container>
 	);

frontend/src/container/GantChart/SpanName/styles.ts

@@ -9,7 +9,7 @@ export const Span = styled(Typography.Paragraph)`
 	}
 `;
 
-export const Service = styled(Typography)`
+export const Service = styled(Typography.Paragraph)`
 	&&& {
 		color: #acacac;
 		font-size: 0.75rem;

frontend/src/container/GantChart/Trace/index.tsx

@@ -39,6 +39,7 @@ function Trace(props: TraceProps): JSX.Element {
 		isExpandAll,
 		intervalUnit,
 		children,
+		isMissing,
 	} = props;
 
 	const { isDarkMode } = useThemeMode();
@@ -125,7 +126,7 @@ function Trace(props: TraceProps): JSX.Element {
 				isDarkMode={isDarkMode}
 			/>
 
-			<CardContainer onClick={onClick}>
+			<CardContainer isMissing={isMissing} onClick={onClick}>
 				<StyledCol flex={`${panelWidth}px`} styledclass={[styles.overFlowHidden]}>
 					<StyledRow styledclass={[styles.flexNoWrap]}>
 						<Col>
@@ -174,6 +175,7 @@ function Trace(props: TraceProps): JSX.Element {
 							activeSpanPath={activeSpanPath}
 							isExpandAll={isExpandAll}
 							intervalUnit={intervalUnit}
+							isMissing={child.isMissing}
 						/>
 					))}
 				</>
@@ -182,6 +184,10 @@ function Trace(props: TraceProps): JSX.Element {
 	);
 }
 
+Trace.defaultProps = {
+	isMissing: false,
+};
+
 interface ITraceGlobal {
 	globalSpread: ITraceMetaData['spread'];
 	globalStart: ITraceMetaData['globalStart'];
@@ -196,6 +202,7 @@ interface TraceProps extends ITraceTree, ITraceGlobal {
 	activeSpanPath: string[];
 	isExpandAll: boolean;
 	intervalUnit: IIntervalUnit;
+	isMissing?: boolean;
 }
 
 export default Trace;

frontend/src/container/GantChart/Trace/styles.ts

@@ -1,3 +1,4 @@
+import { volcano } from '@ant-design/colors';
 import styled, {
 	css,
 	DefaultTheme,
@@ -15,7 +16,6 @@ export const Wrapper = styled.ul<Props>`
 	padding-top: 0.5rem;
 	position: relative;
 	z-index: 1;
-
 	ul {
 		border-left: ${({ isOnlyChild }): StyledCSS =>
 			isOnlyChild && 'none'} !important;
@@ -36,10 +36,14 @@ export const Wrapper = styled.ul<Props>`
 	}
 `;
 
-export const CardContainer = styled.li`
+export const CardContainer = styled.li<{ isMissing?: boolean }>`
 	display: flex;
 	width: 100%;
 	cursor: pointer;
+	border-radius: 0.25rem;
+	z-index: 2;
+	${({ isMissing }): string =>
+		isMissing ? `border: 1px dashed ${volcano[6]} !important;` : ''}
 `;
 
 interface Props {

frontend/src/container/GantChart/index.tsx

@@ -3,7 +3,7 @@ import { IIntervalUnit } from 'container/TraceDetail/utils';
 import React, { useEffect, useState } from 'react';
 import { ITraceTree } from 'types/api/trace/getTraceItem';
 
-import { CardContainer, CardWrapper, CollapseButton, Wrapper } from './styles';
+import { CardContainer, CardWrapper, CollapseButton } from './styles';
 import Trace from './Trace';
 import { getSpanPath } from './utils';
 
@@ -36,35 +36,33 @@ function GanttChart(props: GanttChartProps): JSX.Element {
 		setIsExpandAll((prev) => !prev);
 	};
 	return (
-		<Wrapper>
-			<CardContainer>
-				<CollapseButton
-					onClick={handleCollapse}
-					title={isExpandAll ? 'Collapse All' : 'Expand All'}
-				>
-					{isExpandAll ? <MinusSquareOutlined /> : <PlusSquareOutlined />}
-				</CollapseButton>
-				<CardWrapper>
-					<Trace
-						activeHoverId={activeHoverId}
-						activeSpanPath={activeSpanPath}
-						setActiveHoverId={setActiveHoverId}
-						key={data.id}
-						// eslint-disable-next-line react/jsx-props-no-spreading
-						{...{
-							...data,
-							globalSpread,
-							globalStart,
-							setActiveSelectedId,
-							activeSelectedId,
-						}}
-						level={0}
-						isExpandAll={isExpandAll}
-						intervalUnit={intervalUnit}
-					/>
-				</CardWrapper>
-			</CardContainer>
-		</Wrapper>
+		<CardContainer>
+			<CollapseButton
+				onClick={handleCollapse}
+				title={isExpandAll ? 'Collapse All' : 'Expand All'}
+			>
+				{isExpandAll ? <MinusSquareOutlined /> : <PlusSquareOutlined />}
+			</CollapseButton>
+			<CardWrapper>
+				<Trace
+					activeHoverId={activeHoverId}
+					activeSpanPath={activeSpanPath}
+					setActiveHoverId={setActiveHoverId}
+					key={data.id}
+					// eslint-disable-next-line react/jsx-props-no-spreading
+					{...{
+						...data,
+						globalSpread,
+						globalStart,
+						setActiveSelectedId,
+						activeSelectedId,
+					}}
+					level={0}
+					isExpandAll={isExpandAll}
+					intervalUnit={intervalUnit}
+				/>
+			</CardWrapper>
+		</CardContainer>
 	);
 }
 

frontend/src/container/GantChart/styles.ts

@@ -38,6 +38,7 @@ export const CardWrapper = styled.div`
 export const CardContainer = styled.li`
 	display: flex;
 	width: 100%;
+	position: relative;
 `;
 
 export const CollapseButton = styled.div`

frontend/src/container/GantChart/utils.ts

@@ -1,4 +1,5 @@
-import { ITraceTree } from 'types/api/trace/getTraceItem';
+import { set } from 'lodash-es';
+import { ITraceForest, ITraceTree } from 'types/api/trace/getTraceItem';
 
 interface GetTraceMetaData {
 	globalStart: number;
@@ -65,25 +66,48 @@ export function getTopLeftFromBody(
 
 export const getNodeById = (
 	searchingId: string,
-	treeData: ITraceTree,
-): ITraceTree | undefined => {
-	let foundNode: ITraceTree | undefined;
-	const traverse = (treeNode: ITraceTree, level = 0): void => {
+	treesData: ITraceForest | undefined,
+): ITraceForest => {
+	const newtreeData: ITraceForest = {} as ITraceForest;
+
+	const traverse = (
+		treeNode: ITraceTree,
+		setCallBack: (arg0: ITraceTree) => void,
+		level = 0,
+	): void => {
 		if (!treeNode) {
 			return;
 		}
 
 		if (searchingId === treeNode.id) {
-			foundNode = treeNode;
+			setCallBack(treeNode);
 		}
 
 		treeNode.children.forEach((childNode) => {
-			traverse(childNode, level + 1);
+			traverse(childNode, setCallBack, level + 1);
 		});
 	};
-	traverse(treeData, 1);
 
-	return foundNode;
+	const spanTreeSetCallback = (
+		path: (keyof ITraceForest)[],
+		value: ITraceTree,
+	): ITraceForest => set(newtreeData, path, [value]);
+
+	if (treesData?.spanTree)
+		treesData.spanTree.forEach((tree) => {
+			traverse(tree, (value) => spanTreeSetCallback(['spanTree'], value), 1);
+		});
+
+	if (treesData?.missingSpanTree)
+		treesData.missingSpanTree.forEach((tree) => {
+			traverse(
+				tree,
+				(value) => spanTreeSetCallback(['missingSpanTree'], value),
+				1,
+			);
+		});
+
+	return newtreeData;
 };
 
 const getSpanWithoutChildren = (

frontend/src/container/GridGraphComponent/index.tsx

@@ -1,6 +1,6 @@
 import { Typography } from 'antd';
 import { ChartData } from 'chart.js';
-import Graph, { GraphOnClickHandler } from 'components/Graph';
+import Graph, { GraphOnClickHandler, StaticLineProps } from 'components/Graph';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import ValueGraph from 'components/ValueGraph';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
@@ -18,6 +18,7 @@ function GridGraphComponent({
 	onClickHandler,
 	name,
 	yAxisUnit,
+	staticLine,
 }: GridGraphComponentProps): JSX.Element | null {
 	const location = history.location.pathname;
 
@@ -36,6 +37,7 @@ function GridGraphComponent({
 					onClickHandler,
 					name,
 					yAxisUnit,
+					staticLine,
 				}}
 			/>
 		);
@@ -82,6 +84,7 @@ export interface GridGraphComponentProps {
 	onClickHandler?: GraphOnClickHandler;
 	name: string;
 	yAxisUnit?: string;
+	staticLine?: StaticLineProps;
 }
 
 GridGraphComponent.defaultProps = {
@@ -90,6 +93,7 @@ GridGraphComponent.defaultProps = {
 	isStacked: undefined,
 	onClickHandler: undefined,
 	yAxisUnit: undefined,
+	staticLine: undefined,
 };
 
 export default GridGraphComponent;

frontend/src/container/ListAlertRules/DeleteAlert.tsx

@@ -1,10 +1,11 @@
-import { Button } from 'antd';
 import { NotificationInstance } from 'antd/lib/notification/index';
 import deleteAlerts from 'api/alerts/delete';
 import { State } from 'hooks/useFetch';
 import React, { useState } from 'react';
 import { PayloadProps as DeleteAlertPayloadProps } from 'types/api/alerts/delete';
-import { Alerts } from 'types/api/alerts/getAll';
+import { GettableAlert } from 'types/api/alerts/get';
+
+import { ColumnButton } from './styles';
 
 function DeleteAlert({
 	id,
@@ -72,20 +73,20 @@ function DeleteAlert({
 	};
 
 	return (
-		<Button
+		<ColumnButton
 			disabled={deleteAlertState.loading || false}
 			loading={deleteAlertState.loading || false}
 			onClick={(): Promise<void> => onDeleteHandler(id)}
 			type="link"
 		>
 			Delete
-		</Button>
+		</ColumnButton>
 	);
 }
 
 interface DeleteAlertProps {
-	id: Alerts['id'];
-	setData: React.Dispatch<React.SetStateAction<Alerts[]>>;
+	id: GettableAlert['id'];
+	setData: React.Dispatch<React.SetStateAction<GettableAlert[]>>;
 	notifications: NotificationInstance;
 }
 

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import { PlusOutlined } from '@ant-design/icons';
-import { notification, Tag, Typography } from 'antd';
+import { notification, Typography } from 'antd';
 import Table, { ColumnsType } from 'antd/lib/table';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
@@ -13,15 +13,16 @@ import { UseQueryResult } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { Alerts } from 'types/api/alerts/getAll';
+import { GettableAlert } from 'types/api/alerts/get';
 import AppReducer from 'types/reducer/app';
 
 import DeleteAlert from './DeleteAlert';
-import { Button, ButtonContainer } from './styles';
+import { Button, ButtonContainer, ColumnButton, StyledTag } from './styles';
 import Status from './TableComponents/Status';
+import ToggleAlertState from './ToggleAlertState';
 
 function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
-	const [data, setData] = useState<Alerts[]>(allAlertRules || []);
+	const [data, setData] = useState<GettableAlert[]>(allAlertRules || []);
 	const { t } = useTranslation('common');
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 	const [addNewAlert, action] = useComponentPermission(
@@ -53,27 +54,38 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		history.push(`${ROUTES.EDIT_ALERTS}?ruleId=${id}`);
 	};
 
-	const columns: ColumnsType<Alerts> = [
+	const columns: ColumnsType<GettableAlert> = [
 		{
 			title: 'Status',
 			dataIndex: 'state',
 			key: 'state',
 			sorter: (a, b): number =>
-				b.labels.severity.length - a.labels.severity.length,
+				(b.state ? b.state.charCodeAt(0) : 1000) -
+				(a.state ? a.state.charCodeAt(0) : 1000),
 			render: (value): JSX.Element => <Status status={value} />,
 		},
 		{
 			title: 'Alert Name',
-			dataIndex: 'name',
+			dataIndex: 'alert',
 			key: 'name',
-			sorter: (a, b): number => a.name.charCodeAt(0) - b.name.charCodeAt(0),
+			sorter: (a, b): number =>
+				(a.alert ? a.alert.charCodeAt(0) : 1000) -
+				(b.alert ? b.alert.charCodeAt(0) : 1000),
+			render: (value, record): JSX.Element => (
+				<Typography.Link
+					onClick={(): void => onEditHandler(record.id ? record.id.toString() : '')}
+				>
+					{value}
+				</Typography.Link>
+			),
 		},
 		{
 			title: 'Severity',
 			dataIndex: 'labels',
 			key: 'severity',
 			sorter: (a, b): number =>
-				a.labels.severity.length - b.labels.severity.length,
+				(a.labels ? a.labels.severity.length : 0) -
+				(b.labels ? b.labels.severity.length : 0),
 			render: (value): JSX.Element => {
 				const objectKeys = Object.keys(value);
 				const withSeverityKey = objectKeys.find((e) => e === 'severity') || '';
@@ -83,10 +95,11 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			},
 		},
 		{
-			title: 'Tags',
+			title: 'Labels',
 			dataIndex: 'labels',
 			key: 'tags',
 			align: 'center',
+			width: 350,
 			render: (value): JSX.Element => {
 				const objectKeys = Object.keys(value);
 				const withOutSeverityKeys = objectKeys.filter((e) => e !== 'severity');
@@ -99,9 +112,9 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					<>
 						{withOutSeverityKeys.map((e) => {
 							return (
-								<Tag key={e} color="magenta">
-									{e}
-								</Tag>
+								<StyledTag key={e} color="magenta">
+									{e}: {value[e]}
+								</StyledTag>
 							);
 						})}
 					</>
@@ -115,14 +128,19 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			title: 'Action',
 			dataIndex: 'id',
 			key: 'action',
-			render: (id: Alerts['id']): JSX.Element => {
+			render: (id: GettableAlert['id'], record): JSX.Element => {
 				return (
 					<>
-						<DeleteAlert notifications={notifications} setData={setData} id={id} />
+						<ToggleAlertState disabled={record.disabled} setData={setData} id={id} />
 
-						<Button onClick={(): void => onEditHandler(id.toString())} type="link">
+						<ColumnButton
+							onClick={(): void => onEditHandler(id.toString())}
+							type="link"
+						>
 							Edit
-						</Button>
+						</ColumnButton>
+
+						<DeleteAlert notifications={notifications} setData={setData} id={id} />
 					</>
 				);
 			},
@@ -154,8 +172,10 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 }
 
 interface ListAlertProps {
-	allAlertRules: Alerts[];
-	refetch: UseQueryResult<ErrorResponse | SuccessResponse<Alerts[]>>['refetch'];
+	allAlertRules: GettableAlert[];
+	refetch: UseQueryResult<
+		ErrorResponse | SuccessResponse<GettableAlert[]>
+	>['refetch'];
 }
 
 export default ListAlert;

frontend/src/container/ListAlertRules/TableComponents/Status.tsx

@@ -1,6 +1,6 @@
 import { Tag } from 'antd';
 import React from 'react';
-import { Alerts } from 'types/api/alerts/getAll';
+import { GettableAlert } from 'types/api/alerts/get';
 
 function Status({ status }: StatusProps): JSX.Element {
 	switch (status) {
@@ -16,14 +16,18 @@ function Status({ status }: StatusProps): JSX.Element {
 			return <Tag color="red">Firing</Tag>;
 		}
 
+		case 'disabled': {
+			return <Tag>Disabled</Tag>;
+		}
+
 		default: {
-			return <Tag color="default">Unknown Status</Tag>;
+			return <Tag color="default">Unknown</Tag>;
 		}
 	}
 }
 
 interface StatusProps {
-	status: Alerts['state'];
+	status: GettableAlert['state'];
 }
 
 export default Status;

frontend/src/container/ListAlertRules/ToggleAlertState.tsx

@@ -0,0 +1,108 @@
+import { notification } from 'antd';
+import patchAlert from 'api/alerts/patch';
+import { State } from 'hooks/useFetch';
+import React, { useState } from 'react';
+import { GettableAlert } from 'types/api/alerts/get';
+import { PayloadProps as PatchPayloadProps } from 'types/api/alerts/patch';
+
+import { ColumnButton } from './styles';
+
+function ToggleAlertState({
+	id,
+	disabled,
+	setData,
+}: ToggleAlertStateProps): JSX.Element {
+	const [apiStatus, setAPIStatus] = useState<State<PatchPayloadProps>>({
+		error: false,
+		errorMessage: '',
+		loading: false,
+		success: false,
+		payload: undefined,
+	});
+
+	const defaultErrorMessage = 'Something went wrong';
+
+	const onToggleHandler = async (
+		id: number,
+		disabled: boolean,
+	): Promise<void> => {
+		try {
+			setAPIStatus((state) => ({
+				...state,
+				loading: true,
+			}));
+
+			const response = await patchAlert({
+				id,
+				data: {
+					disabled,
+				},
+			});
+
+			if (response.statusCode === 200) {
+				setData((state) => {
+					return state.map((alert) => {
+						if (alert.id === id) {
+							return {
+								...alert,
+								disabled: response.payload.disabled,
+								state: response.payload.state,
+							};
+						}
+						return alert;
+					});
+				});
+
+				setAPIStatus((state) => ({
+					...state,
+					loading: false,
+					payload: response.payload,
+				}));
+				notification.success({
+					message: 'Success',
+				});
+			} else {
+				setAPIStatus((state) => ({
+					...state,
+					loading: false,
+					error: true,
+					errorMessage: response.error || defaultErrorMessage,
+				}));
+
+				notification.error({
+					message: response.error || defaultErrorMessage,
+				});
+			}
+		} catch (error) {
+			setAPIStatus((state) => ({
+				...state,
+				loading: false,
+				error: true,
+				errorMessage: defaultErrorMessage,
+			}));
+
+			notification.error({
+				message: defaultErrorMessage,
+			});
+		}
+	};
+
+	return (
+		<ColumnButton
+			disabled={apiStatus.loading || false}
+			loading={apiStatus.loading || false}
+			onClick={(): Promise<void> => onToggleHandler(id, !disabled)}
+			type="link"
+		>
+			{disabled ? 'Enable' : 'Disable'}
+		</ColumnButton>
+	);
+}
+
+interface ToggleAlertStateProps {
+	id: GettableAlert['id'];
+	disabled: boolean;
+	setData: React.Dispatch<React.SetStateAction<GettableAlert[]>>;
+}
+
+export default ToggleAlertState;

frontend/src/container/ListAlertRules/styles.ts

@@ -1,4 +1,4 @@
-import { Button as ButtonComponent } from 'antd';
+import { Button as ButtonComponent, Tag } from 'antd';
 import styled from 'styled-components';
 
 export const ButtonContainer = styled.div`
@@ -12,6 +12,20 @@ export const ButtonContainer = styled.div`
 
 export const Button = styled(ButtonComponent)`
 	&&& {
-		margin-left: 1rem;
+		margin-left: 1em;
+	}
+`;
+
+export const ColumnButton = styled(ButtonComponent)`
+	&&& {
+		padding-left: 0;
+		padding-right: 0;
+		margin-right: 1.5em;
+	}
+`;
+
+export const StyledTag = styled(Tag)`
+	&&& {
+		white-space: normal;
 	}
 `;

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

@@ -15,7 +15,11 @@ import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { generatePath } from 'react-router-dom';
+import { Dispatch } from 'redux';
+import AppActions from 'types/actions';
+import { FLUSH_DASHBOARD } from 'types/actions/dashboard';
 import { DashboardData } from 'types/api/dashboard/getAll';
 
 import { EditorContainer, FooterContainer } from './styles';
@@ -30,6 +34,8 @@ function ImportJSON({
 	const [isCreateDashboardError, setIsCreateDashboardError] = useState<boolean>(
 		false,
 	);
+	const dispatch = useDispatch<Dispatch<AppActions>>();
+
 	const [dashboardCreating, setDashboardCreating] = useState<boolean>(false);
 
 	const [editorValue, setEditorValue] = useState<string>('');
@@ -86,6 +92,9 @@ function ImportJSON({
 			});
 
 			if (response.statusCode === 200) {
+				dispatch({
+					type: FLUSH_DASHBOARD,
+				});
 				setTimeout(() => {
 					history.push(
 						generatePath(ROUTES.DASHBOARD, {

frontend/src/container/MetricsApplication/Tabs/DBCall.tsx

@@ -25,7 +25,7 @@ function DBCall({ getWidget }: DBCallProps): JSX.Element {
 							fullViewOptions={false}
 							widget={getWidget([
 								{
-									query: `sum(rate(signoz_db_latency_count{service_name="${servicename}"${resourceAttributePromQLQuery}}[1m])) by (db_system)`,
+									query: `sum(rate(signoz_db_latency_count{service_name="${servicename}"${resourceAttributePromQLQuery}}[5m])) by (db_system)`,
 									legend: '{{db_system}}',
 								},
 							])}

frontend/src/container/MetricsApplication/Tabs/External.tsx

@@ -14,7 +14,7 @@ function External({ getWidget }: ExternalProps): JSX.Element {
 	const { resourceAttributePromQLQuery } = useSelector<AppState, MetricReducer>(
 		(state) => state.metrics,
 	);
-	const legend = '{{http_url}}';
+	const legend = '{{address}}';
 
 	return (
 		<>
@@ -28,7 +28,7 @@ function External({ getWidget }: ExternalProps): JSX.Element {
 								fullViewOptions={false}
 								widget={getWidget([
 									{
-										query: `max((sum(rate(signoz_external_call_latency_count{service_name="${servicename}", status_code="STATUS_CODE_ERROR"${resourceAttributePromQLQuery}}[1m]) OR rate(signoz_external_call_latency_count{service_name="${servicename}", http_status_code=~"5.."${resourceAttributePromQLQuery}}[1m]) OR vector(0)) by (http_url))*100/sum(rate(signoz_external_call_latency_count{service_name="${servicename}"${resourceAttributePromQLQuery}}[1m])) by (http_url)) < 1000 OR vector(0)`,
+										query: `max((sum(rate(signoz_external_call_latency_count{service_name="${servicename}", status_code="STATUS_CODE_ERROR"${resourceAttributePromQLQuery}}[5m]) OR vector(0)) by (address))*100/sum(rate(signoz_external_call_latency_count{service_name="${servicename}"${resourceAttributePromQLQuery}}[5m])) by (address)) < 1000 OR vector(0)`,
 										legend: 'External Call Error Percentage',
 									},
 								])}
@@ -68,7 +68,7 @@ function External({ getWidget }: ExternalProps): JSX.Element {
 								fullViewOptions={false}
 								widget={getWidget([
 									{
-										query: `sum(rate(signoz_external_call_latency_count{service_name="${servicename}"${resourceAttributePromQLQuery}}[5m])) by (http_url)`,
+										query: `sum(rate(signoz_external_call_latency_count{service_name="${servicename}"${resourceAttributePromQLQuery}}[5m])) by (address)`,
 										legend,
 									},
 								])}
@@ -87,7 +87,7 @@ function External({ getWidget }: ExternalProps): JSX.Element {
 								fullViewOptions={false}
 								widget={getWidget([
 									{
-										query: `(sum(rate(signoz_external_call_latency_sum{service_name="${servicename}"${resourceAttributePromQLQuery}}[5m])) by (http_url))/(sum(rate(signoz_external_call_latency_count{service_name="${servicename}"${resourceAttributePromQLQuery}}[5m])) by (http_url))`,
+										query: `(sum(rate(signoz_external_call_latency_sum{service_name="${servicename}"${resourceAttributePromQLQuery}}[5m])) by (address))/(sum(rate(signoz_external_call_latency_count{service_name="${servicename}"${resourceAttributePromQLQuery}}[5m])) by (address))`,
 										legend,
 									},
 								])}

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -7,7 +7,8 @@ import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond';
 import { colors } from 'lib/getRandomColor';
 import history from 'lib/history';
 import { convertRawQueriesToTraceSelectedTags } from 'lib/resourceAttributes';
-import React, { useRef } from 'react';
+import { escapeRegExp } from 'lodash-es';
+import React, { useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -15,7 +16,7 @@ import { PromQLWidgets } from 'types/api/dashboard/getAll';
 import MetricReducer from 'types/reducer/metrics';
 
 import { Card, Col, GraphContainer, GraphTitle, Row } from '../styles';
-import TopEndpointsTable from '../TopEndpointsTable';
+import TopOperationsTable from '../TopOperationsTable';
 import { Button } from './styles';
 
 function Application({ getWidget }: DashboardProps): JSX.Element {
@@ -23,11 +24,17 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 	const selectedTimeStamp = useRef(0);
 
 	const {
-		topEndPoints,
+		topOperations,
 		serviceOverview,
 		resourceAttributePromQLQuery,
 		resourceAttributeQueries,
+		topLevelOperations,
 	} = useSelector<AppState, MetricReducer>((state) => state.metrics);
+	const operationsRegex = useMemo(() => {
+		return encodeURIComponent(
+			topLevelOperations.map((e) => escapeRegExp(e)).join('|'),
+		);
+	}, [topLevelOperations]);
 
 	const selectedTraceTags: string = JSON.stringify(
 		convertRawQueriesToTraceSelectedTags(resourceAttributeQueries, 'array') || [],
@@ -107,7 +114,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 					<Button
 						type="default"
 						size="small"
-						id="Application_button"
+						id="Service_button"
 						onClick={(): void => {
 							onTracePopupClick(selectedTimeStamp.current);
 						}}
@@ -115,13 +122,13 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 						View Traces
 					</Button>
 					<Card>
-						<GraphTitle>Application latency</GraphTitle>
+						<GraphTitle>Latency</GraphTitle>
 						<GraphContainer>
 							<Graph
 								onClickHandler={(ChartEvent, activeElements, chart, data): void => {
-									onClickHandler(ChartEvent, activeElements, chart, data, 'Application');
+									onClickHandler(ChartEvent, activeElements, chart, data, 'Service');
 								}}
-								name="application_latency"
+								name="service_latency"
 								type="line"
 								data={{
 									datasets: [
@@ -175,7 +182,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 					<Button
 						type="default"
 						size="small"
-						id="Request_button"
+						id="Rate_button"
 						onClick={(): void => {
 							onTracePopupClick(selectedTimeStamp.current);
 						}}
@@ -183,21 +190,21 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 						View Traces
 					</Button>
 					<Card>
-						<GraphTitle>Requests</GraphTitle>
+						<GraphTitle>Rate (ops/s)</GraphTitle>
 						<GraphContainer>
 							<FullView
-								name="request_per_sec"
+								name="operations_per_sec"
 								fullViewOptions={false}
 								onClickHandler={(event, element, chart, data): void => {
-									onClickHandler(event, element, chart, data, 'Request');
+									onClickHandler(event, element, chart, data, 'Rate');
 								}}
 								widget={getWidget([
 									{
-										query: `sum(rate(signoz_latency_count{service_name="${servicename}", span_kind="SPAN_KIND_SERVER"${resourceAttributePromQLQuery}}[2m]))`,
-										legend: 'Requests',
+										query: `sum(rate(signoz_latency_count{service_name="${servicename}", operation=~\`${operationsRegex}\`${resourceAttributePromQLQuery}}[5m]))`,
+										legend: 'Operations',
 									},
 								])}
-								yAxisUnit="reqps"
+								yAxisUnit="ops"
 							/>
 						</GraphContainer>
 					</Card>
@@ -227,7 +234,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 								}}
 								widget={getWidget([
 									{
-										query: `max(sum(rate(signoz_calls_total{service_name="${servicename}", span_kind="SPAN_KIND_SERVER", status_code="STATUS_CODE_ERROR"${resourceAttributePromQLQuery}}[1m]) OR rate(signoz_calls_total{service_name="${servicename}", span_kind="SPAN_KIND_SERVER", http_status_code=~"5.."${resourceAttributePromQLQuery}}[1m]))*100/sum(rate(signoz_calls_total{service_name="${servicename}", span_kind="SPAN_KIND_SERVER"${resourceAttributePromQLQuery}}[1m]))) < 1000 OR vector(0)`,
+										query: `max(sum(rate(signoz_calls_total{service_name="${servicename}", operation=~\`${operationsRegex}\`, status_code="STATUS_CODE_ERROR"${resourceAttributePromQLQuery}}[5m]) OR rate(signoz_calls_total{service_name="${servicename}", operation=~\`${operationsRegex}\`, http_status_code=~"5.."${resourceAttributePromQLQuery}}[5m]))*100/sum(rate(signoz_calls_total{service_name="${servicename}", operation=~\`${operationsRegex}\`${resourceAttributePromQLQuery}}[5m]))) < 1000 OR vector(0)`,
 										legend: 'Error Percentage',
 									},
 								])}
@@ -239,7 +246,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 
 				<Col span={12}>
 					<Card>
-						<TopEndpointsTable data={topEndPoints} />
+						<TopOperationsTable data={topOperations} />
 					</Card>
 				</Col>
 			</Row>

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -11,7 +11,7 @@ import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import MetricReducer from 'types/reducer/metrics';
 
-function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
+function TopOperationsTable(props: TopOperationsTableProps): JSX.Element {
 	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@@ -85,7 +85,7 @@ function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
 			title: 'Number of Calls',
 			dataIndex: 'numCalls',
 			key: 'numCalls',
-			sorter: (a: TopEndpointListItem, b: TopEndpointListItem): number =>
+			sorter: (a: TopOperationListItem, b: TopOperationListItem): number =>
 				a.numCalls - b.numCalls,
 		},
 	];
@@ -94,7 +94,7 @@ function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
 		<Table
 			showHeader
 			title={(): string => {
-				return 'Top Endpoints';
+				return 'Key Operations';
 			}}
 			tableLayout="fixed"
 			dataSource={data}
@@ -104,7 +104,7 @@ function TopEndpointsTable(props: TopEndpointsTableProps): JSX.Element {
 	);
 }
 
-interface TopEndpointListItem {
+interface TopOperationListItem {
 	p50: number;
 	p95: number;
 	p99: number;
@@ -112,10 +112,10 @@ interface TopEndpointListItem {
 	name: string;
 }
 
-type DataProps = TopEndpointListItem;
+type DataProps = TopOperationListItem;
 
-interface TopEndpointsTableProps {
-	data: TopEndpointListItem[];
+interface TopOperationsTableProps {
+	data: TopOperationListItem[];
 }
 
-export default TopEndpointsTable;
+export default TopOperationsTable;

frontend/src/container/MetricsTable/index.tsx

@@ -56,14 +56,14 @@ function Metrics(): JSX.Element {
 			render: (value: number): string => (value / 1000000).toFixed(2),
 		},
 		{
-			title: 'Error Rate (in %)',
+			title: 'Error Rate (% of total)',
 			dataIndex: 'errorRate',
 			key: 'errorRate',
 			sorter: (a: DataProps, b: DataProps): number => a.errorRate - b.errorRate,
 			render: (value: number): string => value.toFixed(2),
 		},
 		{
-			title: 'Requests Per Second',
+			title: 'Operations Per Second',
 			dataIndex: 'callRate',
 			key: 'callRate',
 			sorter: (a: DataProps, b: DataProps): number => a.callRate - b.callRate,

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/index.tsx

@@ -29,15 +29,15 @@ function PromQLQueryContainer({
 		toggleDelete,
 	}: IPromQLQueryHandleChange): void => {
 		const allQueries = queryData[WIDGET_PROMQL_QUERY_KEY_NAME];
-		const currentIndexQuery = allQueries[queryIndex];
-		if (query) currentIndexQuery.query = query;
-		if (legend) currentIndexQuery.legend = legend;
+		const currentIndexQuery = allQueries[queryIndex as number];
+		if (query !== undefined) currentIndexQuery.query = query;
+		if (legend !== undefined) currentIndexQuery.legend = legend;
 
 		if (toggleDisable) {
 			currentIndexQuery.disabled = !currentIndexQuery.disabled;
 		}
 		if (toggleDelete) {
-			allQueries.splice(queryIndex, 1);
+			allQueries.splice(queryIndex as number, 1);
 		}
 		updateQueryData({ updatedQuery: { ...queryData } });
 	};

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx

@@ -7,7 +7,7 @@ import { IPromQLQueryHandleChange } from './types';
 
 interface IPromQLQueryBuilderProps {
 	queryData: IPromQLQuery;
-	queryIndex: number;
+	queryIndex: number | string;
 	handleQueryChange: (args: IPromQLQueryHandleChange) => void;
 }
 

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/types.ts

@@ -1,7 +1,7 @@
 import { IPromQLQuery } from 'types/api/dashboard/getAll';
 
 export interface IPromQLQueryHandleChange {
-	queryIndex: number;
+	queryIndex: number | string;
 	query?: IPromQLQuery['query'];
 	legend?: IPromQLQuery['legend'];
 	toggleDisable?: IPromQLQuery['disabled'];

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/formula.tsx

@@ -9,7 +9,7 @@ const { TextArea } = Input;
 
 interface IMetricsBuilderFormulaProps {
 	formulaData: IMetricsBuilderFormula;
-	formulaIndex: number;
+	formulaIndex: number | string;
 	handleFormulaChange: (args: IQueryBuilderFormulaHandleChange) => void;
 }
 function MetricsBuilderFormula({

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/index.tsx

@@ -50,12 +50,12 @@ function QueryBuilderQueryContainer({
 	}: IQueryBuilderQueryHandleChange): void => {
 		const allQueries =
 			queryData[WIDGET_QUERY_BUILDER_QUERY_KEY_NAME].queryBuilder;
-		const currentIndexQuery = allQueries[queryIndex];
+		const currentIndexQuery = allQueries[queryIndex as number];
 		if (aggregateFunction) {
 			currentIndexQuery.aggregateOperator = aggregateFunction;
 		}
 
-		if (metricName) {
+		if (metricName !== undefined) {
 			currentIndexQuery.metricName = metricName;
 		}
 
@@ -78,7 +78,7 @@ function QueryBuilderQueryContainer({
 			currentIndexQuery.disabled = !currentIndexQuery.disabled;
 		}
 		if (toggleDelete) {
-			allQueries.splice(queryIndex, 1);
+			allQueries.splice(queryIndex as number, 1);
 		}
 		updateQueryData({ updatedQuery: { ...queryData } });
 	};
@@ -92,7 +92,7 @@ function QueryBuilderQueryContainer({
 			queryData[WIDGET_QUERY_BUILDER_QUERY_KEY_NAME][
 				WIDGET_QUERY_BUILDER_FORMULA_KEY_NAME
 			];
-		const currentIndexFormula = allFormulas[formulaIndex];
+		const currentIndexFormula = allFormulas[formulaIndex as number];
 
 		if (expression) {
 			currentIndexFormula.expression = expression;
@@ -103,7 +103,7 @@ function QueryBuilderQueryContainer({
 		}
 
 		if (toggleDelete) {
-			allFormulas.splice(formulaIndex, 1);
+			allFormulas.splice(formulaIndex as number, 1);
 		}
 		updateQueryData({ updatedQuery: { ...queryData } });
 	};