Open Source: Contributing to Signoz (Issue #2077)

About Signoz

Signoz is an Application Performance Monitoring (APM) & Observability tool. It's an open-source alternative to DataDog. SigNoz helps developers monitor applications and troubleshoot problems in their deployed applications.

Website | GitHub Repository

Getting started with Signoz:

1. Setting up the development environment: The setup process for the development environment on Signoz was straightforward since the front-end and back-end were separated. The specific issue I was working on did not necessitate configuring the back-end. However, during the initial setup on my Windows OS, I encountered an error stating that 'chmod' was not recognized as an internal or external command, operable program or batch file. After researching, I found on the Microsoft Developer Community that MSBuild did not have a chmod executable or a chmod task. Consequently, I decided to switch to using WSL instead.

2. The community: Signoz has a slack channel and the maintainers are really supportive.

Identifying areas to contribute to

When contributing to open source, I like to start with first-time-only issues, to get familiar with the codebase. I look for fto issues that are related to frontend/design. I found the issue 2077

My experience contributing to Signoz

1. Overview of the feature or issue that I contributed to :

   Issue #2077 was a styling issue about fixing the tooltip position. As shown in the video below, the initial position of the tooltip was not consistent and it needed to have a more constant positioning when hovering over the charts

2. https://www.loom.com/share/cf502c9329f54e8e9381f2456385ecbb

3. Details about my approach and implementation:

   To address the tooltip positioning issue, I began by identifying the file requiring modifications. Upon inspection, I discovered that Signoz's charts were based on the chart.js library. To gain more insight into styling the tooltip, I checked the library's documentation and reviewed a helpful video tutorial. I realized that the tooltip position was not initially set, leading to its erratic movement. Therefore, I configured custom positioning for the tooltip so that it would maintain a constant position relative to the mouse cursor, only adjusting its location when space is insufficient to accommodate its width. I made a video (which is shown below) of the corrected tooltip positioning.

1. Challenges I faced and how I overcame them:

   • Type issues: I was confused about the return type for a function, so I asked questions to solve this.

   • Commit lint error: After I had finished and was git committing my changes, I got the commit lint error, which was a result of not following the conventional commit format

Conclusion: Things I liked about contributing to Signoz

• Step-by-step guide for contributing: Detailed readme document, docker images for various parts of the project.

• Contributing to the frontend without setting up the whole project.

• Really helpful maintainer & community

I would love to hear your comments, contributions and suggestions.