release: v0.4.3

* chore: cypress version is updated

* chore: tsconfig is updated

* update: default fixture json for the api are added

* feat: redux-store is exposed to the Cypress

* test: Login test is updated

* test: global time test for default and metrics application is updated

* chore: removed duplicate test case and commented unused lines

.github/workflows/README.md

@@ -23,3 +23,8 @@ To run GitHub workflow, a few environment variables needs to add in GitHub secre
     <td> Docker hub password/token with push permission </td>
     <td> **** </td>
   </tr>
+  <tr>
+    <td> SONAR_TOKEN </td>
+    <td> <a href="https://sonarcloud.io">SonarCloud</a> token </td>
+    <td> **** </td>
+  </tr>

.github/workflows/build.yaml

@@ -37,6 +37,14 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
+      - name: Install dependencies
+        run: cd frontend && yarn install
+      - name: Run Prettier
+        run: cd frontend && npm run prettify
+        continue-on-error: true
+      - name: Run ESLint
+        run: cd frontend && npm run lint
+        continue-on-error: true
       - name: Build frontend docker image
         shell: bash
         run: |

.github/workflows/codeql.yaml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main, v* ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+  schedule:
+    - cron: '32 5 * * 5'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'go', 'javascript', 'python' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.github/workflows/commitlint.yml

@@ -1,5 +1,8 @@
 name: commitlint
 on: [pull_request]
+defaults:
+  run:
+    working-directory: frontend
 jobs:
   lint-commits:
     runs-on: ubuntu-latest
@@ -11,4 +14,5 @@ jobs:
       - uses: actions/setup-node@v2.1.0
       # or just "yarn" if you depend on "@commitlint/cli" already
       - run: yarn add @commitlint/cli
-      - run: yarn run commitlint --from HEAD~${{ github.event.pull_request.commits }} --to HEAD
+      - run: yarn add @commitlint/config-conventional
+      - run: yarn run commitlint --config ./node_modules/@commitlint/config-conventional/index.js  --from HEAD~${{ github.event.pull_request.commits }} --to HEAD

.github/workflows/push.yaml

@@ -6,7 +6,13 @@ on:
       - ^v[0-9]*.[0-9]*.x$
     tags:
       - "*"
-
+  # pull_request:
+  #   branches:
+  #     - main
+  #     - v*
+  #   paths:
+  #     - 'pkg/**'
+  #     - 'frontend/**'
 jobs:
   get-envs:
     runs-on: ubuntu-latest
@@ -21,6 +27,9 @@ jobs:
           then
               echo "tag build"
               img_tag=${GITHUB_REF#refs/*/v}
+          elif [ ${array[1]} == "pull" ]
+          then
+            img_tag="pull-${{ github.event.number }}"
           else
               echo "non tag build"
               img_tag="latest"
@@ -74,7 +83,7 @@ jobs:
         run: |
           branch=${GITHUB_REF#refs/*/}
           array=(`echo ${GITHUB_REF} | sed 's/\//\n/g'`)
-          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
+          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [ ${array[1]} == "pull" ] || [[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
           then
             source env-vars
             make build-push-frontend
@@ -115,7 +124,7 @@ jobs:
         run: |
           branch=${GITHUB_REF#refs/*/}
           array=(`echo ${GITHUB_REF} | sed 's/\//\n/g'`)
-          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
+          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [ ${array[1]} == "pull" ] ||[[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
           then
             source env-vars
             make build-push-query-service
@@ -156,7 +165,7 @@ jobs:
         run: |
           branch=${GITHUB_REF#refs/*/}
           array=(`echo ${GITHUB_REF} | sed 's/\//\n/g'`)
-          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
+          if [ $branch == "main" ] || [ ${array[1]} == "tags" ] || [ ${array[1]} == "pull" ] || [[ $branch =~ ^v[0-9]*.[0-9]*.x$ ]]
           then
             source env-vars
             make build-push-flattener

.github/workflows/sonar.yml

@@ -0,0 +1,27 @@
+name: sonar
+on:
+  pull_request:
+    branches:
+      - main
+      - v*
+    paths:
+      - 'frontend/**'
+defaults:
+  run:
+    working-directory: frontend
+jobs:
+  sonar-analysis:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+        with: 
+          fetch-depth: 0
+      - name: Sonar analysis
+        uses: sonarsource/sonarcloud-github-action@master
+        with:
+          projectBaseDir: frontend
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+      

.gitignore

@@ -1,3 +1,7 @@
+node_modules
+yarn.lock
+package.json
+
 deploy/docker/environment_tiny/common_test
 frontend/node_modules
 frontend/.pnp
@@ -21,6 +25,10 @@ frontend/npm-debug.log*
 frontend/yarn-debug.log*
 frontend/yarn-error.log*
 frontend/src/constants/env.ts
+frontend/cypress/**/*.mp4
+
+# env file for cypress
+frontend/cypress.env.json
 
 .idea
 
@@ -29,5 +37,7 @@ frontend/src/constants/env.ts
 **/build
 **/storage
 **/locust-scripts/__pycache__/
+**/__debug_bin
 
 frontend/*.env
+pkg/query-service/signoz.db

CONTRIBUTING.md

@@ -26,7 +26,7 @@ Need to update [https://github.com/SigNoz/signoz/tree/main/frontend](https://git
 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://join.slack.com/t/signoz-community/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA) and we will DM you with `<test environment URL>`
 
 - `git clone https://github.com/SigNoz/signoz.git && cd signoz/frontend`
-- change baseURL to `<test environment URL>` in file `src/constants/env.ts`
+- Create a file `.env` with `FRONTEND_API_ENDPOINT=<test environment URL>`
 - `yarn install`
 - `yarn dev`
 
@@ -64,11 +64,12 @@ You can always reach out to `ankit@signoz.io` to understand more about the repo
 - If you want to discuss something about the product, start a new [discussion](https://github.com/SigNoz/signoz/discussions)
 
 ### Conventions to follow when submitting commits, PRs
+
 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):` 
+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
 

README.de-de.md

@@ -0,0 +1,160 @@
+<p align="center">
+  <img src="https://res.cloudinary.com/dcv3epinx/image/upload/v1618904450/signoz-images/LogoGithub_sigfbu.svg" alt="SigNoz-logo" width="240" />
+  
+  <p align="center">Überwache deine Anwendungen und behebe Probleme in deinen bereitgestellten Anwendungen. SigNoz ist eine Open Source Alternative zu DataDog, New Relic, etc.</p>
+</p>
+
+<p align="center">
+    <img alt="Lizenz" src="https://img.shields.io/badge/license-MIT-brightgreen"> </a>
+    <img alt="Downloads" src="https://img.shields.io/docker/pulls/signoz/frontend?label=Downloads"> </a>
+    <img alt="GitHub issues" src="https://img.shields.io/github/issues/signoz/signoz"> </a>
+    <a href="https://twitter.com/intent/tweet?text=Monitor%20your%20applications%20and%20troubleshoot%20problems%20with%20SigNoz,%20an%20open-source%20alternative%20to%20DataDog,%20NewRelic.&url=https://signoz.io/&via=SigNozHQ&hashtags=opensource,signoz,observability"> 
+        <img alt="tweet" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a> 
+</p>
+  
+  
+<h3 align="center">
+  <a href="https://signoz.io/docs"><b>Dokumentation</b></a> &bull;
+  <a href="https://github.com/SigNoz/signoz/blob/main/README.zh-cn.md"><b>ReadMe auf Chinesisch</b></a> &bull;
+  <a href="https://github.com/SigNoz/signoz/blob/main/README.pt-br.md"><b>ReadMe auf Portugiesisch</b></a> &bull;
+  <a href="https://bit.ly/signoz-slack"><b>Slack Community</b></a> &bull;
+  <a href="https://twitter.com/SigNozHq"><b>Twitter</b></a>
+</h3>
+
+## 
+
+SigNoz hilft Entwicklern, Anwendungen zu überwachen und Probleme in ihren bereitgestellten Anwendungen zu beheben. SigNoz benutzt verteilte Einzelschritt-Fehlersuchen, um Einblick in deinen Software-Stack zu bekommen.
+
+👉 Du kannst Werte wie die P99-Latenz und die Fehler Häufigkeit von deinen Services, externen API Aufrufen und einzelnen Endpunkten sehen.
+
+👉 Du kannst die Ursache des Problems finden, indem du zu dem Einzelschritt gehst, der das Problem verursacht und dir detaillierte Flamegraphs von einzelnen Abfragefehlersuchen anzeigen lassen.
+
+👉 Erstelle Aggregate auf Basis von Fehlersuche Daten, um geschäftsrelevante Metriken zu erhalten.
+
+![SigNoz Feature](https://signoz-public.s3.us-east-2.amazonaws.com/signoz_hero_github.png)
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Contributing.svg" width="50px" />
+
+## Werde Teil unserer Slack Community
+
+Sag Hi zu uns auf [Slack](https://join.slack.com/t/signoz-community/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA) 👋
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Features.svg" width="50px" />
+
+## Funktionen:
+
+- Übersichtsmetriken deiner Anwendung wie RPS, 50tes/90tes/99tes Quantil Latenzen und Fehler Häufigkeiten.
+- Übersicht der langsamsten Endpunkte deiner Anwendung.
+- Sieh dir die genaue Einzelschritt-Fehlersuche deiner Abfrage an, um Fehler in nachgelagerten Diensten, langsamen Datenbank Abfragen und Aufrufen von Drittanbieter Diensten wie Zahlungsportalen, etc. zu finden.
+- Filtere Einzelschritt-Fehlersuchen nach Dienstname, Latenz, Fehler, Stichworten/ Anmerkungen.
+- Führe Aggregate auf Basis von Einzelschritt-Fehlersuche Daten (Ereignisse/Abstände) aus, um geschäftsrelevante Metriken zu erhalten. Du kannst dir z. B. die Fehlerrate und 99tes Quantil Latenz von `customer_type: gold`, `deployment_version: v2` oder `external_call: paypal` ausgeben lassen.
+- Einheitliche Benutzeroberfläche für Metriken und Einzelschritt-Fehlersuchen. Du musst nicht zwischen Prometheus und Jaeger hin und her wechseln, um Fehler zu beheben.
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/WhatsCool.svg" width="50px" />
+
+## Wieso SigNoz?
+
+Als Entwickler fanden wir es anstrengend, uns für jede kleine Funktion, die wir haben wollten, auf Closed Source SaaS Anbieter verlassen zu müssen. Closed Source Anbieter überraschen ihre Kunden zum Monatsende oft mit hohen Rechnungen, die keine Transparenz bzgl. der Kostenaufteilung bieten.
+
+Wir wollten eine selbst gehostete, Open Source Variante von Lösungen wie DataDog, NewRelic für Firmen anbieten, die Datenschutz und Sicherheitsbedenken haben, bei der Weitergabe von Kundendaten an Drittanbieter.
+
+Open Source gibt dir außerdem die totale Kontrolle über deine Konfiguration, Stichprobenentnahme und Betriebszeit. Du kannst des Weiteren neue Module auf Basis von SigNoz bauen, die erweiterte, geschäftsspezifische Funktionen anbieten.
+
+### Unterstützte Programmiersprachen:
+
+Wir unterstützen [OpenTelemetry](https://opentelemetry.io) als die Software Library, die du nutzen kannst um deine Anwendungen auszuführen. Jedes Framework und jede Sprache die von OpenTelemetry unterstützt wird, wird auch von SigNoz unterstützt. Einige der unterstützten, größeren Programmiersprachen sind:
+
+- Java
+- Python
+- NodeJS
+- Go
+
+Hier findest du die vollständige Liste von unterstützten Programmiersprachen - https://opentelemetry.io/docs/
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Philosophy.svg" width="50px" />
+
+## Erste Schritte mit SigNoz
+  
+  
+### Bereitstellung mit Docker
+
+Bitte folge den [hier](https://signoz.io/docs/deployment/docker/) aufgelisteten Schritten um deine Anwendung mit Docker bereitzustellen.
+
+Die [Anleitungen zur Fehlerbehebung](https://signoz.io/docs/deployment/troubleshooting) könnten hilfreich sein, falls du auf irgendwelche Schwierigkeiten stößt.
+
+<p>&nbsp  </p>
+  
+  
+### Bereitstellung mit Kubernetes und Helm
+
+Bitte folge den [hier](https://signoz.io/docs/deployment/helm_chart) aufgelisteten Schritten, um deine Anwendung mit Helm Charts bereitzustellen.
+  
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/UseSigNoz.svg" width="50px" />
+
+## Vergleiche mit anderen Lösungen
+
+### SigNoz vs. Prometheus
+
+Prometheus ist gut, falls du dich nur für Metriken interessierst. Wenn du eine nahtlose Integration von Metriken und Einzelschritt-Fehlersuchen haben möchtest, ist die Kombination aus Prometheus und Jaeger nicht das Richtige für dich.
+
+Unser Ziel ist es, eine integrierte Benutzeroberfläche aus Metriken und Einzelschritt-Fehlersuchen anzubieten, ähnlich wie es SaaS Anbieter wie Datadog tun, mit der Möglichkeit von erweitertem filtern und aggregieren von Fehlersuchen. Etwas, was in Jaeger aktuell fehlt.
+
+<p>&nbsp  </p>
+
+### SigNoz vs. Jaeger
+
+Jaeger kümmert sich nur um verteilte Einzelschritt-Fehlersuche. SigNoz erstellt sowohl Metriken als auch Einzelschritt-Fehlersuche, daneben haben wir auch Protokoll Verwaltung auf unserem Plan.
+
+Außerdem hat SigNoz noch mehr spezielle Funktionen im Vergleich zu Jaeger:
+
+- Jaeger UI zeigt keine Metriken für Einzelschritt-Fehlersuchen oder für gefilterte Einzelschritt-Fehlersuchen an
+- Jaeger erstellt keine Aggregate für gefilterte Einzelschritt-Fehlersuchen, z. B. die P99 Latenz von Abfragen mit dem Tag - customer_type='premium', was hingegen mit SigNoz leicht umsetzbar ist.
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Contributors.svg" width="50px" />
+
+## Zum Projekt beitragen
+
+
+Wir ❤️  Beiträge zum Projekt, egal ob große oder kleine. Bitte lies dir zuerst die [CONTRIBUTING.md](CONTRIBUTING.md) durch, bevor du anfängst, Beiträge zu SigNoz zu machen.
+
+Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem `#contributing` Kanal in unserer [Slack Community](https://join.slack.com/t/signoz-community/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA).
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/DevelopingLocally.svg" width="50px" />
+
+## Dokumentation
+
+Du findest unsere Dokumentation unter https://signoz.io/docs/. Falls etwas unverständlich ist oder fehlt, öffne gerne ein Github Issue mit dem Label `documentation` oder schreib uns über den Community Slack Channel.
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Contributing.svg" width="50px" />
+
+## Community
+
+Werde Teil der [Slack Community](https://join.slack.com/t/signoz-community/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA) um mehr über verteilte Einzelschritt-Fehlersuche, Messung von Systemzuständen oder SigNoz zu erfahren und sich mit anderen Nutzern und Mitwirkenden in Verbindung zu setzen.
+
+Falls du irgendwelche Ideen, Fragen oder Feedback hast, kannst du sie gerne über unsere [Github Discussions](https://github.com/SigNoz/signoz/discussions) mit uns teilen.
+
+Wie immer, danke an unsere großartigen Unterstützer!
+
+<a href="https://github.com/signoz/signoz/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=signoz/signoz" />
+</a>
+
+
+

README.md

@@ -16,6 +16,8 @@
 <h3 align="center">
   <a href="https://signoz.io/docs"><b>Documentation</b></a> &bull;
   <a href="https://github.com/SigNoz/signoz/blob/main/README.zh-cn.md"><b>ReadMe in Chinese</b></a> &bull;
+  <a href="https://github.com/SigNoz/signoz/blob/main/README.de-de.md"><b>ReadMe in German</b></a> &bull;
+  <a href="https://github.com/SigNoz/signoz/blob/main/README.pt-br.md"><b>ReadMe in Portuguese</b></a> &bull;
   <a href="https://bit.ly/signoz-slack"><b>Slack Community</b></a> &bull;
   <a href="https://twitter.com/SigNozHq"><b>Twitter</b></a>
 </h3>
@@ -28,6 +30,8 @@ SigNoz helps developers monitor applications and troubleshoot problems in their
 
 👉 You can find the root cause of the problem by going to the exact traces which are causing the problem and see detailed flamegraphs of individual request traces.
 
+👉 Run aggregates on trace data to get business relevant metrics
+
 
 ![SigNoz Feature](https://signoz-public.s3.us-east-2.amazonaws.com/signoz_hero_github.png)
 
@@ -49,7 +53,7 @@ Come say Hi to us on [Slack](https://join.slack.com/t/signoz-community/shared_in
 - Slowest endpoints in your application
 - See exact request trace to figure out issues in downstream services, slow DB queries, call to 3rd party services like payment gateways, etc
 - Filter traces by service name, operation, latency, error, tags/annotations.
-- Aggregate metrics on filtered traces. Eg, you can get error rate and 99th percentile latency of `customer_type: gold` or `deployment_version: v2` or `external_call: paypal`
+- Run aggregates on trace data (events/spans) to get business relevant metrics. e.g. You can get error rate and 99th percentile latency of `customer_type: gold` or `deployment_version: v2` or `external_call: paypal`
 - Unified UI for metrics and traces. No need to switch from Prometheus to Jaeger to debug issues.
 
 <br /><br />

README.pt-br.md

@@ -0,0 +1,159 @@
+<p align="center">
+  <img src="https://res.cloudinary.com/dcv3epinx/image/upload/v1618904450/signoz-images/LogoGithub_sigfbu.svg" alt="SigNoz-logo" width="240" />
+
+  <p align="center">Monitore seus aplicativos e solucione problemas em seus aplicativos implantados, uma alternativa de código aberto para soluções como DataDog, New Relic, entre outras.</p>
+</p>
+
+<p align="center">
+    <img alt="License" src="https://img.shields.io/badge/license-MIT-brightgreen"> </a>
+    <img alt="Downloads" src="https://img.shields.io/docker/pulls/signoz/frontend?label=Downloads"> </a>
+    <img alt="GitHub issues" src="https://img.shields.io/github/issues/signoz/signoz"> </a>
+    <a href="https://twitter.com/intent/tweet?text=Monitor%20your%20applications%20and%20troubleshoot%20problems%20with%20SigNoz,%20an%20open-source%20alternative%20to%20DataDog,%20NewRelic.&url=https://signoz.io/&via=SigNozHQ&hashtags=opensource,signoz,observability"> 
+        <img alt="tweet" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a> 
+</p>
+  
+  
+<h3 align="center">
+  <a href="https://signoz.io/docs"><b>Documentação</b></a> &bull;
+  <a href="https://bit.ly/signoz-slack"><b>Comunidade no Slack</b></a> &bull;
+  <a href="https://twitter.com/SigNozHq"><b>Twitter</b></a>
+</h3>
+
+##
+
+SigNoz auxilia os desenvolvedores a monitorarem aplicativos e solucionar problemas em seus aplicativos implantados. SigNoz usa rastreamento distribuído para obter visibilidade em sua pilha de software. 
+
+👉 Você pode verificar métricas como latência p99, taxas de erro em seus serviços, requisições às APIs externas e endpoints individuais.
+
+👉 Você pode encontrar a causa raiz do problema acessando os rastreamentos exatos que estão causando o problema e verificar os quadros detalhados de cada requisição individual.
+
+👉 Execute agregações em dados de rastreamento para obter métricas de negócios relevantes.
+
+
+![SigNoz Feature](https://signoz-public.s3.us-east-2.amazonaws.com/signoz_hero_github.png)
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Contributing.svg" width="50px" />
+
+## Junte-se à nossa comunidade no Slack 
+
+Venha dizer oi para nós no [Slack](https://join.slack.com/t/signoz-community/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA) 👋
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Features.svg" width="50px" />
+
+## Funções:
+
+- Métricas de visão geral do aplicativo, como RPS, latências de percentual 50/90/99 e taxa de erro
+- Endpoints mais lentos em seu aplicativo
+- Visualize o rastreamento preciso de requisições de rede para descobrir problemas em serviços downstream, consultas lentas de banco de dados, chamadas para serviços de terceiros, como gateways de pagamento, etc. 
+- Filtre os rastreamentos por nome de serviço, operação, latência, erro, tags / anotações.
+- Execute agregações em dados de rastreamento (eventos / extensões) para obter métricas de negócios relevantes, como por exemplo, você pode obter a taxa de erro e a latência do 99º percentil de `customer_type: gold` or `deployment_version: v2` or `external_call: paypal`
+- Interface de Usuário unificada para métricas e rastreios. Não há necessidade de mudar de Prometheus para Jaeger para depurar problemas.
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/WhatsCool.svg" width="50px" />
+
+## Por que escolher SigNoz?
+
+Sendo desenvolvedores, achamos irritante contar com fornecedores de SaaS de código fechado para cada pequeno recurso que queríamos. Fornecedores de código fechado costumam surpreendê-lo com enormes contas no final do mês de uso sem qualquer transparência .
+
+Queríamos fazer uma versão auto-hospedada e de código aberto de ferramentas como DataDog, NewRelic para empresas que têm preocupações com privacidade e segurança em ter dados de clientes indo para serviços de terceiros. 
+
+Ser open source também oferece controle completo de sua configuração, amostragem e tempos de atividade. Você também pode construir módulos sobre o SigNoz para estender recursos específicos do negócio.
+
+### Linguagens Suportadas:
+
+Nós apoiamos a biblioteca [OpenTelemetry](https://opentelemetry.io) como a biblioteca que você pode usar para instrumentar seus aplicativos. Em outras palavras, SigNoz oferece suporte a qualquer framework e linguagem que suporte a biblioteca OpenTelemetry. As principais linguagens suportadas incluem: 
+
+- Java
+- Python
+- NodeJS
+- Go
+
+Você pode encontrar a lista completa de linguagens aqui - https://opentelemetry.io/docs/
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Philosophy.svg" width="50px" />
+
+## Iniciando
+  
+  
+### Implantar usando Docker
+
+Siga as etapas listadas [aqui](https://signoz.io/docs/deployment/docker/) para instalar usando o Docker.
+
+Esse [guia para solução de problemas](https://signoz.io/docs/deployment/troubleshooting) pode ser útil se você enfrentar quaisquer problemas. 
+
+<p>&nbsp  </p>
+  
+  
+### Implentar no Kubernetes usando Helm
+
+Siga as etapas listadas [aqui](https://signoz.io/docs/deployment/helm_chart) para instalar usando helm charts.
+  
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/UseSigNoz.svg" width="50px" />
+
+## Comparações com ferramentas similares 
+
+### SigNoz ou Prometheus
+
+Prometheus é bom se você quiser apenas fazer métricas. Mas se você quiser ter uma experiência perfeita entre métricas e rastreamentos, a experiência atual de unir Prometheus e Jaeger não é ótima.
+
+Nosso objetivo é fornecer uma interface do usuário integrada entre métricas e rastreamentos - semelhante ao que fornecedores de SaaS como o Datadog fornecem - e fornecer filtragem e agregação avançada sobre rastreamentos, algo que a Jaeger atualmente carece. 
+
+<p>&nbsp  </p>
+
+### SigNoz ou Jaeger
+
+Jaeger só faz rastreamento distribuído. SigNoz faz métricas e rastreia, e também temos gerenciamento de log em nossos planos.
+
+Além disso, SigNoz tem alguns recursos mais avançados do que Jaeger:
+
+- A interface de usuário do Jaegar não mostra nenhuma métrica em traces ou em traces filtrados
+- Jaeger não pode obter agregados em rastros filtrados. Por exemplo, latência p99 de solicitações que possuem tag - customer_type='premium'. Isso pode ser feito facilmente com SigNoz.
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Contributors.svg" width="50px" />
+
+## Contribuindo
+
+
+Nós ❤️ contribuições grandes ou pequenas. Leia [CONTRIBUTING.md](CONTRIBUTING.md) para começar a fazer contribuições para o SigNoz. 
+
+Não sabe como começar? Basta enviar um sinal para nós no canal `#contributing` em nossa [comunidade no Slack.](https://join.slack.com/t/signoz-community/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA)
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/DevelopingLocally.svg" width="50px" />
+
+## Documentação
+
+Você pode encontrar a documentação em https://signoz.io/docs/. Se você tiver alguma dúvida ou sentir falta de algo, sinta-se à vontade para criar uma issue com a tag `documentation` no GitHub ou entre em contato conosco no canal da comunidade no Slack.
+
+<br /><br />
+
+<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Contributing.svg" width="50px" />
+
+## Comunidade
+
+Junte-se a [comunidade no Slack](https://join.slack.com/t/signoz-community/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA) para saber mais sobre rastreamento distribuído, observabilidade ou SigNoz e para se conectar com outros usuários e colaboradores. 
+
+Se você tiver alguma ideia, pergunta ou feedback, compartilhe em nosso [Github Discussões](https://github.com/SigNoz/signoz/discussions)
+
+Como sempre, obrigado aos nossos incríveis colaboradores! 
+
+<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

@@ -0,0 +1,517 @@
+<?xml version="1.0"?>
+<yandex>
+    <logger>
+        <level>trace</level>
+        <log>/var/log/clickhouse-server/clickhouse-server.log</log>
+        <errorlog>/var/log/clickhouse-server/clickhouse-server.err.log</errorlog>
+        <size>1000M</size>
+        <count>10</count>
+    </logger>
+
+    <http_port>8123</http_port>
+    <tcp_port>9000</tcp_port>
+
+    <!-- For HTTPS and SSL over native protocol. -->
+    <!--
+    <https_port>8443</https_port>
+    <tcp_ssl_port>9440</tcp_ssl_port>
+-->
+
+<!-- Used with https_port and tcp_ssl_port. Full ssl options list: https://github.com/yandex/ClickHouse/blob/master/contrib/libpoco/NetSSL_OpenSSL/include/Poco/Net/SSLManager.h#L71 -->
+<openSSL>
+    <server> <!-- Used for https server AND secure tcp port -->
+        <!-- openssl req -subj "/CN=localhost" -new -newkey rsa:2048 -days 365 -nodes -x509 -keyout /etc/clickhouse-server/server.key -out /etc/clickhouse-server/server.crt -->
+        <certificateFile>/etc/clickhouse-server/server.crt</certificateFile>
+        <privateKeyFile>/etc/clickhouse-server/server.key</privateKeyFile>
+        <!-- openssl dhparam -out /etc/clickhouse-server/dhparam.pem 4096 -->
+        <dhParamsFile>/etc/clickhouse-server/dhparam.pem</dhParamsFile>
+        <verificationMode>none</verificationMode>
+        <loadDefaultCAFile>true</loadDefaultCAFile>
+        <cacheSessions>true</cacheSessions>
+        <disableProtocols>sslv2,sslv3</disableProtocols>
+        <preferServerCiphers>true</preferServerCiphers>
+    </server>
+
+    <client> <!-- Used for connecting to https dictionary source -->
+        <loadDefaultCAFile>true</loadDefaultCAFile>
+        <cacheSessions>true</cacheSessions>
+        <disableProtocols>sslv2,sslv3</disableProtocols>
+        <preferServerCiphers>true</preferServerCiphers>
+        <!-- Use for self-signed: <verificationMode>none</verificationMode> -->
+        <invalidCertificateHandler>
+            <!-- Use for self-signed: <name>AcceptCertificateHandler</name> -->
+            <name>RejectCertificateHandler</name>
+        </invalidCertificateHandler>
+    </client>
+</openSSL>
+
+<!-- Default root page on http[s] server. For example load UI from https://tabix.io/ when opening http://localhost:8123 -->
+    <!--
+    <http_server_default_response><![CDATA[<html ng-app="SMI2"><head><base href="http://ui.tabix.io/"></head><body><div ui-view="" class="content-ui"></div><script src="http://loader.tabix.io/master.js"></script></body></html>]]></http_server_default_response>
+-->
+
+<!-- Port for communication between replicas. Used for data exchange. -->
+<interserver_http_port>9009</interserver_http_port>
+
+    <!-- Hostname that is used by other replicas to request this server.
+         If not specified, than it is determined analoguous to 'hostname -f' command.
+         This setting could be used to switch replication to another network interface.
+     -->
+    <!--
+    <interserver_http_host>example.yandex.ru</interserver_http_host>
+-->
+
+<!-- Listen specified host. use :: (wildcard IPv6 address), if you want to accept connections both with IPv4 and IPv6 from everywhere. -->
+<listen_host>::</listen_host>
+<!-- Same for hosts with disabled ipv6: -->
+<!-- <listen_host>0.0.0.0</listen_host> -->
+
+<!-- Default values - try listen localhost on ipv4 and ipv6: -->
+<!-- <listen_host>0.0.0.0</listen_host> -->
+
+<max_connections>4096</max_connections>
+<keep_alive_timeout>3</keep_alive_timeout>
+
+<!-- Maximum number of concurrent queries. -->
+<max_concurrent_queries>100</max_concurrent_queries>
+
+    <!-- Set limit on number of open files (default: maximum). This setting makes sense on Mac OS X because getrlimit() fails to retrieve
+    correct maximum value. -->
+    <!-- <max_open_files>262144</max_open_files> -->
+
+    <!-- Size of cache of uncompressed blocks of data, used in tables of MergeTree family.
+         In bytes. Cache is single for server. Memory is allocated only on demand.
+         Cache is used when 'use_uncompressed_cache' user setting turned on (off by default).
+         Uncompressed cache is advantageous only for very short queries and in rare cases.
+     -->
+     <uncompressed_cache_size>8589934592</uncompressed_cache_size>
+
+    <!-- Approximate size of mark cache, used in tables of MergeTree family.
+         In bytes. Cache is single for server. Memory is allocated only on demand.
+         You should not lower this value.
+     -->
+     <mark_cache_size>5368709120</mark_cache_size>
+
+
+     <!-- Path to data directory, with trailing slash. -->
+     <path>/var/lib/clickhouse/</path>
+
+     <!-- Path to temporary data for processing hard queries. -->
+     <tmp_path>/var/lib/clickhouse/tmp/</tmp_path>
+
+     <!-- Path to configuration file with users, access rights, profiles of settings, quotas. -->
+     <users_config>users.xml</users_config>
+
+     <!-- Default profile of settings.. -->
+     <default_profile>default</default_profile>
+
+     <!-- Default database. -->
+     <default_database>default</default_database>
+
+    <!-- Server time zone could be set here.
+
+         Time zone is used when converting between String and DateTime types,
+          when printing DateTime in text formats and parsing DateTime from text,
+          it is used in date and time related functions, if specific time zone was not passed as an argument.
+
+         Time zone is specified as identifier from IANA time zone database, like UTC or Africa/Abidjan.
+         If not specified, system time zone at server startup is used.
+
+         Please note, that server could display time zone alias instead of specified name.
+         Example: W-SU is an alias for Europe/Moscow and Zulu is an alias for UTC.
+     -->
+     <!-- <timezone>Europe/Moscow</timezone> -->
+
+    <!-- You can specify umask here (see "man umask"). Server will apply it on startup.
+         Number is always parsed as octal. Default umask is 027 (other users cannot read logs, data files, etc; group can only read).
+     -->
+     <!-- <umask>022</umask> -->
+
+    <!-- Configuration of clusters that could be used in Distributed tables.
+         https://clickhouse.yandex/reference_en.html#Distributed
+     -->
+     <remote_servers incl="clickhouse_remote_servers" >
+        <!-- Test only shard config for testing distributed storage -->
+        <test_shard_localhost>
+            <shard>
+                <replica>
+                    <host>localhost</host>
+                    <port>9000</port>
+                </replica>
+            </shard>
+        </test_shard_localhost>
+    </remote_servers>
+
+
+    <!-- If element has 'incl' attribute, then for it's value will be used corresponding substitution from another file.
+         By default, path to file with substitutions is /etc/metrika.xml. It could be changed in config in 'include_from' element.
+         Values for substitutions are specified in /yandex/name_of_substitution elements in that file.
+     -->
+
+    <!-- ZooKeeper is used to store metadata about replicas, when using Replicated tables.
+         Optional. If you don't use replicated tables, you could omit that.
+
+         See https://clickhouse.yandex/reference_en.html#Data%20replication
+     -->
+     <zookeeper incl="zookeeper-servers" optional="true" />
+
+    <!-- Substitutions for parameters of replicated tables.
+          Optional. If you don't use replicated tables, you could omit that.
+
+         See https://clickhouse.yandex/reference_en.html#Creating%20replicated%20tables
+     -->
+     <macros incl="macros" optional="true" />
+
+
+     <!-- Reloading interval for embedded dictionaries, in seconds. Default: 3600. -->
+     <builtin_dictionaries_reload_interval>3600</builtin_dictionaries_reload_interval>
+
+
+     <!-- Maximum session timeout, in seconds. Default: 3600. -->
+     <max_session_timeout>3600</max_session_timeout>
+
+     <!-- Default session timeout, in seconds. Default: 60. -->
+     <default_session_timeout>60</default_session_timeout>
+
+     <!-- Sending data to Graphite for monitoring. Several sections can be defined. -->
+    <!--
+        interval - send every X second
+        root_path - prefix for keys
+        hostname_in_path - append hostname to root_path (default = true)
+        metrics - send data from table system.metrics
+        events - send data from table system.events
+        asynchronous_metrics - send data from table system.asynchronous_metrics
+    -->
+    <!--
+    <graphite>
+        <host>localhost</host>
+        <port>42000</port>
+        <timeout>0.1</timeout>
+        <interval>60</interval>
+        <root_path>one_min</root_path>
+        <hostname_in_path>true<hostname_in_path>
+
+        <metrics>true</metrics>
+        <events>true</events>
+        <asynchronous_metrics>true</asynchronous_metrics>
+    </graphite>
+    <graphite>
+        <host>localhost</host>
+        <port>42000</port>
+        <timeout>0.1</timeout>
+        <interval>1</interval>
+        <root_path>one_sec</root_path>
+
+        <metrics>true</metrics>
+        <events>true</events>
+        <asynchronous_metrics>false</asynchronous_metrics>
+    </graphite>
+-->
+
+
+<!-- Query log. Used only for queries with setting log_queries = 1. -->
+<query_log>
+        <!-- What table to insert data. If table is not exist, it will be created.
+             When query log structure is changed after system update,
+              then old table will be renamed and new table will be created automatically.
+          -->
+          <database>system</database>
+          <table>query_log</table>
+
+          <!-- Interval of flushing data. -->
+          <flush_interval_milliseconds>7500</flush_interval_milliseconds>
+      </query_log>
+
+
+    <!-- Uncomment if use part_log
+    <part_log>
+        <database>system</database>
+        <table>part_log</table>
+
+        <flush_interval_milliseconds>7500</flush_interval_milliseconds>
+    </part_log>
+-->
+
+
+    <!-- Parameters for embedded dictionaries, used in Yandex.Metrica.
+         See https://clickhouse.yandex/reference_en.html#Internal%20dictionaries
+     -->
+
+     <!-- Path to file with region hierarchy. -->
+     <!-- <path_to_regions_hierarchy_file>/opt/geo/regions_hierarchy.txt</path_to_regions_hierarchy_file> -->
+
+     <!-- Path to directory with files containing names of regions -->
+     <!-- <path_to_regions_names_files>/opt/geo/</path_to_regions_names_files> -->
+
+
+    <!-- Configuration of external dictionaries. See:
+         https://clickhouse.yandex/reference_en.html#External%20Dictionaries
+     -->
+     <dictionaries_config>*_dictionary.xml</dictionaries_config>
+
+    <!-- Uncomment if you want data to be compressed 30-100% better.
+         Don't do that if you just started using ClickHouse.
+     -->
+     <compression incl="clickhouse_compression">
+    <!--
+        <!- - Set of variants. Checked in order. Last matching case wins. If nothing matches, lz4 will be used. - ->
+        <case>
+
+            <!- - Conditions. All must be satisfied. Some conditions may be omitted. - ->
+            <min_part_size>10000000000</min_part_size>        <!- - Min part size in bytes. - ->
+            <min_part_size_ratio>0.01</min_part_size_ratio>   <!- - Min size of part relative to whole table size. - ->
+
+            <!- - What compression method to use. - ->
+            <method>zstd</method>
+        </case>
+    -->
+</compression>
+
+    <!-- Allow to execute distributed DDL queries (CREATE, DROP, ALTER, RENAME) on cluster.
+    Works only if ZooKeeper is enabled. Comment it if such functionality isn't required. -->
+    <distributed_ddl>
+        <!-- Path in ZooKeeper to queue with DDL queries -->
+        <path>/clickhouse/task_queue/ddl</path>
+    </distributed_ddl>
+
+    <!-- Settings to fine tune MergeTree tables. See documentation in source code, in MergeTreeSettings.h -->
+    <!--
+    <merge_tree>
+        <max_suspicious_broken_parts>5</max_suspicious_broken_parts>
+    </merge_tree>
+-->
+
+    <!-- Protection from accidental DROP.
+         If size of a MergeTree table is greater than max_table_size_to_drop (in bytes) than table could not be dropped with any DROP query.
+         If you want do delete one table and don't want to restart clickhouse-server, you could create special file <clickhouse-path>/flags/force_drop_table and make DROP once.
+         By default max_table_size_to_drop is 50GB, max_table_size_to_drop=0 allows to DROP any tables.
+         Uncomment to disable protection.
+     -->
+     <!-- <max_table_size_to_drop>0</max_table_size_to_drop> -->
+
+     <!-- Example of parameters for GraphiteMergeTree table engine -->
+     <graphite_rollup>
+        <!-- carbon -->
+        <pattern>
+            <regexp>^carbon\.</regexp>
+            <function>any</function>
+            <retention>
+                <age>0</age>
+                <precision>60</precision>
+            </retention>
+            <retention>
+                <age>7776000</age>
+                <precision>3600</precision>
+            </retention>
+            <retention>
+                <age>10368000</age>
+                <precision>21600</precision>
+            </retention>
+            <retention>
+                <age>34560000</age>
+                <precision>43200</precision>
+            </retention>
+            <retention>
+                <age>63072000</age>
+                <precision>86400</precision>
+            </retention>
+            <retention>
+                <age>94608000</age>
+                <precision>604800</precision>
+            </retention>
+        </pattern>
+        <!-- collectd -->
+        <pattern>
+            <regexp>^collectd\.</regexp>
+            <function>any</function>
+            <retention>
+                <age>0</age>
+                <precision>10</precision>
+            </retention>
+            <retention>
+                <age>43200</age>
+                <precision>60</precision>
+            </retention>
+            <retention>
+                <age>864000</age>
+                <precision>900</precision>
+            </retention>
+            <retention>
+                <age>1728000</age>
+                <precision>1800</precision>
+            </retention>
+            <retention>
+                <age>3456000</age>
+                <precision>3600</precision>
+            </retention>
+            <retention>
+                <age>10368000</age>
+                <precision>21600</precision>
+            </retention>
+            <retention>
+                <age>34560000</age>
+                <precision>43200</precision>
+            </retention>
+            <retention>
+                <age>63072000</age>
+                <precision>86400</precision>
+            </retention>
+            <retention>
+                <age>94608000</age>
+                <precision>604800</precision>
+            </retention>
+        </pattern>
+        <!-- high -->
+        <pattern>
+            <regexp>^high\.</regexp>
+            <function>any</function>
+            <retention>
+                <age>0</age>
+                <precision>10</precision>
+            </retention>
+            <retention>
+                <age>172800</age>
+                <precision>60</precision>
+            </retention>
+            <retention>
+                <age>864000</age>
+                <precision>900</precision>
+            </retention>
+            <retention>
+                <age>1728000</age>
+                <precision>1800</precision>
+            </retention>
+            <retention>
+                <age>3456000</age>
+                <precision>3600</precision>
+            </retention>
+            <retention>
+                <age>10368000</age>
+                <precision>21600</precision>
+            </retention>
+            <retention>
+                <age>34560000</age>
+                <precision>43200</precision>
+            </retention>
+            <retention>
+                <age>63072000</age>
+                <precision>86400</precision>
+            </retention>
+            <retention>
+                <age>94608000</age>
+                <precision>604800</precision>
+            </retention>
+        </pattern>
+        <!-- medium -->
+        <pattern>
+            <regexp>^medium\.</regexp>
+            <function>any</function>
+            <retention>
+                <age>0</age>
+                <precision>60</precision>
+            </retention>
+            <retention>
+                <age>864000</age>
+                <precision>900</precision>
+            </retention>
+            <retention>
+                <age>1728000</age>
+                <precision>1800</precision>
+            </retention>
+            <retention>
+                <age>3456000</age>
+                <precision>3600</precision>
+            </retention>
+            <retention>
+                <age>10368000</age>
+                <precision>21600</precision>
+            </retention>
+            <retention>
+                <age>34560000</age>
+                <precision>43200</precision>
+            </retention>
+            <retention>
+                <age>63072000</age>
+                <precision>86400</precision>
+            </retention>
+            <retention>
+                <age>94608000</age>
+                <precision>604800</precision>
+            </retention>
+        </pattern>
+        <!-- low -->
+        <pattern>
+            <regexp>^low\.</regexp>
+            <function>any</function>
+            <retention>
+                <age>0</age>
+                <precision>600</precision>
+            </retention>
+            <retention>
+                <age>15552000</age>
+                <precision>1800</precision>
+            </retention>
+            <retention>
+                <age>31536000</age>
+                <precision>3600</precision>
+            </retention>
+            <retention>
+                <age>63072000</age>
+                <precision>21600</precision>
+            </retention>
+            <retention>
+                <age>126144000</age>
+                <precision>43200</precision>
+            </retention>
+            <retention>
+                <age>252288000</age>
+                <precision>86400</precision>
+            </retention>
+            <retention>
+                <age>315360000</age>
+                <precision>604800</precision>
+            </retention>
+        </pattern>
+        <!-- default -->
+        <default>
+            <function>any</function>
+            <retention>
+                <age>0</age>
+                <precision>60</precision>
+            </retention>
+            <retention>
+                <age>864000</age>
+                <precision>900</precision>
+            </retention>
+            <retention>
+                <age>1728000</age>
+                <precision>1800</precision>
+            </retention>
+            <retention>
+                <age>3456000</age>
+                <precision>3600</precision>
+            </retention>
+            <retention>
+                <age>10368000</age>
+                <precision>21600</precision>
+            </retention>
+            <retention>
+                <age>34560000</age>
+                <precision>43200</precision>
+            </retention>
+            <retention>
+                <age>63072000</age>
+                <precision>86400</precision>
+            </retention>
+            <retention>
+                <age>94608000</age>
+                <precision>604800</precision>
+            </retention>
+        </default>
+    </graphite_rollup>
+
+    <!-- Directory in <clickhouse-path> containing schema files for various input formats.
+         The directory will be created if it doesn't exist.
+     -->
+     <format_schema_path>/var/lib/clickhouse/format_schemas/</format_schema_path>
+ </yandex>

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

@@ -0,0 +1,113 @@
+version: "3"
+
+services:
+  clickhouse:
+      image: yandex/clickhouse-server
+      expose:
+        - 8123
+        - 9000
+      ports:
+        - 9001:9000
+        - 8123:8123
+      volumes:
+        - ./clickhouse-config.xml:/etc/clickhouse-server/config.xml
+        - ./docker-entrypoint-initdb.d/init-db.sql:/docker-entrypoint-initdb.d/init-db.sql
+        - ./data/clickhouse/:/var/lib/clickhouse/
+
+      healthcheck:
+        # "clickhouse", "client", "-u ${CLICKHOUSE_USER}", "--password ${CLICKHOUSE_PASSWORD}", "-q 'SELECT 1'"
+        test: ["CMD", "wget", "--spider", "-q", "localhost:8123/ping"]
+        interval: 30s
+        timeout: 5s
+        retries: 3
+
+  query-service:
+    image: signoz/query-service:0.4.1
+    container_name: query-service
+    restart: always
+    command: ["-config=/root/config/prometheus.yml"]
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./prometheus.yml:/root/config/prometheus.yml
+      - ../dashboards:/root/config/dashboards
+      - ./data/signoz/:/var/lib/signoz/
+    environment:
+      - ClickHouseUrl=tcp://clickhouse:9000
+      - STORAGE=clickhouse
+      - POSTHOG_API_KEY=H-htDCae7CR3RV57gUzmol6IAKtm5IMCvbcm_fwnL-w
+      - GODEBUG=netdns=go
+    depends_on:
+    - clickhouse
+
+
+  frontend:
+    image: signoz/frontend:0.4.1
+    container_name: frontend
+
+    depends_on:
+      - query-service
+    links:
+      - "query-service"
+    ports:
+      - "3000:3000"
+    volumes:
+      - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
+
+
+  otel-collector:
+    image: signoz/otelcontribcol:0.4.0
+    command: ["--config=/etc/otel-collector-config.yaml", "--mem-ballast-size-mib=2000"]
+    volumes:
+      - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
+    ports:
+      - "1777:1777"   # pprof extension
+      - "8887:8888"   # Prometheus metrics exposed by the agent
+      - "14268:14268"       # Jaeger receiver
+      - "55678"       # OpenCensus receiver
+      - "55680:55680"       # OTLP HTTP/2.0 legacy port
+      - "55681:55681"       # OTLP HTTP/1.0 receiver
+      - "4317:4317"       # OTLP GRPC receiver
+      - "55679:55679" # zpages extension
+      - "13133"       # health_check
+    deploy:
+      mode: replicated
+      replicas: 3
+    depends_on:
+    - clickhouse
+
+  otel-collector-hostmetrics:
+    image: signoz/otelcontribcol:0.4.0
+    command: ["--config=/etc/otel-collector-config-hostmetrics.yaml", "--mem-ballast-size-mib=683"]
+    volumes:
+      - ./otel-collector-config-hostmetrics.yaml:/etc/otel-collector-config-hostmetrics.yaml
+    depends_on:
+    - clickhouse
+
+
+  hotrod:
+    image: jaegertracing/example-hotrod:latest
+    container_name: hotrod
+    ports:
+    - "9000:8080"
+    command: ["all"]
+    environment:
+    - JAEGER_ENDPOINT=http://otel-collector:14268/api/traces
+
+
+  load-hotrod:
+    image: "grubykarol/locust:1.2.3-python3.9-alpine3.12"
+    container_name: load-hotrod
+    hostname: load-hotrod
+    ports:
+     - "8089:8089"
+    environment:
+      ATTACKED_HOST: http://hotrod:8080
+      LOCUST_MODE: standalone
+      NO_PROXY: standalone
+      TASK_DELAY_FROM: 5
+      TASK_DELAY_TO: 30
+      QUIET_MODE: "${QUIET_MODE:-false}"
+      LOCUST_OPTS: "--headless -u 10 -r 1"
+    volumes:
+      - ../common/locust-scripts:/locust

deploy/docker-swarm/clickhouse-setup/docker-entrypoint-initdb.d/init-db.sql

@@ -0,0 +1,31 @@
+CREATE TABLE IF NOT EXISTS signoz_index (
+  timestamp DateTime64(9) CODEC(Delta, ZSTD(1)),
+  traceID String CODEC(ZSTD(1)),
+  spanID String CODEC(ZSTD(1)),
+  parentSpanID String CODEC(ZSTD(1)),
+  serviceName LowCardinality(String) CODEC(ZSTD(1)),
+  name LowCardinality(String) CODEC(ZSTD(1)),
+  kind Int32 CODEC(ZSTD(1)),
+  durationNano UInt64 CODEC(ZSTD(1)),
+  tags Array(String) CODEC(ZSTD(1)),
+  tagsKeys Array(String) CODEC(ZSTD(1)),
+  tagsValues Array(String) CODEC(ZSTD(1)),
+  statusCode Int64 CODEC(ZSTD(1)),
+  references String CODEC(ZSTD(1)),
+  externalHttpMethod Nullable(String) CODEC(ZSTD(1)),
+  externalHttpUrl Nullable(String) CODEC(ZSTD(1)),
+  component Nullable(String) CODEC(ZSTD(1)),
+  dbSystem Nullable(String) CODEC(ZSTD(1)),
+  dbName Nullable(String) CODEC(ZSTD(1)),
+  dbOperation Nullable(String) CODEC(ZSTD(1)),
+  peerService Nullable(String) CODEC(ZSTD(1)),
+  INDEX idx_traceID traceID TYPE bloom_filter GRANULARITY 4,
+  INDEX idx_service serviceName TYPE bloom_filter GRANULARITY 4,
+  INDEX idx_name name TYPE bloom_filter GRANULARITY 4,
+  INDEX idx_kind kind TYPE minmax GRANULARITY 4,
+  INDEX idx_tagsKeys tagsKeys TYPE bloom_filter(0.01) GRANULARITY 64,
+  INDEX idx_tagsValues tagsValues TYPE bloom_filter(0.01) GRANULARITY 64,
+  INDEX idx_duration durationNano TYPE minmax GRANULARITY 1
+) ENGINE MergeTree()
+PARTITION BY toDate(timestamp)
+ORDER BY (serviceName, -toUnixTimestamp(timestamp))

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

@@ -0,0 +1,72 @@
+receivers:
+  otlp:
+    protocols:
+      grpc:
+      http:
+  jaeger:
+    protocols:
+      grpc:
+      thrift_http:
+
+  hostmetrics:
+    collection_interval: 60s
+    scrapers:
+      cpu:
+      load:
+      memory:
+      disk:
+      filesystem:
+      network:
+
+  # Data sources: metrics
+  prometheus:
+    config:
+      scrape_configs:
+        - job_name: "otel-collector"
+          dns_sd_configs:
+          - names:
+            - 'tasks.signoz_otel-collector'
+            type: 'A'
+            port: 8888
+        - job_name: "otel-collector-hostmetrics"
+          scrape_interval: 10s
+          static_configs:
+            - targets: ["otel-collector-hostmetrics:8888"]
+processors:
+  batch:
+    send_batch_size: 1000
+    timeout: 10s
+  memory_limiter:
+    # Same as --mem-ballast-size-mib CLI argument
+    ballast_size_mib: 683
+    # 80% of maximum memory up to 2G
+    limit_mib: 1500
+    # 25% of limit up to 2G
+    spike_limit_mib: 512
+    check_interval: 5s
+  # queued_retry:
+  #   num_workers: 4
+  #   queue_size: 100
+  #   retry_on_failure: true
+extensions:
+  health_check: {}
+  zpages: {}
+exporters:
+  clickhouse:
+    datasource: tcp://clickhouse:9000
+  clickhousemetricswrite:
+    endpoint: tcp://clickhouse:9000/?database=signoz_metrics
+    resource_to_telemetry_conversion:
+      enabled: true
+
+service:
+  extensions: [health_check, zpages]
+  pipelines:
+    traces:
+      receivers: [jaeger, otlp]
+      processors: [batch]
+      exporters: [clickhouse]
+    metrics:
+      receivers: [otlp, prometheus, hostmetrics]
+      processors: [batch]
+      exporters: [clickhousemetricswrite]

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

@@ -0,0 +1,47 @@
+receivers:
+  otlp:
+    protocols:
+      grpc:
+      http:
+  jaeger:
+    protocols:
+      grpc:
+      thrift_http:
+processors:
+  batch:
+    send_batch_size: 1000
+    timeout: 10s
+  memory_limiter:
+    # Same as --mem-ballast-size-mib CLI argument
+    ballast_size_mib: 683
+    # 80% of maximum memory up to 2G
+    limit_mib: 1500
+    # 25% of limit up to 2G
+    spike_limit_mib: 512
+    check_interval: 5s
+  # queued_retry:
+  #   num_workers: 4
+  #   queue_size: 100
+  #   retry_on_failure: true
+extensions:
+  health_check: {}
+  zpages: {}
+exporters:
+  clickhouse:
+    datasource: tcp://clickhouse:9000
+  clickhousemetricswrite:
+    endpoint: tcp://clickhouse:9000/?database=signoz_metrics
+    resource_to_telemetry_conversion:
+      enabled: true
+
+service:
+  extensions: [health_check, zpages]
+  pipelines:
+    traces:
+      receivers: [jaeger, otlp]
+      processors: [batch]
+      exporters: [clickhouse]
+    metrics:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [clickhousemetricswrite]

deploy/docker-swarm/clickhouse-setup/prometheus.yml

@@ -0,0 +1,25 @@
+# my global config
+global:
+  scrape_interval:     5s # Set the scrape interval to every 15 seconds. Default is every 1 minute.
+  evaluation_interval: 15s # Evaluate rules every 15 seconds. The default is every 1 minute.
+  # scrape_timeout is set to the global default (10s).
+
+# Alertmanager configuration
+alerting:
+  alertmanagers:
+  - static_configs:
+    - targets:
+      # - alertmanager:9093
+
+# Load rules once and periodically evaluate them according to the global 'evaluation_interval'.
+rule_files:
+  # - "first_rules.yml"
+  # - "second_rules.yml"
+
+# A scrape configuration containing exactly one endpoint to scrape:
+# Here it's Prometheus itself.
+scrape_configs:
+  
+
+remote_read:
+  - url: tcp://clickhouse:9000/?database=signoz_metrics

deploy/docker-swarm/common/locust-scripts/locustfile.py

@@ -0,0 +1,16 @@
+from locust import HttpUser, task, between
+class UserTasks(HttpUser):
+    wait_time = between(5, 15)
+
+    @task
+    def rachel(self):
+        self.client.get("/dispatch?customer=123&nonse=0.6308392664170006")
+    @task
+    def trom(self):
+        self.client.get("/dispatch?customer=392&nonse=0.015296363321630757")
+    @task
+    def japanese(self):
+        self.client.get("/dispatch?customer=731&nonse=0.8022286220408668")
+    @task
+    def coffee(self):
+        self.client.get("/dispatch?customer=567&nonse=0.0022220379420636593")

deploy/docker-swarm/common/nginx-config.conf

@@ -0,0 +1,30 @@
+server {
+    listen       3000;
+    server_name  _;
+    
+    gzip on;
+    gzip_static on;    
+    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_proxied  any;
+    gzip_vary on;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k;
+    gzip_http_version 1.1; 
+
+    location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    try_files $uri $uri/ /index.html;
+    }
+    location /api {
+    proxy_pass http://query-service:8080/api;
+    
+    }
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+    root   /usr/share/nginx/html;
+    }
+}

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

@@ -12,6 +12,8 @@ services:
       volumes:
         - ./clickhouse-config.xml:/etc/clickhouse-server/config.xml
         - ./docker-entrypoint-initdb.d/init-db.sql:/docker-entrypoint-initdb.d/init-db.sql
+        - ./data/clickhouse/:/var/lib/clickhouse/
+
       healthcheck:
         # "clickhouse", "client", "-u ${CLICKHOUSE_USER}", "--password ${CLICKHOUSE_PASSWORD}", "-q 'SELECT 1'"
         test: ["CMD", "wget", "--spider", "-q", "localhost:8123/ping"]
@@ -20,23 +22,28 @@ services:
         retries: 3
 
   query-service:
-    image: signoz/query-service:0.3.4
+    image: signoz/query-service:0.4.3
     container_name: query-service
-
+    command: ["-config=/root/config/prometheus.yml"]
     ports:
       - "8080:8080"
+    volumes:
+      - ./prometheus.yml:/root/config/prometheus.yml
+      - ../dashboards:/root/config/dashboards
+      - ./data/signoz/:/var/lib/signoz/
 
     environment:
       - ClickHouseUrl=tcp://clickhouse:9000
       - STORAGE=clickhouse
       - POSTHOG_API_KEY=H-htDCae7CR3RV57gUzmol6IAKtm5IMCvbcm_fwnL-w
+      - GODEBUG=netdns=go
 
     depends_on:
       clickhouse:
         condition: service_healthy
     
   frontend:
-    image: signoz/frontend:0.3.4
+    image: signoz/frontend:0.4.3
     container_name: frontend
 
     depends_on:
@@ -50,7 +57,7 @@ services:
 
 
   otel-collector:
-    image: signoz/otelcol:latest
+    image: signoz/otelcontribcol:0.4.2
     command: ["--config=/etc/otel-collector-config.yaml", "--mem-ballast-size-mib=683"]
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
@@ -64,11 +71,19 @@ services:
       - "4317:4317"       # OTLP GRPC receiver
       - "55679:55679" # zpages extension
       - "13133"       # health_check
-
+      - "8889:8889"   # prometheus exporter
     depends_on:
       clickhouse:
         condition: service_healthy
 
+  otel-collector-metrics:
+    image: signoz/otelcontribcol:0.4.2
+    command: ["--config=/etc/otel-collector-metrics-config.yaml", "--mem-ballast-size-mib=683"]
+    volumes:
+      - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml
+    depends_on:
+      clickhouse:
+        condition: service_healthy
   hotrod:
     image: jaegertracing/example-hotrod:latest
     container_name: hotrod

deploy/docker/clickhouse-setup/docker-entrypoint-initdb.d/init-db.sql

@@ -19,6 +19,10 @@ CREATE TABLE IF NOT EXISTS signoz_index (
   dbName Nullable(String) CODEC(ZSTD(1)),
   dbOperation Nullable(String) CODEC(ZSTD(1)),
   peerService Nullable(String) CODEC(ZSTD(1)),
+  INDEX idx_traceID traceID TYPE bloom_filter GRANULARITY 4,
+  INDEX idx_service serviceName TYPE bloom_filter GRANULARITY 4,
+  INDEX idx_name name TYPE bloom_filter GRANULARITY 4,
+  INDEX idx_kind kind TYPE minmax GRANULARITY 4,
   INDEX idx_tagsKeys tagsKeys TYPE bloom_filter(0.01) GRANULARITY 64,
   INDEX idx_tagsValues tagsValues TYPE bloom_filter(0.01) GRANULARITY 64,
   INDEX idx_duration durationNano TYPE minmax GRANULARITY 1

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

@@ -1,4 +1,8 @@
 receivers:
+  otlp/spanmetrics:
+    protocols:
+      grpc:
+        endpoint: "localhost:12345"
   otlp:
     protocols:
       grpc:
@@ -7,10 +11,22 @@ receivers:
     protocols:
       grpc:
       thrift_http:
+  hostmetrics:
+    collection_interval: 30s
+    scrapers:
+      cpu:
+      load:
+      memory:
+      disk:
+      filesystem:
+      network:
 processors:
   batch:
     send_batch_size: 1000
     timeout: 10s
+  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 ]
   memory_limiter:
     # Same as --mem-ballast-size-mib CLI argument
     ballast_size_mib: 683
@@ -29,11 +45,23 @@ extensions:
 exporters:
   clickhouse:
     datasource: tcp://clickhouse:9000
-
+  clickhousemetricswrite:
+    endpoint: tcp://clickhouse:9000/?database=signoz_metrics
+    resource_to_telemetry_conversion:
+      enabled: true
+  prometheus:
+    endpoint: "0.0.0.0:8889"
 service:
   extensions: [health_check, zpages]
   pipelines:
     traces:
       receivers: [jaeger, otlp]
+      processors: [signozspanmetrics/prometheus, batch]
+      exporters: [clickhouse]
+    metrics:
+      receivers: [otlp, hostmetrics]
       processors: [batch]
-      exporters: [clickhouse]
+      exporters: [clickhousemetricswrite]
+    metrics/spanmetrics:
+      receivers: [otlp/spanmetrics]
+      exporters: [prometheus]

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

@@ -0,0 +1,44 @@
+receivers:
+  otlp:
+    protocols:
+      grpc:
+      http:
+
+  # Data sources: metrics
+  prometheus:
+    config:
+      scrape_configs:
+        - job_name: "otel-collector"
+          scrape_interval: 60s
+          static_configs:
+            - targets: ["otel-collector:8889"]
+processors:
+  batch:
+    send_batch_size: 1000
+    timeout: 10s
+  memory_limiter:
+    # Same as --mem-ballast-size-mib CLI argument
+    ballast_size_mib: 683
+    # 80% of maximum memory up to 2G
+    limit_mib: 1500
+    # 25% of limit up to 2G
+    spike_limit_mib: 512
+    check_interval: 5s
+  # queued_retry:
+  #   num_workers: 4
+  #   queue_size: 100
+  #   retry_on_failure: true
+extensions:
+  health_check: {}
+  zpages: {}
+exporters:
+  clickhousemetricswrite:
+    endpoint: tcp://clickhouse:9000/?database=signoz_metrics
+
+service:
+  extensions: [health_check, zpages]
+  pipelines:
+    metrics:
+      receivers: [otlp, prometheus]
+      processors: [batch]
+      exporters: [clickhousemetricswrite]

deploy/docker/clickhouse-setup/prometheus.yml

@@ -0,0 +1,25 @@
+# my global config
+global:
+  scrape_interval:     5s # Set the scrape interval to every 15 seconds. Default is every 1 minute.
+  evaluation_interval: 15s # Evaluate rules every 15 seconds. The default is every 1 minute.
+  # scrape_timeout is set to the global default (10s).
+
+# Alertmanager configuration
+alerting:
+  alertmanagers:
+  - static_configs:
+    - targets:
+      # - alertmanager:9093
+
+# Load rules once and periodically evaluate them according to the global 'evaluation_interval'.
+rule_files:
+  # - "first_rules.yml"
+  # - "second_rules.yml"
+
+# A scrape configuration containing exactly one endpoint to scrape:
+# Here it's Prometheus itself.
+scrape_configs:
+  
+
+remote_read:
+  - url: tcp://clickhouse:9000/?database=signoz_metrics

deploy/docker/druid-kafka-setup/docker-compose-tiny.yaml

@@ -147,7 +147,7 @@ services:
       retries: 5
 
   flatten-processor:
-    image: signoz/flattener-processor:0.3.4
+    image: signoz/flattener-processor:0.4.0
     container_name: flattener-processor
 
     depends_on:
@@ -163,26 +163,29 @@ services:
     
 
   query-service:
-    image: signoz.docker.scarf.sh/signoz/query-service:0.3.4
+    image: signoz.docker.scarf.sh/signoz/query-service:0.4.1
     container_name: query-service
 
     depends_on:
       - router
     ports:
       - "8080:8080"
-
+    volumes:
+      - ../dashboards:/root/config/dashboards
+      - ./data/signoz/:/var/lib/signoz/
     environment:
       - DruidClientUrl=http://router:8888
       - DruidDatasource=flattened_spans
       - STORAGE=druid
       - POSTHOG_API_KEY=H-htDCae7CR3RV57gUzmol6IAKtm5IMCvbcm_fwnL-w
-      
+      - GODEBUG=netdns=go
+
     depends_on: 
       router:
         condition: service_healthy
     
   frontend:
-    image: signoz/frontend:0.3.4
+    image: signoz/frontend:0.4.1
     container_name: frontend
 
     depends_on:

deploy/docker/druid-kafka-setup/docker-compose.yaml

@@ -142,7 +142,7 @@ services:
       retries: 5
 
   flatten-processor:
-    image: signoz/flattener-processor:0.3.4
+    image: signoz/flattener-processor:0.4.0
     container_name: flattener-processor
 
     depends_on:
@@ -158,26 +158,30 @@ services:
     
 
   query-service:
-    image: signoz.docker.scarf.sh/signoz/query-service:0.3.4
+    image: signoz.docker.scarf.sh/signoz/query-service:0.4.1
     container_name: query-service
 
     depends_on:
       - router
     ports:
       - "8080:8080"
-
+      
+    volumes:
+      - ../dashboards:/root/config/dashboards
+      - ./data/signoz/:/var/lib/signoz/
     environment:
       - DruidClientUrl=http://router:8888
       - DruidDatasource=flattened_spans
       - STORAGE=druid
       - POSTHOG_API_KEY=H-htDCae7CR3RV57gUzmol6IAKtm5IMCvbcm_fwnL-w
+      - GODEBUG=netdns=go
 
     depends_on: 
       router:
         condition: service_healthy
     
   frontend:
-    image: signoz/frontend:0.3.4
+    image: signoz/frontend:0.4.1
     container_name: frontend
 
     depends_on:

deploy/install.sh

@@ -317,7 +317,7 @@ echo ""
 
 echo -e "👉 ${RED}Two ways to go forward\n"  
 echo -e "${RED}1) ClickHouse as database (default)\n"  
-echo -e "${RED}2) Kafka + Druid setup to handle scale (recommended for production use)\n"  
+echo -e "${RED}2) Kafka + Druid as datastore \n"  
 read -p "⚙️  Enter your preference (1/2):" choice_setup 
 
 while [[ $choice_setup != "1"   &&  $choice_setup != "2" && $choice_setup != "" ]]
@@ -508,4 +508,4 @@ else
 
 fi
 
-echo -e "\n🙏 Thank you!\n"
+echo -e "\n🙏 Thank you!\n"

deploy/kubernetes/platform/Chart.lock

@@ -10,12 +10,12 @@ dependencies:
   version: 0.2.18
 - name: flattener-processor
   repository: file://./signoz-charts/flattener-processor
-  version: 0.3.4
+  version: 0.3.6
 - name: query-service
   repository: file://./signoz-charts/query-service
-  version: 0.3.4
+  version: 0.3.6
 - name: frontend
   repository: file://./signoz-charts/frontend
-  version: 0.3.4
-digest: sha256:49f8b43acecdb7cb0fb8ed5af1488bfbef5b66be02e17bb716403750a6894844
-generated: "2021-08-10T23:37:01.176317+05:30"
+  version: 0.3.6
+digest: sha256:b160e903c630a90644683c512eb8ba018e18d2c08051e255edd3749cb9cc7228
+generated: "2021-08-23T12:06:37.231066+05:30"

deploy/kubernetes/platform/Chart.yaml

@@ -34,10 +34,10 @@ dependencies:
     version: 0.2.18
   - name: flattener-processor
     repository: "file://./signoz-charts/flattener-processor"
-    version: 0.3.4
+    version: 0.3.6
   - name: query-service
     repository: "file://./signoz-charts/query-service"
-    version: 0.3.4
+    version: 0.3.6
   - name: frontend
     repository: "file://./signoz-charts/frontend"
-    version: 0.3.4
+    version: 0.3.6

deploy/kubernetes/platform/signoz-charts/flattener-processor/Chart.yaml

@@ -14,8 +14,8 @@ type: application
 
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
-version: 0.3.4
+version: 0.3.6
 
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application.
-appVersion: 0.3.4
+appVersion: 0.3.6

deploy/kubernetes/platform/signoz-charts/frontend/Chart.yaml

@@ -14,8 +14,8 @@ type: application
 
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
-version: 0.3.4
+version: 0.3.6
 
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application.
-appVersion: 0.3.4
+appVersion: 0.3.6

deploy/kubernetes/platform/signoz-charts/query-service/Chart.yaml

@@ -14,8 +14,8 @@ type: application
 
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
-version: 0.3.4
+version: 0.3.6
 
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application.
-appVersion: 0.3.4
+appVersion: 0.3.6

frontend/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+build

frontend/.eslintrc.js

@@ -0,0 +1,62 @@
+module.exports = {
+	env: {
+		browser: true,
+		es2021: true,
+		node: true,
+	},
+	extends: [
+		'eslint:recommended',
+		'plugin:react/recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:@typescript-eslint/eslint-recommended',
+		'plugin:prettier/recommended',
+	],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true,
+		},
+		ecmaVersion: 12,
+		sourceType: 'module',
+	},
+	plugins: [
+		'react',
+		'@typescript-eslint',
+		'simple-import-sort',
+		'react-hooks',
+		'prettier',
+	],
+	settings: {
+		react: {
+			version: 'latest',
+		},
+	},
+	rules: {
+		'react/jsx-filename-extension': [
+			'error',
+			{
+				extensions: ['.tsx', '.js', '.jsx'],
+			},
+		],
+		'react/prop-types': 'off',
+		'@typescript-eslint/explicit-function-return-type': 'error',
+		'@typescript-eslint/no-var-requires': 0,
+		'linebreak-style': ['error', 'unix'],
+
+		// simple sort error
+		'simple-import-sort/imports': 'error',
+		'simple-import-sort/exports': 'error',
+
+		// hooks
+		'react-hooks/rules-of-hooks': 'error',
+		'react-hooks/exhaustive-deps': 'warn',
+
+		'prettier/prettier': [
+			'error',
+			{},
+			{
+				usePrettierrc: true,
+			},
+		],
+	},
+};

frontend/.prettierrc.json

@@ -2,6 +2,7 @@
 	"trailingComma": "all",
 	"useTabs": true,
 	"tabWidth": 1,
-	"singleQuote": false,
-	"jsxSingleQuote": false
+	"singleQuote": true,
+	"jsxSingleQuote": false,
+	"semi": true
 }

frontend/__mocks__/cssMock.ts

@@ -0,0 +1 @@
+export default {};

frontend/cypress.json

@@ -0,0 +1,3 @@
+{
+	"video": false
+}

frontend/cypress/CustomFunctions/Login.ts

@@ -0,0 +1,47 @@
+const Login = ({ email, name }: LoginProps): void => {
+	const emailInput = cy.findByPlaceholderText('mike@netflix.com');
+
+	emailInput.then((emailInput) => {
+		const element = emailInput[0];
+		// element is present
+		expect(element).not.undefined;
+		expect(element.nodeName).to.be.equal('INPUT');
+	});
+	emailInput.type(email).then((inputElements) => {
+		const inputElement = inputElements[0];
+		const inputValue = inputElement.getAttribute('value');
+		expect(inputValue).to.be.equals(email);
+	});
+
+	const firstNameInput = cy.findByPlaceholderText('Mike');
+	firstNameInput.then((firstNameInput) => {
+		const element = firstNameInput[0];
+		// element is present
+		expect(element).not.undefined;
+		expect(element.nodeName).to.be.equal('INPUT');
+	});
+
+	firstNameInput.type(name).then((inputElements) => {
+		const inputElement = inputElements[0];
+		const inputValue = inputElement.getAttribute('value');
+		expect(inputValue).to.be.equals(name);
+	});
+
+	const gettingStartedButton = cy.findByText('Get Started');
+	gettingStartedButton.click();
+
+	cy
+		.intercept('POST', '/api/v1/user?email*', {
+			statusCode: 200,
+		})
+		.as('defaultUser');
+
+	cy.wait('@defaultUser');
+};
+
+export interface LoginProps {
+	email: string;
+	name: string;
+}
+
+export default Login;

frontend/cypress/CustomFunctions/checkRouteDefaultGlobalTimeOptions.ts

@@ -0,0 +1,49 @@
+import {
+	getDefaultOption,
+	getOptions,
+} from 'container/Header/DateTimeSelection/config';
+// import { AppState } from 'store/reducers';
+
+const CheckRouteDefaultGlobalTimeOptions = ({
+	route,
+}: CheckRouteDefaultGlobalTimeOptionsProps): void => {
+	cy.visit(Cypress.env('baseUrl') + route);
+
+	const allOptions = getOptions(route);
+
+	const defaultValue = getDefaultOption(route);
+
+	const defaultSelectedOption = allOptions.find((e) => e.value === defaultValue);
+
+	expect(defaultSelectedOption).not.undefined;
+
+	cy
+		.findAllByTestId('dropDown')
+		.find('span')
+		.then((el) => {
+			const elements = el.get();
+
+			const item = elements[1];
+
+			expect(defaultSelectedOption?.label).to.be.equals(
+				item.innerText,
+				'Default option is not matching',
+			);
+		});
+
+	// cy
+	// 	.window()
+	// 	.its('store')
+	// 	.invoke('getState')
+	// 	.then((e: AppState) => {
+	// 		const { globalTime } = e;
+	// 		const { maxTime, minTime } = globalTime;
+	// 		// @TODO match the global min time and max time according to the selected option
+	// 	});
+};
+
+export interface CheckRouteDefaultGlobalTimeOptionsProps {
+	route: string;
+}
+
+export default CheckRouteDefaultGlobalTimeOptions;

frontend/cypress/fixtures/defaultApp.json

@@ -0,0 +1,35 @@
+[
+	{
+		"serviceName": "frontend",
+		"p99": 1134610000,
+		"avgDuration": 744523000,
+		"numCalls": 267,
+		"callRate": 0.89,
+		"numErrors": 0,
+		"errorRate": 0,
+		"num4XX": 0,
+		"fourXXRate": 0
+	},
+	{
+		"serviceName": "customer",
+		"p99": 734422400,
+		"avgDuration": 348678530,
+		"numCalls": 267,
+		"callRate": 0.89,
+		"numErrors": 0,
+		"errorRate": 0,
+		"num4XX": 0,
+		"fourXXRate": 0
+	},
+	{
+		"serviceName": "driver",
+		"p99": 239234080,
+		"avgDuration": 204662290,
+		"numCalls": 267,
+		"callRate": 0.89,
+		"numErrors": 0,
+		"errorRate": 0,
+		"num4XX": 0,
+		"fourXXRate": 0
+	}
+]

frontend/cypress/fixtures/errorPercentage.json

@@ -0,0 +1 @@
+{ "status": "success", "data": { "resultType": "matrix", "result": [] } }

frontend/cypress/fixtures/requestPerSecond.json

@@ -0,0 +1,29 @@
+{
+	"status": "success",
+	"data": {
+		"resultType": "matrix",
+		"result": [
+			{
+				"metric": {},
+				"values": [
+					[1634741764.961, "0.9"],
+					[1634741824.961, "0.9"],
+					[1634741884.961, "0.8666666666666667"],
+					[1634741944.961, "1"],
+					[1634742004.961, "0.9166666666666666"],
+					[1634742064.961, "0.95"],
+					[1634742124.961, "0.9333333333333333"],
+					[1634742184.961, "0.95"],
+					[1634742244.961, "1.0333333333333334"],
+					[1634742304.961, "0.9333333333333333"],
+					[1634742364.961, "0.9166666666666666"],
+					[1634742424.961, "0.9"],
+					[1634742484.961, "1.0166666666666666"],
+					[1634742544.961, "0.8333333333333334"],
+					[1634742604.961, "0.9166666666666666"],
+					[1634742664.961, "0.95"]
+				]
+			}
+		]
+	}
+}

frontend/cypress/fixtures/serviceOverview.json

@@ -0,0 +1,62 @@
+[
+	{
+		"timestamp": 1634742600000000000,
+		"p50": 720048500,
+		"p95": 924409540,
+		"p99": 974744300,
+		"numCalls": 48,
+		"callRate": 0.8,
+		"numErrors": 0,
+		"errorRate": 0
+	},
+	{
+		"timestamp": 1634742540000000000,
+		"p50": 712614000,
+		"p95": 955580700,
+		"p99": 1045595400,
+		"numCalls": 59,
+		"callRate": 0.98333335,
+		"numErrors": 0,
+		"errorRate": 0
+	},
+	{
+		"timestamp": 1634742480000000000,
+		"p50": 720842000,
+		"p95": 887187600,
+		"p99": 943676860,
+		"numCalls": 53,
+		"callRate": 0.8833333,
+		"numErrors": 0,
+		"errorRate": 0
+	},
+	{
+		"timestamp": 1634742420000000000,
+		"p50": 712287000,
+		"p95": 908505540,
+		"p99": 976507650,
+		"numCalls": 58,
+		"callRate": 0.96666664,
+		"numErrors": 0,
+		"errorRate": 0
+	},
+	{
+		"timestamp": 1634742360000000000,
+		"p50": 697125500,
+		"p95": 975581800,
+		"p99": 1190121900,
+		"numCalls": 54,
+		"callRate": 0.9,
+		"numErrors": 0,
+		"errorRate": 0
+	},
+	{
+		"timestamp": 1634742300000000000,
+		"p50": 711592500,
+		"p95": 880559900,
+		"p99": 1100105500,
+		"numCalls": 40,
+		"callRate": 0.6666667,
+		"numErrors": 0,
+		"errorRate": 0
+	}
+]

frontend/cypress/fixtures/topEndPoints.json

@@ -0,0 +1,9 @@
+[
+	{
+		"p50": 710824000,
+		"p95": 1003231400,
+		"p99": 1231265500,
+		"numCalls": 299,
+		"name": "HTTP GET /dispatch"
+	}
+]

frontend/cypress/integration/appLayout/index.spec.ts

@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+import ROUTES from 'constants/routes';
+
+describe('App Layout', () => {
+	beforeEach(() => {
+		cy.visit(Cypress.env('baseUrl'));
+	});
+
+	it('Check the user is in Logged Out State', async () => {
+		cy.location('pathname').then((e) => {
+			expect(e).to.be.equal(ROUTES.SIGN_UP);
+		});
+	});
+
+	it('Logged In State', () => {
+		const testEmail = 'test@test.com';
+		const firstName = 'Test';
+
+		cy.login({
+			email: testEmail,
+			name: firstName,
+		});
+	});
+});

frontend/cypress/integration/globalTime/default.spec.ts

@@ -0,0 +1,44 @@
+/// <reference types="cypress" />
+import ROUTES from 'constants/routes';
+
+describe('default time', () => {
+	beforeEach(() => {
+		window.localStorage.setItem('isLoggedIn', 'yes');
+	});
+
+	it('Metrics Page default time', () => {
+		cy.checkDefaultGlobalOption({
+			route: ROUTES.APPLICATION,
+		});
+	});
+
+	it('Dashboard Page default time', () => {
+		cy.checkDefaultGlobalOption({
+			route: ROUTES.ALL_DASHBOARD,
+		});
+	});
+
+	it('Trace Page default time', () => {
+		cy.checkDefaultGlobalOption({
+			route: ROUTES.TRACES,
+		});
+	});
+
+	it('Instrumentation Page default time', () => {
+		cy.checkDefaultGlobalOption({
+			route: ROUTES.INSTRUMENTATION,
+		});
+	});
+
+	it('Service Page default time', () => {
+		cy.checkDefaultGlobalOption({
+			route: ROUTES.SERVICE_MAP,
+		});
+	});
+
+	it('Settings Page default time', () => {
+		cy.checkDefaultGlobalOption({
+			route: ROUTES.SETTINGS,
+		});
+	});
+});

frontend/cypress/integration/globalTime/metricsApplication.spec.ts

@@ -0,0 +1,126 @@
+/// <reference types="cypress" />
+import getGlobalDropDownFormatedDate from 'lib/getGlobalDropDownFormatedDate';
+import { AppState } from 'store/reducers';
+
+import topEndPoints from '../../fixtures/topEndPoints.json';
+
+describe('Global Time Metrics Application', () => {
+	beforeEach(() => {
+		cy.visit(Cypress.env('baseUrl'));
+
+		const testEmail = 'test@test.com';
+		const firstName = 'Test';
+
+		cy.login({
+			email: testEmail,
+			name: firstName,
+		});
+	});
+
+	it('Metrics Application', async () => {
+		cy
+			.intercept('GET', '/api/v1/services*', {
+				fixture: 'defaultApp.json',
+			})
+			.as('defaultApps');
+
+		cy.wait('@defaultApps');
+
+		//clicking on frontend
+		cy.get('tr:nth-child(1) > td:first-child').click();
+
+		cy
+			.intercept('GET', '/api/v1/service/top_endpoints*', {
+				fixture: 'topEndPoints.json',
+			})
+			.as('topEndPoints');
+
+		cy
+			.intercept('GET', '/api/v1/service/overview?*', {
+				fixture: 'serviceOverview.json',
+			})
+			.as('serviceOverview');
+
+		cy
+			.intercept(
+				'GET',
+				`/api/v1/query_range?query=sum(rate(signoz_latency_count*`,
+				{
+					fixture: 'requestPerSecond.json',
+				},
+			)
+			.as('requestPerSecond');
+
+		cy
+			.window()
+			.its('store')
+			.invoke('getState')
+			.then((e: AppState) => {
+				const { globalTime } = e;
+
+				const { maxTime, minTime } = globalTime;
+
+				// intercepting metrics application call
+
+				cy.wait('@topEndPoints');
+				cy.wait('@serviceOverview');
+				//TODO add errorPercentage also
+				// cy.wait('@errorPercentage');
+				cy.wait('@requestPerSecond');
+
+				cy
+					.get('tbody tr:first-child td:first-child')
+					.then((el) => {
+						const elements = el.get();
+
+						expect(elements.length).to.be.equals(1);
+
+						const element = elements[0];
+
+						expect(element.innerText).to.be.equals(topEndPoints[0].name);
+					})
+					.click();
+
+				cy
+					.findAllByTestId('dropDown')
+					.find('span.ant-select-selection-item')
+					.then((e) => {
+						const elements = e;
+
+						const element = elements[0];
+
+						const customSelectedTime = element.innerText;
+
+						const startTime = new Date(minTime / 1000000);
+						const endTime = new Date(maxTime / 1000000);
+
+						const startString = getGlobalDropDownFormatedDate(startTime);
+						const endString = getGlobalDropDownFormatedDate(endTime);
+
+						const result = `${startString} - ${endString}`;
+
+						expect(customSelectedTime).to.be.equals(result);
+					});
+
+				cy
+					.findByTestId('dropDown')
+					.click()
+					.then(() => {
+						cy.findByTitle('Last 30 min').click();
+					});
+
+				cy
+					.findByTestId('dropDown')
+					.find('span.ant-select-selection-item')
+					.then((e) => {
+						const elements = e;
+
+						const element = elements[0];
+
+						const selectedTime = element.innerText;
+
+						expect(selectedTime).to.be.equals('Last 30 min');
+					});
+			});
+	});
+});

frontend/cypress/integration/metrics/index.spec.ts

@@ -0,0 +1,67 @@
+/// <reference types="cypress" />
+import ROUTES from 'constants/routes';
+import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond';
+
+import defaultApps from '../../fixtures/defaultApp.json';
+
+describe('Metrics', () => {
+	beforeEach(() => {
+		cy.visit(Cypress.env('baseUrl'));
+
+		const testEmail = 'test@test.com';
+		const firstName = 'Test';
+
+		cy.login({
+			email: testEmail,
+			name: firstName,
+		});
+	});
+
+	it('Default Apps', () => {
+		cy
+			.intercept('GET', '/api/v1/services*', {
+				fixture: 'defaultApp.json',
+			})
+			.as('defaultApps');
+
+		cy.wait('@defaultApps');
+
+		cy.location().then((e) => {
+			expect(e.pathname).to.be.equals(ROUTES.APPLICATION);
+
+			cy.get('tbody').then((elements) => {
+				const trElements = elements.children();
+				expect(trElements.length).to.be.equal(defaultApps.length);
+				const getChildren = (row: Element): Element => {
+					if (row.children.length === 0) {
+						return row;
+					}
+					return getChildren(row.children[0]);
+				};
+
+				// this is row element
+				trElements.map((index, element) => {
+					const [
+						applicationElement,
+						p99Element,
+						errorRateElement,
+						rpsElement,
+					] = element.children;
+					const applicationName = getChildren(applicationElement).innerHTML;
+					const p99Name = getChildren(p99Element).innerHTML;
+					const errorRateName = getChildren(errorRateElement).innerHTML;
+					const rpsName = getChildren(rpsElement).innerHTML;
+					const { serviceName, p99, errorRate, callRate } = defaultApps[index];
+					expect(applicationName).to.be.equal(serviceName);
+					expect(p99Name).to.be.equal(convertToNanoSecondsToSecond(p99).toString());
+					expect(errorRateName).to.be.equals(
+						parseFloat(errorRate.toString()).toFixed(2),
+					);
+					expect(rpsName).to.be.equals(callRate.toString());
+				});
+			});
+		});
+	});
+});
+
+export {};

frontend/cypress/plugins/index.ts

@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+// cypress/plugins/index.ts
+
+/// <reference types="cypress" />
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config: Cypress.ConfigOptions): void => {};
+
+export {};

frontend/cypress/support/commands.ts

@@ -0,0 +1,24 @@
+import '@testing-library/cypress/add-commands';
+
+import CheckRouteDefaultGlobalTimeOptions, {
+	CheckRouteDefaultGlobalTimeOptionsProps,
+} from '../CustomFunctions/checkRouteDefaultGlobalTimeOptions';
+import Login, { LoginProps } from '../CustomFunctions/Login';
+
+Cypress.Commands.add('login', Login);
+Cypress.Commands.add(
+	'checkDefaultGlobalOption',
+	CheckRouteDefaultGlobalTimeOptions,
+);
+
+declare global {
+	// eslint-disable-next-line @typescript-eslint/no-namespace
+	namespace Cypress {
+		interface Chainable {
+			login(props: LoginProps): void;
+			checkDefaultGlobalOption(
+				props: CheckRouteDefaultGlobalTimeOptionsProps,
+			): void;
+		}
+	}
+}

frontend/cypress/support/index.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

frontend/cypress/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "../tsconfig.json",
+	"target": "es5",
+	"lib": ["es5", "dom"],
+	"compilerOptions": {
+		"noEmit": true,
+		// be explicit about types included
+		// to avoid clashing with Jest types
+		"types": ["cypress", "@testing-library/cypress"],
+		"isolatedModules": false
+	},
+	"include": ["../node_modules/cypress", "./**/*.ts"]
+}

frontend/eslintrc.js

@@ -1,24 +0,0 @@
-module.exports = {
-	files: ["**/*.{ts,tsx}"],
-	parser: "@typescript-eslint/parser",
-	plugins: ["@typescript-eslint/eslint-plugin"],
-	rules: {
-		"react/jsx-filename-extension": [
-			"error",
-			{
-				extensions: [".tsx"],
-			},
-		],
-		"react/prop-types": "off",
-		"@typescript-eslint/explicit-function-return-type": "error",
-	},
-	extends: [
-		"plugin:@typescript-eslint/recommended",
-		"plugin:@typescript-eslint/eslint-recommended",
-		"prettier/@typescript-eslint",
-	],
-	env: {
-		browser: true,
-		jest: true,
-	},
-};

frontend/gulpfile.js

@@ -1,21 +1,21 @@
-const gulp = require("gulp");
-const gulpless = require("gulp-less");
-const postcss = require("gulp-postcss");
-const debug = require("gulp-debug");
-var csso = require("gulp-csso");
-const autteoprefixer = require("autoprefixer");
-const NpmImportPlugin = require("less-plugin-npm-import");
+const gulp = require('gulp');
+const gulpless = require('gulp-less');
+const postcss = require('gulp-postcss');
+const debug = require('gulp-debug');
+var csso = require('gulp-csso');
+const autteoprefixer = require('autoprefixer');
+const NpmImportPlugin = require('less-plugin-npm-import');
 
-gulp.task("less", function () {
-	const plugins = [autoprefixer()];
+gulp.task('less', function () {
+	const plugins = [autteoprefixer()];
 
 	return gulp
-		.src("src/themes/*-theme.less")
-		.pipe(debug({ title: "Less files:" }))
+		.src('src/themes/*-theme.less')
+		.pipe(debug({ title: 'Less files:' }))
 		.pipe(
 			gulpless({
 				javascriptEnabled: true,
-				plugins: [new NpmImportPlugin({ prefix: "~" })],
+				plugins: [new NpmImportPlugin({ prefix: '~' })],
 			}),
 		)
 		.pipe(postcss(plugins))
@@ -24,5 +24,5 @@ gulp.task("less", function () {
 				debug: true,
 			}),
 		)
-		.pipe(gulp.dest("./public"));
+		.pipe(gulp.dest('./public'));
 });

frontend/jest.config.ts

@@ -0,0 +1,23 @@
+import type { Config } from '@jest/types';
+
+const config: Config.InitialOptions = {
+	clearMocks: true,
+	coverageDirectory: 'coverage',
+	coverageReporters: ['text', 'cobertura', 'html', 'json-summary'],
+	moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+	modulePathIgnorePatterns: ['dist'],
+	moduleNameMapper: {
+		'\\.(css|less)$': '<rootDir>/__mocks__/cssMock.ts',
+	},
+	notify: true,
+	notifyMode: 'always',
+	testMatch: ['<rootDir>/src/**/?(*.)(test).(ts|js)?(x)'],
+	transform: {
+		'\\.(js|jsx|ts|tsx)?$': 'babel-jest',
+	},
+	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
+	testPathIgnorePatterns: ['/node_modules/', '/public/'],
+	moduleDirectories: ['node_modules', 'src'],
+};
+
+export default config;

frontend/jest.setup.ts

@@ -0,0 +1,4 @@
+/**
+ * Adds custom matchers from the react testing library to all tests
+ */
+import '@testing-library/jest-dom';

frontend/package.json

@@ -5,10 +5,15 @@
 	"main": "webpack.config.js",
 	"scripts": {
 		"dev": "NODE_ENV=development webpack serve --progress",
-		"start": "node scripts/start.js",
 		"build": "webpack --config=webpack.config.prod.js --progress",
 		"prettify": "prettier --write .",
-		"lint": "eslint src"
+		"lint": "eslint . --debug",
+		"lint:fix": "eslint . --fix --debug",
+		"cypress:open": "cypress open",
+		"cypress:run": "cypress run",
+		"jest": "jest",
+		"jest:coverage": "jest --coverage",
+		"jest:watch": "jest --watch"
 	},
 	"engines": {
 		"node": ">=12.13.0"
@@ -18,16 +23,13 @@
 	"dependencies": {
 		"@ant-design/icons": "^4.6.2",
 		"@auth0/auth0-react": "^1.2.0",
-		"@babel/core": "7.12.3",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
 		"@svgr/webpack": "5.4.0",
 		"@testing-library/jest-dom": "^5.11.4",
 		"@testing-library/react": "^11.1.0",
 		"@testing-library/user-event": "^12.1.10",
-		"@types/chart.js": "^2.9.28",
 		"@types/d3": "^6.2.0",
 		"@types/jest": "^26.0.15",
-		"@types/node": "^14.14.7",
 		"@types/react": "^17.0.0",
 		"@types/react-dom": "^16.9.9",
 		"@types/react-redux": "^7.1.11",
@@ -35,9 +37,7 @@
 		"@types/redux": "^3.6.0",
 		"@types/styled-components": "^5.1.4",
 		"@types/vis": "^4.21.21",
-		"@typescript-eslint/eslint-plugin": "^4.5.0",
-		"@typescript-eslint/parser": "^4.5.0",
-		"antd": "^4.8.0",
+		"antd": "^4.16.13",
 		"axios": "^0.21.0",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^26.6.0",
@@ -48,24 +48,24 @@
 		"bfj": "^7.0.2",
 		"camelcase": "^6.1.0",
 		"case-sensitive-paths-webpack-plugin": "2.3.0",
-		"chart.js": "^2.9.4",
+		"chart.js": "^3.4.0",
+		"chartjs-adapter-date-fns": "^2.0.0",
 		"css-loader": "4.3.0",
 		"d3": "^6.2.0",
 		"d3-flame-graph": "^3.1.1",
 		"d3-tip": "^0.9.1",
 		"dotenv": "8.2.0",
-		"eslint": "^7.29.0",
+		"dotenv-expand": "5.1.0",
 		"eslint-config-react-app": "^6.0.0",
 		"eslint-plugin-flowtype": "^5.2.0",
-		"eslint-plugin-import": "^2.22.1",
 		"eslint-plugin-jest": "^24.1.0",
 		"eslint-plugin-jsx-a11y": "^6.3.1",
-		"eslint-plugin-react": "^7.21.5",
 		"eslint-plugin-react-hooks": "^4.2.0",
 		"eslint-plugin-testing-library": "^3.9.2",
 		"eslint-webpack-plugin": "^2.1.0",
 		"file-loader": "6.1.1",
 		"fs-extra": "^9.0.1",
+		"history": "4.10.1",
 		"html-webpack-plugin": "5.1.0",
 		"identity-obj-proxy": "3.0.0",
 		"jest": "26.6.0",
@@ -80,13 +80,13 @@
 		"prop-types": "^15.6.2",
 		"react": "17.0.0",
 		"react-app-polyfill": "^2.0.0",
-		"react-chartjs-2": "^2.11.1",
 		"react-chips": "^0.8.0",
 		"react-css-theme-switcher": "^0.1.6",
 		"react-dev-utils": "^11.0.0",
 		"react-dom": "17.0.0",
 		"react-force-graph": "^1.41.0",
 		"react-graph-vis": "^1.0.5",
+		"react-grid-layout": "^1.2.5",
 		"react-modal": "^3.12.1",
 		"react-redux": "^7.2.2",
 		"react-refresh": "^0.8.3",
@@ -102,8 +102,10 @@
 		"styled-components": "^5.2.1",
 		"terser-webpack-plugin": "4.2.3",
 		"ts-pnp": "1.2.0",
+		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"typescript": "^4.0.5",
 		"url-loader": "4.1.1",
+		"uuid": "^8.3.2",
 		"web-vitals": "^0.2.4",
 		"webpack": "^5.23.0",
 		"webpack-dev-server": "^3.11.2",
@@ -129,11 +131,28 @@
 		"@babel/preset-env": "^7.12.17",
 		"@babel/preset-react": "^7.12.13",
 		"@babel/preset-typescript": "^7.12.17",
+		"@testing-library/cypress": "^8.0.0",
+		"@types/d3-tip": "^3.5.5",
 		"@types/lodash-es": "^4.17.4",
+		"@types/node": "^14.17.12",
+		"@types/react-grid-layout": "^1.1.2",
+		"@types/uuid": "^8.3.1",
+		"@typescript-eslint/eslint-plugin": "^4.28.2",
+		"@typescript-eslint/parser": "^4.28.2",
 		"autoprefixer": "^9.0.0",
 		"babel-plugin-styled-components": "^1.12.0",
 		"compression-webpack-plugin": "^8.0.0",
 		"copy-webpack-plugin": "^7.0.0",
+		"cypress": "8.6.0",
+		"eslint": "^7.30.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-config-standard": "^16.0.3",
+		"eslint-plugin-import": "^2.23.4",
+		"eslint-plugin-node": "^11.1.0",
+		"eslint-plugin-prettier": "^4.0.0",
+		"eslint-plugin-promise": "^5.1.0",
+		"eslint-plugin-react": "^7.24.0",
+		"eslint-plugin-simple-import-sort": "^7.0.0",
 		"gulp": "^4.0.2",
 		"gulp-csso": "^4.0.1",
 		"gulp-debug": "^4.0.0",
@@ -147,6 +166,7 @@
 		"prettier": "2.2.1",
 		"react-hot-loader": "^4.13.0",
 		"react-is": "^17.0.1",
+		"ts-node": "^10.2.1",
 		"webpack-cli": "^4.5.0"
 	}
 }

frontend/public/signoz.svg

@@ -1,5 +1,5 @@
-<svg width="320" height="120" viewBox="0 0 320 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M165.742 72.0469C165.742 70.7188 165.273 69.7031 164.336 69C163.398 68.2812 161.711 67.5312 159.273 66.75C156.836 65.9531 154.906 65.1719 153.484 64.4062C149.609 62.3125 147.672 59.4922 147.672 55.9453C147.672 54.1016 148.188 52.4609 149.219 51.0234C150.266 49.5703 151.758 48.4375 153.695 47.625C155.648 46.8125 157.836 46.4062 160.258 46.4062C162.695 46.4062 164.867 46.8516 166.773 47.7422C168.68 48.6172 170.156 49.8594 171.203 51.4688C172.266 53.0781 172.797 54.9062 172.797 56.9531H165.766C165.766 55.3906 165.273 54.1797 164.289 53.3203C163.305 52.4453 161.922 52.0078 160.141 52.0078C158.422 52.0078 157.086 52.375 156.133 53.1094C155.18 53.8281 154.703 54.7812 154.703 55.9688C154.703 57.0781 155.258 58.0078 156.367 58.7578C157.492 59.5078 159.141 60.2109 161.312 60.8672C165.312 62.0703 168.227 63.5625 170.055 65.3438C171.883 67.125 172.797 69.3438 172.797 72C172.797 74.9531 171.68 77.2734 169.445 78.9609C167.211 80.6328 164.203 81.4688 160.422 81.4688C157.797 81.4688 155.406 80.9922 153.25 80.0391C151.094 79.0703 149.445 77.75 148.305 76.0781C147.18 74.4062 146.617 72.4688 146.617 70.2656H153.672C153.672 74.0312 155.922 75.9141 160.422 75.9141C162.094 75.9141 163.398 75.5781 164.336 74.9062C165.273 74.2188 165.742 73.2656 165.742 72.0469ZM184.281 81H177.484V55.6406H184.281V81ZM177.086 49.0781C177.086 48.0625 177.422 47.2266 178.094 46.5703C178.781 45.9141 179.711 45.5859 180.883 45.5859C182.039 45.5859 182.961 45.9141 183.648 46.5703C184.336 47.2266 184.68 48.0625 184.68 49.0781C184.68 50.1094 184.328 50.9531 183.625 51.6094C182.938 52.2656 182.023 52.5938 180.883 52.5938C179.742 52.5938 178.82 52.2656 178.117 51.6094C177.43 50.9531 177.086 50.1094 177.086 49.0781ZM188.898 68.1328C188.898 64.2422 189.82 61.1094 191.664 58.7344C193.523 56.3594 196.023 55.1719 199.164 55.1719C201.945 55.1719 204.109 56.125 205.656 58.0312L205.938 55.6406H212.078V80.1562C212.078 82.375 211.57 84.3047 210.555 85.9453C209.555 87.5859 208.141 88.8359 206.312 89.6953C204.484 90.5547 202.344 90.9844 199.891 90.9844C198.031 90.9844 196.219 90.6094 194.453 89.8594C192.688 89.125 191.352 88.1719 190.445 87L193.445 82.875C195.133 84.7656 197.18 85.7109 199.586 85.7109C201.383 85.7109 202.781 85.2266 203.781 84.2578C204.781 83.3047 205.281 81.9453 205.281 80.1797V78.8203C203.719 80.5859 201.664 81.4688 199.117 81.4688C196.07 81.4688 193.602 80.2812 191.711 77.9062C189.836 75.5156 188.898 72.3516 188.898 68.4141V68.1328ZM195.672 68.625C195.672 70.9219 196.133 72.7266 197.055 74.0391C197.977 75.3359 199.242 75.9844 200.852 75.9844C202.914 75.9844 204.391 75.2109 205.281 73.6641V63C204.375 61.4531 202.914 60.6797 200.898 60.6797C199.273 60.6797 197.992 61.3438 197.055 62.6719C196.133 64 195.672 65.9844 195.672 68.625ZM245.5 81H238.469L224.781 58.5469V81H217.75V46.875H224.781L238.492 69.375V46.875H245.5V81ZM250.141 68.0859C250.141 65.5703 250.625 63.3281 251.594 61.3594C252.562 59.3906 253.953 57.8672 255.766 56.7891C257.594 55.7109 259.711 55.1719 262.117 55.1719C265.539 55.1719 268.328 56.2188 270.484 58.3125C272.656 60.4062 273.867 63.25 274.117 66.8438L274.164 68.5781C274.164 72.4688 273.078 75.5938 270.906 77.9531C268.734 80.2969 265.82 81.4688 262.164 81.4688C258.508 81.4688 255.586 80.2969 253.398 77.9531C251.227 75.6094 250.141 72.4219 250.141 68.3906V68.0859ZM256.914 68.5781C256.914 70.9844 257.367 72.8281 258.273 74.1094C259.18 75.375 260.477 76.0078 262.164 76.0078C263.805 76.0078 265.086 75.3828 266.008 74.1328C266.93 72.8672 267.391 70.8516 267.391 68.0859C267.391 65.7266 266.93 63.8984 266.008 62.6016C265.086 61.3047 263.789 60.6562 262.117 60.6562C260.461 60.6562 259.18 61.3047 258.273 62.6016C257.367 63.8828 256.914 65.875 256.914 68.5781ZM285.742 75.5391H298.141V81H277.094V76.875L289.023 61.125H277.445V55.6406H297.766V59.6484L285.742 75.5391Z" fill="#F2F2F2"/>
-<path opacity="0.9" d="M69.1393 109.354C41.2841 109.354 19 87.4976 19 60.1771C19 33.1297 41.2841 11 69.1393 11H100.616C110.922 11 119 19.1962 119 29.0316V60.1771C119 87.4976 96.7159 109.354 69.1393 109.354Z" fill="#002B76"/>
-<path d="M68.746 38.8879C47.9401 38.8879 36.2207 56.1168 35.7319 56.8501C34.5269 58.6568 34.5269 60.9932 35.7328 62.8011C36.2207 63.5331 47.9401 80.762 68.746 80.762C89.5517 80.762 101.271 63.5331 101.76 62.7997C102.965 60.9932 102.965 58.6568 101.759 56.8489C101.271 56.1168 89.5517 38.8879 68.746 38.8879ZM38.6117 60.8807C38.1839 60.2393 38.1839 59.4106 38.6117 58.7691C39.0048 58.1792 47.3488 45.9228 62.2671 42.9827C55.5068 45.5922 50.6965 52.1553 50.6965 59.825C50.6965 67.4946 55.5068 74.0577 62.2671 76.6672C47.3488 73.7271 39.0048 61.4706 38.6117 60.8807ZM60.4284 59.8249C60.4284 60.7806 59.6538 61.5552 58.698 61.5552C57.7423 61.5552 56.9676 60.7806 56.9676 59.8249C56.9676 53.3304 62.2513 48.0468 68.7458 48.0468C69.7015 48.0468 70.4762 48.8213 70.4762 49.7771C70.4762 50.7329 69.7015 51.5074 68.7458 51.5074C64.1595 51.5074 60.4284 55.2384 60.4284 59.8249ZM68.746 64.0317C66.4263 64.0317 64.5392 62.1446 64.5392 59.825C64.5392 57.5053 66.4263 55.6181 68.746 55.6181C71.0658 55.6181 72.9528 57.5052 72.9528 59.825C72.9528 62.1447 71.0658 64.0317 68.746 64.0317ZM98.8802 60.8807C98.4871 61.4706 90.1431 73.7269 75.2249 76.6672C81.9853 74.0575 86.7955 67.4945 86.7955 59.825C86.7955 52.1554 81.9853 45.5923 75.2249 42.9828C90.1431 45.923 98.4871 58.1793 98.8802 58.7692C99.308 59.4106 99.308 60.2393 98.8802 60.8807Z" fill="#F9F2F9"/>
+<svg width="2130" height="600" viewBox="0 0 2130 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M765.131 338.922L805.631 334.984C808.068 348.578 812.99 358.562 820.396 364.938C827.896 371.312 837.974 374.5 850.631 374.5C864.037 374.5 874.115 371.688 880.865 366.062C887.709 360.344 891.131 353.688 891.131 346.094C891.131 341.219 889.677 337.094 886.771 333.719C883.959 330.25 878.99 327.25 871.865 324.719C866.99 323.031 855.881 320.031 838.537 315.719C816.224 310.188 800.568 303.391 791.568 295.328C778.912 283.984 772.584 270.156 772.584 253.844C772.584 243.344 775.537 233.547 781.443 224.453C787.443 215.266 796.021 208.281 807.177 203.5C818.427 198.719 831.974 196.328 847.818 196.328C873.693 196.328 893.146 202 906.177 213.344C919.302 224.688 926.193 239.828 926.849 258.766L885.224 260.594C883.443 250 879.599 242.406 873.693 237.812C867.881 233.125 859.115 230.781 847.396 230.781C835.302 230.781 825.834 233.266 818.99 238.234C814.584 241.422 812.381 245.688 812.381 251.031C812.381 255.906 814.443 260.078 818.568 263.547C823.818 267.953 836.568 272.547 856.818 277.328C877.068 282.109 892.021 287.078 901.677 292.234C911.427 297.297 919.021 304.281 924.459 313.188C929.99 322 932.756 332.922 932.756 345.953C932.756 357.766 929.474 368.828 922.912 379.141C916.349 389.453 907.068 397.141 895.068 402.203C883.068 407.172 868.115 409.656 850.209 409.656C824.146 409.656 804.131 403.656 790.162 391.656C776.193 379.562 767.849 361.984 765.131 338.922ZM967.49 236.406V199.844H1007.01V236.406H967.49ZM967.49 406V256.656H1007.01V406H967.49ZM1043.99 415.844L1089.13 421.328C1089.88 426.578 1091.61 430.188 1094.33 432.156C1098.08 434.969 1103.99 436.375 1112.05 436.375C1122.36 436.375 1130.1 434.828 1135.26 431.734C1138.72 429.672 1141.35 426.344 1143.13 421.75C1144.35 418.469 1144.96 412.422 1144.96 403.609V381.812C1133.15 397.938 1118.24 406 1100.24 406C1080.18 406 1064.29 397.516 1052.57 380.547C1043.38 367.141 1038.79 350.453 1038.79 330.484C1038.79 305.453 1044.79 286.328 1056.79 273.109C1068.88 259.891 1083.88 253.281 1101.79 253.281C1120.26 253.281 1135.49 261.391 1147.49 277.609V256.656H1184.47V390.672C1184.47 408.297 1183.02 421.469 1180.11 430.188C1177.21 438.906 1173.13 445.75 1167.88 450.719C1162.63 455.688 1155.6 459.578 1146.79 462.391C1138.07 465.203 1127.01 466.609 1113.6 466.609C1088.29 466.609 1070.33 462.25 1059.74 453.531C1049.15 444.906 1043.85 433.938 1043.85 420.625C1043.85 419.312 1043.9 417.719 1043.99 415.844ZM1079.29 328.234C1079.29 344.078 1082.33 355.703 1088.43 363.109C1094.61 370.422 1102.21 374.078 1111.21 374.078C1120.86 374.078 1129.02 370.328 1135.68 362.828C1142.33 355.234 1145.66 344.031 1145.66 329.219C1145.66 313.75 1142.47 302.266 1136.1 294.766C1129.72 287.266 1121.66 283.516 1111.91 283.516C1102.44 283.516 1094.61 287.219 1088.43 294.625C1082.33 301.938 1079.29 313.141 1079.29 328.234ZM1224.41 406V199.844H1264.91L1349.29 337.516V199.844H1387.96V406H1346.19L1263.08 271.562V406H1224.41ZM1422.69 329.219C1422.69 316.094 1425.93 303.391 1432.4 291.109C1438.86 278.828 1448.01 269.453 1459.82 262.984C1471.72 256.516 1484.99 253.281 1499.61 253.281C1522.21 253.281 1540.72 260.641 1555.16 275.359C1569.6 289.984 1576.82 308.5 1576.82 330.906C1576.82 353.5 1569.51 372.25 1554.88 387.156C1540.35 401.969 1522.02 409.375 1499.9 409.375C1486.21 409.375 1473.13 406.281 1460.66 400.094C1448.29 393.906 1438.86 384.859 1432.4 372.953C1425.93 360.953 1422.69 346.375 1422.69 329.219ZM1463.19 331.328C1463.19 346.141 1466.71 357.484 1473.74 365.359C1480.77 373.234 1489.44 377.172 1499.76 377.172C1510.07 377.172 1518.69 373.234 1525.63 365.359C1532.66 357.484 1536.18 346.047 1536.18 331.047C1536.18 316.422 1532.66 305.172 1525.63 297.297C1518.69 289.422 1510.07 285.484 1499.76 285.484C1489.44 285.484 1480.77 289.422 1473.74 297.297C1466.71 305.172 1463.19 316.516 1463.19 331.328ZM1592.01 406V375.203L1647.97 310.938C1657.16 300.438 1663.96 292.984 1668.36 288.578C1663.77 288.859 1657.72 289.047 1650.22 289.141L1597.49 289.422V256.656H1720.96V284.641L1663.86 350.453L1643.76 372.25C1654.72 371.594 1661.52 371.266 1664.15 371.266H1725.32V406H1592.01Z" fill="white"/>
+<path opacity="0.9" d="M296.795 599.499C131.909 599.499 0 468.361 0 304.437C0 142.153 131.909 9.37476 296.795 9.37476H483.116C544.124 9.37476 591.941 58.5518 591.941 117.564V304.437C591.941 468.361 460.032 599.499 296.795 599.499Z" fill="#F25733"/>
+<path d="M294.467 176.702C171.309 176.702 101.936 280.076 99.0428 284.476C91.91 295.315 91.91 309.334 99.0481 320.181C101.936 324.574 171.309 427.947 294.467 427.947C417.624 427.947 486.997 324.574 489.89 320.173C497.023 309.334 497.024 295.315 489.885 284.468C486.997 280.076 417.624 176.702 294.467 176.702ZM116.09 308.659C113.557 304.811 113.557 299.839 116.09 295.99C118.416 292.45 167.808 218.911 256.115 201.271C216.099 216.928 187.625 256.307 187.625 302.325C187.625 348.342 216.099 387.721 256.115 403.378C167.808 385.737 118.416 312.198 116.09 308.659ZM245.232 302.324C245.232 308.059 240.646 312.706 234.989 312.706C229.331 312.706 224.746 308.059 224.746 302.324C224.746 263.357 256.022 231.655 294.466 231.655C300.123 231.655 304.709 236.303 304.709 242.037C304.709 247.772 300.123 252.419 294.466 252.419C267.317 252.419 245.232 274.806 245.232 302.324ZM294.467 327.565C280.736 327.565 269.565 316.243 269.565 302.325C269.565 288.407 280.736 277.084 294.467 277.084C308.199 277.084 319.369 288.406 319.369 302.325C319.369 316.243 308.199 327.565 294.467 327.565ZM472.843 308.659C470.516 312.198 421.125 385.737 332.818 403.378C372.836 387.72 401.309 348.342 401.309 302.325C401.309 256.307 372.836 216.929 332.818 201.272C421.125 218.913 470.516 292.451 472.843 295.99C475.376 299.839 475.376 304.811 472.843 308.659Z" fill="#F9F2F9"/>
 </svg>

frontend/sonar-project.properties

@@ -0,0 +1,6 @@
+sonar.organization=signoz
+sonar.projectKey=SigNoz_signoz
+
+# relative paths to source directories. More details and properties are described
+# in https://sonarcloud.io/documentation/project-administration/narrowing-the-focus/
+sonar.sources=./src

frontend/src/AppRoutes/index.tsx

@@ -0,0 +1,27 @@
+import NotFound from 'components/NotFound';
+import Spinner from 'components/Spinner';
+import AppLayout from 'container/AppLayout';
+import history from 'lib/history';
+import React, { Suspense } from 'react';
+import { Route, Router, Switch } from 'react-router-dom';
+
+import routes from './routes';
+
+const App = (): JSX.Element => (
+	<Router history={history}>
+		<AppLayout>
+			<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+				<Switch>
+					{routes.map(({ path, component, exact }, index) => {
+						return (
+							<Route key={index} exact={exact} path={path} component={component} />
+						);
+					})}
+					<Route path="*" exact component={NotFound} />
+				</Switch>
+			</Suspense>
+		</AppLayout>
+	</Router>
+);
+
+export default App;

frontend/src/AppRoutes/pageComponents.ts

@@ -0,0 +1,68 @@
+import Loadable from 'components/Loadable';
+
+export const ServicesTablePage = Loadable(
+	() => import(/* webpackChunkName: "ServicesTablePage" */ 'pages/Metrics'),
+);
+
+export const ServiceMetricsPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "ServiceMetricsPage" */ 'pages/MetricApplication'
+		),
+);
+
+export const ServiceMapPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "ServiceMapPage" */ 'modules/Servicemap/ServiceMap'
+		),
+);
+
+export const TraceDetailPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetailPage" */ 'modules/Traces/TraceDetail'
+		),
+);
+
+export const TraceGraphPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "TraceGraphPage" */ 'modules/Traces/TraceGraphDef'
+		),
+);
+
+export const UsageExplorerPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "UsageExplorerPage" */ 'modules/Usage/UsageExplorerDef'
+		),
+);
+
+export const SignupPage = Loadable(
+	() => import(/* webpackChunkName: "SignupPage" */ 'pages/SignUp'),
+);
+
+export const SettingsPage = Loadable(
+	() => import(/* webpackChunkName: "SettingsPage" */ 'pages/Settings'),
+);
+
+export const InstrumentationPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "InstrumentationPage" */ 'pages/AddInstrumentation'
+		),
+);
+
+export const DashboardPage = Loadable(
+	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/Dashboard'),
+);
+
+export const NewDashboardPage = Loadable(
+	() => import(/* webpackChunkName: "New DashboardPage" */ 'pages/NewDashboard'),
+);
+
+export const DashboardWidget = Loadable(
+	() =>
+		import(/* webpackChunkName: "DashboardWidgetPage" */ 'pages/DashboardWidget'),
+);

frontend/src/AppRoutes/routes.ts

@@ -0,0 +1,89 @@
+import ROUTES from 'constants/routes';
+import DashboardWidget from 'pages/DashboardWidget';
+import { RouteProps } from 'react-router-dom';
+
+import {
+	DashboardPage,
+	InstrumentationPage,
+	NewDashboardPage,
+	ServiceMapPage,
+	ServiceMetricsPage,
+	ServicesTablePage,
+	SettingsPage,
+	SignupPage,
+	TraceDetailPage,
+	TraceGraphPage,
+	UsageExplorerPage,
+} from './pageComponents';
+
+const routes: AppRoutes[] = [
+	{
+		component: SignupPage,
+		path: ROUTES.SIGN_UP,
+		exact: true,
+	},
+	{
+		component: ServicesTablePage,
+		path: ROUTES.APPLICATION,
+		exact: true,
+	},
+	{
+		path: ROUTES.SERVICE_METRICS,
+		exact: true,
+		component: ServiceMetricsPage,
+	},
+	{
+		path: ROUTES.SERVICE_MAP,
+		component: ServiceMapPage,
+		exact: true,
+	},
+	{
+		path: ROUTES.TRACE_GRAPH,
+		exact: true,
+		component: TraceGraphPage,
+	},
+	{
+		path: ROUTES.SETTINGS,
+		exact: true,
+		component: SettingsPage,
+	},
+	{
+		path: ROUTES.USAGE_EXPLORER,
+		exact: true,
+		component: UsageExplorerPage,
+	},
+	{
+		path: ROUTES.INSTRUMENTATION,
+		exact: true,
+		component: InstrumentationPage,
+	},
+	{
+		path: ROUTES.TRACES,
+		exact: true,
+		component: TraceDetailPage,
+	},
+	{
+		path: ROUTES.ALL_DASHBOARD,
+		exact: true,
+		component: DashboardPage,
+	},
+	{
+		path: ROUTES.DASHBOARD,
+		exact: true,
+		component: NewDashboardPage,
+	},
+	{
+		path: ROUTES.DASHBOARD_WIDGET,
+		exact: true,
+		component: DashboardWidget,
+	},
+];
+
+interface AppRoutes {
+	component: RouteProps['component'];
+	path: RouteProps['path'];
+	exact: RouteProps['exact'];
+	isPrivate?: boolean;
+}
+
+export default routes;

frontend/src/api/ErrorResponseHandler.ts

@@ -0,0 +1,57 @@
+import { AxiosError } from 'axios';
+import { ErrorResponse } from 'types/api';
+import { ErrorStatusCode } from 'types/common';
+
+export const ErrorResponseHandler = (error: AxiosError): ErrorResponse => {
+	if (error.response) {
+		// client received an error response (5xx, 4xx)
+		// making the error status code as standard Error Status Code
+		const statusCode = error.response.status as ErrorStatusCode;
+
+		if (statusCode >= 400 && statusCode < 500) {
+			const { data } = error.response;
+
+			if (statusCode === 404) {
+				return {
+					statusCode,
+					payload: null,
+					error: 'Not Found',
+					message: null,
+				};
+			}
+
+			return {
+				statusCode,
+				payload: null,
+				error: data.error,
+				message: null,
+			};
+		}
+
+		return {
+			statusCode,
+			payload: null,
+			error: 'Something went wrong',
+			message: null,
+		};
+	}
+	if (error.request) {
+		// client never received a response, or request never left
+		console.error('client never received a response, or request never left');
+
+		return {
+			statusCode: 500,
+			payload: null,
+			error: 'Something went wrong',
+			message: null,
+		};
+	}
+	// anything else
+	console.error('any');
+	return {
+		statusCode: 500,
+		payload: null,
+		error: error.toString(),
+		message: null,
+	};
+};

frontend/src/api/apiV1.ts

@@ -1,3 +1,3 @@
-const apiV1 = "/api/v1/";
+const apiV1 = '/api/v1/';
 
 export default apiV1;

frontend/src/api/browser/localstorage/get.ts

@@ -0,0 +1,5 @@
+const get = (key: string): string | null => {
+	return localStorage.getItem(key);
+};
+
+export default get;

frontend/src/api/browser/localstorage/remove.ts

@@ -0,0 +1,5 @@
+const remove = (key: string): void => {
+	window.localStorage.removeItem(key);
+};
+
+export default remove;

frontend/src/api/browser/localstorage/set.ts

@@ -0,0 +1,5 @@
+const set = (key: string, value: string): void => {
+	localStorage.setItem(key, value);
+};
+
+export default set;

frontend/src/api/dashboard/create.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/dashboard/create';
+
+const create = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.post('/dashboards', {
+			...props,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default create;

frontend/src/api/dashboard/delete.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 { Props } from 'types/api/dashboard/delete';
+
+const deleteDashboard = async (
+	props: Props,
+): Promise<SuccessResponse<undefined> | ErrorResponse> => {
+	try {
+		const response = await axios.delete(`/dashboards/${props.uuid}`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default deleteDashboard;

frontend/src/api/dashboard/get.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/dashboard/get';
+
+const get = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(`/dashboards/${props.uuid}`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default get;

frontend/src/api/dashboard/getAll.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 } from 'types/api/dashboard/getAll';
+
+const getAll = async (): Promise<
+	SuccessResponse<PayloadProps> | ErrorResponse
+> => {
+	try {
+		const response = await axios.get('/dashboards');
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.message,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getAll;

frontend/src/api/dashboard/update.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/dashboard/update';
+
+const update = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.put(`/dashboards/${props.uuid}`, {
+			...props,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default update;

frontend/src/api/index.ts

@@ -1,9 +1,10 @@
-import axios, { AxiosRequestConfig } from "axios";
-import { ENVIRONMENT } from "Src/constants/env";
-import apiV1 from "./apiV1";
+import axios from 'axios';
+import { ENVIRONMENT } from 'constants/env';
+
+import apiV1 from './apiV1';
 
 export default axios.create({
-	baseURL: `${ENVIRONMENT.baseURL}`,
+	baseURL: `${ENVIRONMENT.baseURL}${apiV1}`,
 });
 
 export { apiV1 };

frontend/src/api/metrics/getDBOverView.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/metrics/getDBOverview';
+
+const getDBOverView = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/service/dbOverview?&start=${props.start}&end=${props.end}&service=${props.service}&step=${props.step}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getDBOverView;

frontend/src/api/metrics/getExternalAverageDuration.ts

@@ -0,0 +1,29 @@
+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/getExternalAverageDuration';
+
+const getExternalAverageDuration = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/service/externalAvgDuration?&start=${props.start}&end=${props.end}&service=${props.service}&step=${props.step}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getExternalAverageDuration;

frontend/src/api/metrics/getExternalError.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/metrics/getExternalError';
+
+const getExternalError = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/service/externalErrors?&start=${props.start}&end=${props.end}&service=${props.service}&step=${props.step}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getExternalError;

frontend/src/api/metrics/getExternalService.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/metrics/getExternalService';
+
+const getExternalService = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/service/external?&start=${props.start}&end=${props.end}&service=${props.service}&step=${props.step}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getExternalService;

frontend/src/api/metrics/getService.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/metrics/getService';
+
+const getService = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/services?&start=${props.start}&end=${props.end}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getService;

frontend/src/api/metrics/getServiceOverview.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/metrics/getServiceOverview';
+
+const getServiceOverview = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/service/overview?&start=${props.start}&end=${props.end}&service=${props.service}&step=${props.step}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getServiceOverview;

frontend/src/api/metrics/getTopEndPoints.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/metrics/getTopEndPoints';
+
+const getTopEndPoints = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/service/top_endpoints?&start=${props.start}&end=${props.end}&service=${props.service}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTopEndPoints;

frontend/src/api/user/signup.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 { Props } from 'types/api/user/signup';
+
+const signup = async (
+	props: Props,
+): Promise<SuccessResponse<undefined> | ErrorResponse> => {
+	try {
+		const response = await axios.post(`/user?email=${props.email}`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default signup;

frontend/src/api/widgets/getQuery.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/widgets/getQuery';
+
+const getQuery = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/query_range?query=${props.query}&start=${props.start}&end=${props.end}&step=${props.step}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getQuery;

frontend/src/assets/Dashboard/Value.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Value = (): JSX.Element => (
+	<svg
+		width="78"
+		height="32"
+		viewBox="0 0 78 32"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			d="M15.0215 17.875C14.2285 18.8184 13.2783 19.5771 12.1709 20.1514C11.0771 20.7256 9.87402 21.0127 8.56152 21.0127C6.83887 21.0127 5.33496 20.5889 4.0498 19.7412C2.77832 18.8936 1.79395 17.7041 1.09668 16.1729C0.399414 14.6279 0.0507812 12.9258 0.0507812 11.0664C0.0507812 9.07031 0.426758 7.27246 1.17871 5.67285C1.94434 4.07324 3.02441 2.84961 4.41895 2.00195C5.81348 1.1543 7.44043 0.730469 9.2998 0.730469C12.2529 0.730469 14.5771 1.83789 16.2725 4.05273C17.9814 6.25391 18.8359 9.26172 18.8359 13.0762V14.1836C18.8359 19.9941 17.6875 24.2393 15.3906 26.9189C13.0938 29.585 9.62793 30.9521 4.99316 31.0205H4.25488V27.8213H5.05469C8.18555 27.7666 10.5918 26.9531 12.2734 25.3809C13.9551 23.7949 14.8711 21.293 15.0215 17.875ZM9.17676 17.875C10.4482 17.875 11.6172 17.4854 12.6836 16.7061C13.7637 15.9268 14.5498 14.9629 15.042 13.8145V12.2969C15.042 9.80859 14.502 7.78516 13.4219 6.22656C12.3418 4.66797 10.9746 3.88867 9.32031 3.88867C7.65234 3.88867 6.3125 4.53125 5.30078 5.81641C4.28906 7.08789 3.7832 8.76953 3.7832 10.8613C3.7832 12.8984 4.26855 14.5801 5.23926 15.9062C6.22363 17.2188 7.53613 17.875 9.17676 17.875ZM24.5371 29.0107C24.5371 28.3545 24.7285 27.8076 25.1113 27.3701C25.5078 26.9326 26.0957 26.7139 26.875 26.7139C27.6543 26.7139 28.2422 26.9326 28.6387 27.3701C29.0488 27.8076 29.2539 28.3545 29.2539 29.0107C29.2539 29.6396 29.0488 30.166 28.6387 30.5898C28.2422 31.0137 27.6543 31.2256 26.875 31.2256C26.0957 31.2256 25.5078 31.0137 25.1113 30.5898C24.7285 30.166 24.5371 29.6396 24.5371 29.0107ZM51.1562 20.9717H55.2988V24.0684H51.1562V31H47.3418V24.0684H33.7451V21.833L47.1162 1.14062H51.1562V20.9717ZM38.0518 20.9717H47.3418V6.3291L46.8906 7.14941L38.0518 20.9717ZM73.6123 1.12012V4.33984H72.915C69.9619 4.39453 67.6104 5.26953 65.8604 6.96484C64.1104 8.66016 63.0986 11.0459 62.8252 14.1221C64.3975 12.3174 66.5439 11.415 69.2646 11.415C71.8623 11.415 73.9336 12.3311 75.4785 14.1631C77.0371 15.9951 77.8164 18.3604 77.8164 21.2588C77.8164 24.335 76.9756 26.7959 75.2939 28.6416C73.626 30.4873 71.3838 31.4102 68.5674 31.4102C65.71 31.4102 63.3926 30.3164 61.6152 28.1289C59.8379 25.9277 58.9492 23.0977 58.9492 19.6387V18.1826C58.9492 12.6865 60.1182 8.48926 62.4561 5.59082C64.8076 2.67871 68.3008 1.18848 72.9355 1.12012H73.6123ZM68.6289 14.5732C67.3301 14.5732 66.1338 14.9629 65.04 15.7422C63.9463 16.5215 63.1875 17.499 62.7637 18.6748V20.0693C62.7637 22.5303 63.3174 24.5127 64.4248 26.0166C65.5322 27.5205 66.9131 28.2725 68.5674 28.2725C70.2764 28.2725 71.6162 27.6436 72.5869 26.3857C73.5713 25.1279 74.0635 23.4805 74.0635 21.4434C74.0635 19.3926 73.5645 17.7383 72.5664 16.4805C71.582 15.209 70.2695 14.5732 68.6289 14.5732Z"
+			fill="white"
+		/>
+	</svg>
+);
+
+export default Value;

frontend/src/assets/NotFound.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 const NotFound = (): JSX.Element => {
 	return (
@@ -9,7 +9,7 @@ const NotFound = (): JSX.Element => {
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
 		>
-			<g clip-path="url(#clip0)">
+			<g clipPath="url(#clip0)">
 				<path
 					d="M181.155 195.76C278.772 195.76 357.906 190.521 357.906 184.059C357.906 177.596 278.772 172.358 181.155 172.358C83.5382 172.358 4.40404 177.596 4.40404 184.059C4.40404 190.521 83.5382 195.76 181.155 195.76Z"
 					fill="#F2F2F2"
@@ -29,17 +29,17 @@ const NotFound = (): JSX.Element => {
 				<path
 					d="M110.947 141.154H99.0408V106.092C99.0408 105.17 98.8592 104.257 98.5063 103.405C98.1535 102.553 97.6362 101.779 96.9842 101.127C96.3322 100.475 95.5581 99.9579 94.7062 99.605C93.8543 99.2522 92.9412 99.0705 92.0191 99.0705H89.2291C87.3668 99.0705 85.5808 99.8103 84.264 101.127C82.9472 102.444 82.2074 104.23 82.2074 106.092V141.154H48.623C47.9321 141.154 47.2529 140.976 46.6513 140.636C46.0498 140.296 45.5463 139.806 45.1896 139.215C44.833 138.623 44.6354 137.949 44.616 137.258C44.5965 136.568 44.7559 135.884 45.0787 135.273L80.6241 67.9968C81.0672 67.1581 81.3358 66.2382 81.4137 65.2927C81.4915 64.3473 81.377 63.3959 81.077 62.4959C80.777 61.596 80.2977 60.7662 79.6681 60.0566C79.0386 59.3469 78.2717 58.7722 77.4139 58.3672L75.3156 57.3763C73.6863 56.6069 71.8235 56.4933 70.1128 57.059C68.402 57.6247 66.9742 58.8263 66.1248 60.4154L22.7725 141.514C22.0343 142.895 21.648 144.437 21.648 146.003V146.003C21.648 148.528 22.6512 150.95 24.4368 152.735C26.2224 154.521 28.6442 155.524 31.1694 155.524H82.2074V177.695C82.2074 178.8 82.4251 179.895 82.8481 180.916C83.271 181.937 83.891 182.865 84.6726 183.647C85.4541 184.428 86.382 185.048 87.4032 185.471C88.4243 185.894 89.5188 186.112 90.6241 186.112H90.6241C92.8564 186.112 94.9972 185.225 96.5756 183.647C98.1541 182.068 99.0408 179.927 99.0408 177.695V155.524H110.947C111.891 155.524 112.825 155.338 113.697 154.977C114.569 154.616 115.361 154.087 116.028 153.42C116.695 152.753 117.224 151.96 117.585 151.089C117.947 150.217 118.132 149.283 118.132 148.339V148.339C118.132 147.396 117.947 146.461 117.585 145.59C117.224 144.718 116.695 143.926 116.028 143.259C115.361 142.591 114.569 142.062 113.697 141.701C112.825 141.34 111.891 141.154 110.947 141.154V141.154Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M334.298 141.154H322.392V106.092C322.392 104.23 321.652 102.444 320.335 101.127C319.018 99.8103 317.232 99.0705 315.37 99.0705H312.58C311.658 99.0705 310.745 99.2522 309.893 99.605C309.041 99.9579 308.267 100.475 307.615 101.127C306.963 101.779 306.446 102.553 306.093 103.405C305.74 104.257 305.558 105.17 305.558 106.092V141.154H271.974C271.283 141.154 270.604 140.976 270.002 140.636C269.401 140.296 268.897 139.806 268.541 139.215C268.184 138.623 267.986 137.949 267.967 137.258C267.948 136.568 268.107 135.884 268.43 135.273L303.975 67.9968C304.418 67.1581 304.687 66.2382 304.765 65.2927C304.843 64.3473 304.728 63.3959 304.428 62.4959C304.128 61.596 303.649 60.7662 303.019 60.0566C302.39 59.3469 301.623 58.7722 300.765 58.3672L298.667 57.3763C297.037 56.6069 295.175 56.4933 293.464 57.059C291.753 57.6247 290.325 58.8263 289.476 60.4154L246.124 141.514C245.385 142.895 244.999 144.437 244.999 146.003C244.999 148.528 246.002 150.95 247.788 152.735C249.573 154.521 251.995 155.524 254.52 155.524H305.558V177.695C305.558 179.927 306.445 182.068 308.024 183.647C309.602 185.225 311.743 186.112 313.975 186.112V186.112C316.207 186.112 318.348 185.225 319.927 183.647C321.505 182.068 322.392 179.927 322.392 177.695V155.524H334.298C335.242 155.524 336.176 155.338 337.048 154.977C337.92 154.616 338.712 154.087 339.379 153.42C340.046 152.753 340.575 151.96 340.936 151.089C341.298 150.217 341.483 149.283 341.483 148.339V148.339C341.483 146.434 340.726 144.606 339.379 143.259C338.032 141.911 336.204 141.154 334.298 141.154V141.154Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M180.95 52.2653C152.152 52.2653 131.476 70.741 131.476 113.851C131.476 162.709 152.152 175.642 180.95 175.642C209.747 175.642 231.656 161.477 231.656 113.851C231.656 62.9402 209.747 52.2653 180.95 52.2653ZM181.139 159.425C161.193 159.425 150.773 147.723 150.773 113.883C150.773 84.0236 161.62 68.2776 181.566 68.2776C201.512 68.2776 212.359 78.6206 212.359 113.883C212.359 146.87 201.085 159.425 181.139 159.425V159.425Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M157.867 10.4381C160.254 10.4381 162.19 8.5027 162.19 6.11526C162.19 3.72782 160.254 1.79242 157.867 1.79242C155.479 1.79242 153.544 3.72782 153.544 6.11526C153.544 8.5027 155.479 10.4381 157.867 10.4381Z"
@@ -129,12 +129,12 @@ const NotFound = (): JSX.Element => {
 				<path
 					d="M345.776 182.211C345.176 179.158 347.774 176.452 350.34 174.693C352.906 172.934 355.904 171.205 356.779 168.22C358.037 163.93 354.29 160.001 351.373 156.613C349.208 154.098 347.35 151.336 345.836 148.384C345.229 147.2 344.671 145.963 344.512 144.643C344.282 142.741 344.893 140.848 345.508 139.034C347.559 132.992 349.751 126.999 352.085 121.058"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M337.66 139.656C338.675 140.025 339.762 140.153 340.835 140.03C341.908 139.908 342.938 139.537 343.844 138.949C344.749 138.36 345.506 137.569 346.053 136.638C346.601 135.708 346.925 134.662 347 133.585C347.075 132.507 346.898 131.427 346.484 130.43C346.071 129.432 345.431 128.544 344.615 127.836C343.8 127.128 342.831 126.619 341.785 126.349C340.739 126.079 339.645 126.056 338.589 126.281L338.764 129.871L337.065 126.794C335.399 127.578 334.111 128.99 333.486 130.722C333.263 131.329 333.128 131.964 333.084 132.609C332.977 134.121 333.366 135.627 334.192 136.899C335.017 138.171 336.235 139.138 337.66 139.656V139.656Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M344.924 119.818C345.322 118.719 345.99 117.738 346.868 116.965C347.745 116.192 348.802 115.653 349.943 115.396L350.517 118.808L351.582 115.225C353.06 115.246 354.493 115.738 355.673 116.627C356.854 117.516 357.722 118.758 358.151 120.172C358.58 121.587 358.548 123.101 358.061 124.497C357.573 125.892 356.655 127.097 355.438 127.936C354.221 128.776 352.769 129.207 351.292 129.167C349.814 129.127 348.387 128.619 347.217 127.716C346.047 126.813 345.194 125.561 344.782 124.141C344.37 122.722 344.419 121.208 344.924 119.818H344.924Z"
@@ -143,7 +143,7 @@ const NotFound = (): JSX.Element => {
 				<path
 					d="M345.306 118.586C345.705 117.487 346.373 116.506 347.251 115.733C348.128 114.96 349.185 114.421 350.326 114.164L350.9 117.576L351.965 113.992C353.443 114.014 354.875 114.505 356.056 115.395C357.237 116.284 358.105 117.526 358.534 118.94C358.963 120.355 358.931 121.869 358.444 123.265C357.956 124.66 357.038 125.864 355.821 126.704C354.604 127.543 353.152 127.974 351.675 127.935C350.197 127.895 348.77 127.387 347.6 126.484C346.43 125.58 345.577 124.329 345.165 122.909C344.753 121.489 344.802 119.976 345.306 118.586H345.306Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M350.148 156.682C351.758 157.266 353.527 157.237 355.116 156.601C356.706 155.965 358.006 154.766 358.769 153.233C359.532 151.7 359.704 149.939 359.252 148.288C358.801 146.636 357.757 145.208 356.32 144.276L355.502 147.03L354.922 143.578C354.916 143.575 354.911 143.573 354.904 143.571C354.043 143.258 353.129 143.118 352.214 143.159C351.299 143.199 350.401 143.42 349.571 143.807C348.741 144.195 347.995 144.743 347.377 145.419C346.759 146.095 346.28 146.886 345.967 147.747C345.655 148.608 345.515 149.523 345.556 150.438C345.597 151.353 345.818 152.251 346.207 153.081C346.595 153.91 347.143 154.656 347.819 155.273C348.496 155.891 349.287 156.37 350.148 156.682H350.148Z"
@@ -152,7 +152,7 @@ const NotFound = (): JSX.Element => {
 				<path
 					d="M350.48 155.434C352.09 156.018 353.858 155.989 355.448 155.353C357.038 154.717 358.338 153.518 359.101 151.985C359.864 150.452 360.036 148.691 359.584 147.04C359.132 145.388 358.089 143.96 356.652 143.028L355.834 145.782L355.254 142.33C355.248 142.327 355.242 142.325 355.236 142.323C354.375 142.01 353.461 141.87 352.546 141.911C351.631 141.951 350.732 142.172 349.902 142.559C349.072 142.947 348.327 143.495 347.709 144.171C347.091 144.847 346.611 145.638 346.299 146.499C345.987 147.36 345.847 148.274 345.888 149.19C345.929 150.105 346.15 151.003 346.538 151.833C346.927 152.662 347.475 153.407 348.151 154.025C348.827 154.643 349.619 155.122 350.48 155.434H350.48Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M342.888 168.263C343.165 169.838 343.975 171.269 345.182 172.318C346.389 173.367 347.92 173.968 349.519 174.022C351.117 174.076 352.685 173.579 353.96 172.614C355.235 171.649 356.139 170.275 356.521 168.722C356.903 167.169 356.74 165.532 356.058 164.086C355.377 162.639 354.219 161.471 352.778 160.777C351.338 160.083 349.702 159.905 348.146 160.274C346.59 160.643 345.208 161.535 344.232 162.802L347.339 167.478L343.094 164.996C342.765 166.053 342.694 167.173 342.888 168.263V168.263Z"
@@ -161,7 +161,7 @@ const NotFound = (): JSX.Element => {
 				<path
 					d="M343.176 167.339C343.452 168.913 344.262 170.345 345.469 171.394C346.677 172.443 348.208 173.044 349.806 173.098C351.404 173.152 352.972 172.655 354.247 171.69C355.522 170.725 356.426 169.35 356.808 167.798C357.191 166.245 357.027 164.608 356.346 163.162C355.664 161.715 354.506 160.547 353.065 159.853C351.625 159.159 349.989 158.981 348.433 159.35C346.877 159.719 345.495 160.611 344.519 161.878L347.627 166.554L343.381 164.072C343.052 165.129 342.981 166.249 343.176 167.339V167.339Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M3.01816 157.568C3.68505 157.81 4.39914 157.894 5.10415 157.814C5.80915 157.733 6.48579 157.49 7.08075 157.103C7.6757 156.716 8.17269 156.197 8.53256 155.585C8.89243 154.974 9.10533 154.287 9.15448 153.579C9.20364 152.871 9.0877 152.161 8.81581 151.506C8.54393 150.851 8.12352 150.267 7.58772 149.802C7.05193 149.337 6.4154 149.002 5.7283 148.825C5.04121 148.648 4.32233 148.633 3.62832 148.78L3.74301 151.139L2.62726 149.118C1.53221 149.632 0.686246 150.56 0.275259 151.698C0.129301 152.097 0.0405688 152.514 0.0117106 152.938C-0.0587161 153.931 0.19668 154.921 0.739195 155.757C1.28171 156.592 2.08178 157.228 3.01816 157.568V157.568Z"
@@ -170,12 +170,12 @@ const NotFound = (): JSX.Element => {
 				<path
 					d="M8.53892 184.92C8.14506 182.914 9.85174 181.136 11.5375 179.98C13.2233 178.825 15.1931 177.689 15.7683 175.728C16.595 172.909 14.1326 170.328 12.2161 168.102C10.7942 166.45 9.57311 164.635 8.57841 162.695C8.14597 161.933 7.85142 161.101 7.70834 160.237C7.55722 158.988 7.95864 157.744 8.36304 156.552C9.71024 152.582 11.1506 148.645 12.6842 144.741"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M3.20684 156.961C3.87373 157.203 4.58782 157.287 5.29282 157.207C5.99782 157.126 6.67447 156.883 7.26942 156.496C7.86437 156.109 8.36136 155.59 8.72123 154.978C9.08109 154.367 9.29399 153.68 9.34315 152.972C9.3923 152.264 9.27637 151.554 9.00448 150.899C8.73259 150.243 8.31218 149.66 7.77639 149.195C7.2406 148.73 6.60407 148.395 5.91698 148.218C5.22988 148.041 4.51101 148.025 3.817 148.173L3.93169 150.532L2.81594 148.511C1.72089 149.025 0.874921 149.953 0.463934 151.091C0.317977 151.49 0.229247 151.907 0.200387 152.331C0.129956 153.324 0.38535 154.314 0.927866 155.149C1.47038 155.985 2.27045 156.621 3.20684 156.961V156.961Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M7.97892 143.927C8.24064 143.205 8.67989 142.56 9.25622 142.052C9.83254 141.545 10.5274 141.19 11.2767 141.022L11.654 143.264L12.3534 140.909C13.3245 140.923 14.2659 141.246 15.0417 141.83C15.8175 142.415 16.3875 143.23 16.6695 144.16C16.9514 145.089 16.9307 146.084 16.6104 147.001C16.29 147.918 15.6866 148.709 14.8872 149.261C14.0878 149.812 13.1337 150.095 12.1629 150.069C11.192 150.043 10.2545 149.709 9.48578 149.116C8.71703 148.522 8.15678 147.7 7.88593 146.767C7.61509 145.835 7.64765 144.84 7.97892 143.927V143.927Z"
@@ -184,7 +184,7 @@ const NotFound = (): JSX.Element => {
 				<path
 					d="M8.23051 143.117C8.49223 142.395 8.93148 141.751 9.50781 141.243C10.0841 140.735 10.779 140.381 11.5283 140.212L11.9056 142.454L12.605 140.099C13.5761 140.114 14.5175 140.436 15.2933 141.021C16.0691 141.605 16.6391 142.421 16.921 143.35C17.203 144.279 17.1823 145.274 16.8619 146.191C16.5416 147.108 15.9381 147.899 15.1387 148.451C14.3393 149.003 13.3853 149.286 12.4145 149.26C11.4436 149.234 10.5061 148.9 9.73737 148.306C8.96861 147.713 8.40837 146.89 8.13752 145.958C7.86667 145.025 7.89923 144.03 8.23051 143.117V143.117Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M11.4118 168.147C12.4694 168.531 13.6312 168.512 14.6758 168.094C15.7203 167.676 16.5746 166.888 17.0757 165.881C17.5768 164.874 17.6898 163.717 17.3931 162.632C17.0963 161.547 16.4106 160.609 15.4667 159.996L14.9293 161.806L14.5482 159.538C14.5444 159.536 14.5405 159.534 14.5365 159.533C13.9708 159.327 13.3701 159.235 12.7687 159.262C12.1673 159.288 11.5771 159.433 11.0317 159.688C10.4863 159.943 9.99649 160.302 9.59021 160.747C9.18392 161.191 8.86914 161.711 8.66386 162.276C8.45859 162.842 8.36684 163.443 8.39385 164.044C8.42087 164.646 8.56612 165.236 8.82132 165.781C9.07651 166.326 9.43664 166.816 9.88112 167.222C10.3256 167.628 10.8457 167.942 11.4118 168.147V168.147Z"
@@ -193,7 +193,7 @@ const NotFound = (): JSX.Element => {
 				<path
 					d="M11.6298 167.327C12.6874 167.711 13.8492 167.692 14.8938 167.274C15.9383 166.856 16.7926 166.068 17.2937 165.061C17.7949 164.054 17.9078 162.897 17.6111 161.812C17.3143 160.727 16.6287 159.789 15.6847 159.176L15.1473 160.986L14.7662 158.718C14.7624 158.716 14.7585 158.714 14.7545 158.713C14.1889 158.508 13.5885 158.416 12.9874 158.443C12.3864 158.47 11.7965 158.615 11.2515 158.87C10.1508 159.385 9.29959 160.315 8.88523 161.458C8.47086 162.6 8.52722 163.86 9.04193 164.961C9.55663 166.061 10.4875 166.913 11.6298 167.327V167.327Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M6.64183 175.756C6.82368 176.791 7.35579 177.731 8.14892 178.42C8.94205 179.109 9.94797 179.505 10.998 179.54C12.048 179.575 13.0782 179.249 13.9159 178.615C14.7536 177.981 15.3478 177.078 15.5988 176.058C15.8499 175.037 15.7425 173.962 15.2947 173.012C14.847 172.061 14.086 171.294 13.1395 170.838C12.193 170.382 11.1185 170.265 10.0962 170.507C9.07393 170.75 8.16602 171.336 7.52475 172.168L9.56612 175.241L6.77684 173.61C6.56057 174.304 6.51427 175.04 6.64183 175.756V175.756Z"
@@ -202,7 +202,7 @@ const NotFound = (): JSX.Element => {
 				<path
 					d="M6.83052 175.149C7.01237 176.184 7.54448 177.124 8.33761 177.813C9.13074 178.502 10.1367 178.898 11.1867 178.933C12.2367 178.968 13.2669 178.642 14.1046 178.007C14.9423 177.373 15.5365 176.471 15.7875 175.45C16.0386 174.43 15.9312 173.355 15.4834 172.404C15.0357 171.454 14.2747 170.686 13.3282 170.23C12.3817 169.774 11.3072 169.658 10.2849 169.9C9.26262 170.142 8.35471 170.729 7.71343 171.561L9.75481 174.633L6.96553 173.003C6.74926 173.697 6.70296 174.433 6.83052 175.149V175.149Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M161.152 114.299C164.298 114.299 166.848 110.998 166.848 106.927C166.848 102.856 164.298 99.5555 161.152 99.5555C158.006 99.5555 155.456 102.856 155.456 106.927C155.456 110.998 158.006 114.299 161.152 114.299Z"
@@ -219,17 +219,17 @@ const NotFound = (): JSX.Element => {
 				<path
 					d="M162.492 112.623C165.638 112.623 168.189 109.323 168.189 105.252C168.189 101.18 165.638 97.8801 162.492 97.8801C159.346 97.8801 156.796 101.18 156.796 105.252C156.796 109.323 159.346 112.623 162.492 112.623Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M193.487 112.791C196.633 112.791 199.183 109.49 199.183 105.419C199.183 101.348 196.633 98.0476 193.487 98.0476C190.341 98.0476 187.79 101.348 187.79 105.419C187.79 109.49 190.341 112.791 193.487 112.791Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M178.743 133.23C184.48 133.23 189.131 130.53 189.131 127.199C189.131 123.868 184.48 121.168 178.743 121.168C173.007 121.168 168.356 123.868 168.356 127.199C168.356 130.53 173.007 133.23 178.743 133.23Z"
 					stroke="#3F3D56"
-					stroke-miterlimit="10"
+					strokeMiterlimit="10"
 				/>
 				<path
 					d="M181.257 123.748C181.259 124.169 181.101 124.576 180.814 124.884C180.679 125.032 180.514 125.15 180.331 125.232C180.147 125.313 179.949 125.355 179.749 125.356H176.398C175.985 125.342 175.595 125.164 175.312 124.863C175.03 124.562 174.878 124.161 174.89 123.748C174.888 123.421 174.984 123.101 175.165 122.829C175.906 122.725 176.654 122.674 177.403 122.676C178.659 122.671 179.911 122.815 181.133 123.104C181.215 123.309 181.257 123.527 181.257 123.748V123.748Z"

frontend/src/assets/index.css

@@ -1,12 +1,18 @@
-@import "~antd/dist/antd.dark.css";
-
 .ant-space-item {
 	margin-right: 0 !important;
 }
 
-#chart svg{
+#chart svg {
 	width: 100%;
 }
-#chart{
+#chart {
 	width: 100%;
-}
+}
+
+.ant-tabs-tab {
+	margin: 0 0 0 32px !important;
+}
+
+.ant-tabs-nav-list > .ant-tabs-tab:first-child {
+	margin: 0 !important;
+}

frontend/src/components/Graph/Legend/index.tsx

@@ -0,0 +1,24 @@
+import { Typography } from 'antd';
+import React from 'react';
+
+import { ColorContainer, Container } from './styles';
+
+const Legend = ({ text, color }: LegendProps): JSX.Element => {
+	if (text.length === 0) {
+		return <></>;
+	}
+
+	return (
+		<Container>
+			<ColorContainer color={color}></ColorContainer>
+			<Typography>{text}</Typography>
+		</Container>
+	);
+};
+
+interface LegendProps {
+	text: string;
+	color: string;
+}
+
+export default Legend;

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+	margin-left: 2rem;
+	margin-right: 2rem;
+	display: flex;
+	cursor: pointer;
+`;
+
+interface Props {
+	color: string;
+}
+
+export const ColorContainer = styled.div<Props>`
+	background-color: ${({ color }): string => color};
+	border-radius: 50%;
+	width: 20px;
+	height: 20px;
+	margin-right: 0.5rem;
+`;