title: ÐÐ½ÑÐµÐ³ÑÐ°ÑÐ¸Ñ Ð¸Ð½ÑÑÑÑÐ¼ÐµÐ½ÑÐ° Grafana Ð² Ð¸Ð½Ð¶ÐµÐ½ÐµÑÐ½ÑÐ¹ Ð¿Ð¾ÑÑÐ°Ð» ÐºÐ¾Ð¼Ð¿Ð°Ð½Ð¸Ð¸
title: Ð²ÑÐ¿ÑÑÐºÐ½Ð°Ñ ÐºÐ²Ð°Ð»Ð¸ÑÐ¸ÐºÐ°ÑÐ¸Ð¾Ð½Ð½Ð°Ñ ÑÐ°Ð±Ð¾ÑÐ° Ð±Ð°ÐºÐ°Ð»Ð°Ð²ÑÐ°
titleType: Subtitle
title: Integration of Grafana into the companys engineering portal
Creators: name: ÐÐ»Ð¾ÑÐºÐ¾Ð²Ð°, ÐÐ¸Ð´Ð¸Ñ
Publisher: name: Ð¡Ð°Ð½ÐºÑ-ÐÐµÑÐµÑÐ±ÑÑÐ³ÑÐºÐ¸Ð¹ Ð¿Ð¾Ð»Ð¸ÑÐµÑÐ½Ð¸ÑÐµÑÐºÐ¸Ð¹ ÑÐ½Ð¸Ð²ÐµÑÑÐ¸ÑÐµÑ ÐÐµÑÑÐ° ÐÐµÐ»Ð¸ÐºÐ¾Ð³Ð¾
Year: 2024
Subjects: Ð²Ð¸Ð·ÑÐ°Ð»Ð¸Ð·Ð°ÑÐ¸Ñ Ð´Ð°Ð½Ð½ÑÑ
Ð¼ÐµÑÑÐ¸ÐºÐ¸
Grafana
Ð³ÑÐ°ÑÐ¸ÐºÐ¸
data visualization
metrics
charts

description: ÐÐ°Ð½Ð½Ð°Ñ Ð²ÑÐ¿ÑÑÐºÐ½Ð°Ñ ÐºÐ²Ð°Ð»Ð¸ÑÐ¸ÐºÐ°ÑÐ¸Ð¾Ð½Ð½Ð°Ñ ÑÐ°Ð±Ð¾ÑÐ° Ð¿Ð¾ÑÐ²ÑÑÐµÐ½Ð° Ð¸Ð½ÑÐµÐ³ÑÐ°ÑÐ¸Ð¸ Grafana Ð² Ð¸Ð½Ð¶ÐµÐ½ÐµÑÐ½ÑÐ¹ Ð¿Ð¾ÑÑÐ°Ð» ÐºÐ¾Ð¼Ð¿Ð°Ð½Ð¸Ð¸ Ð·Ð° ÑÑÐµÑ ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ¸ ÑÐ½Ð¸Ð²ÐµÑÑÐ°Ð»ÑÐ½Ð¾Ð¹ Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ¸ Ð²Ð¸Ð·ÑÐ°Ð»Ð¸Ð·Ð°ÑÐ¸Ð¸ Ð´Ð°Ð½Ð½ÑÑ. ÐÑÐ¸ÑÐ¸Ð½Ð° ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ ÑÐ¾Ð±ÑÑÐ²ÐµÐ½Ð½Ð¾Ð³Ð¾ ÑÐµÑÐµÐ½Ð¸Ñ â Ð¾ÑÑÑÑÑÑÐ²Ð¸Ðµ Ð¸Ð½ÑÑÑÑÐ¼ÐµÐ½ÑÐ¾Ð², ÑÐ¼ÐµÑÑÐ¸Ñ ÑÐ°Ð±Ð¾ÑÐ°ÑÑ Ñ ÑÐ°Ð·Ð½Ð¾Ð¼Ð°ÑÑÑÐ°Ð±Ð½ÑÐ¼Ð¸ Ð´Ð°Ð½Ð½ÑÐ¼Ð¸, Ð¾ÑÐ¾Ð±ÑÐ°Ð¶Ð°ÑÑÐ¸Ð¼Ð¸ÑÑ ÑÐ°Ð·Ð½ÑÐ¼Ð¸ ÑÐ¸Ð¿Ð°Ð¼Ð¸ Ð´Ð¸Ð°Ð³ÑÐ°Ð¼Ð¼, Ð² ÑÐ°Ð¼ÐºÐ°Ñ Ð¾Ð´Ð½Ð¾Ð³Ð¾ ÑÐ¾Ð»ÑÑÐ°. Ð ÑÐ°Ð¼ÐºÐ°Ñ ÑÐ°Ð±Ð¾ÑÑ Ð¿ÑÐ¾Ð²Ð¾Ð´Ð¸ÑÑÑ Ð¾Ð±Ð·Ð¾Ñ ÑÑÑÐµÑÑÐ²ÑÑÑÐ¸Ñ React-Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐº, Ð½Ð° Ð¾ÑÐ½Ð¾Ð²Ðµ ÐºÐ¾ÑÐ¾ÑÑÑ Ð±ÑÐ´ÐµÑ Ð¿ÑÐ¾Ð¸ÑÑÐ¾Ð´Ð¸ÑÑ ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ° Ð¸Ð½ÑÑÑÑÐ¼ÐµÐ½ÑÐ°. Ð ÑÐ¾Ð´Ðµ ÑÑÐ°Ð²Ð½ÐµÐ½Ð¸Ñ ÑÐ¾ÑÐ¼Ð¸ÑÑÐµÑÑÑ ÑÐ¿Ð¸ÑÐ¾Ðº Ð·Ð½Ð°ÑÐ¸Ð¼ÑÑ ÐºÑÐ¸ÑÐµÑÐ¸ÐµÐ², Ð½Ð° Ð¾ÑÐ½Ð¾Ð²Ðµ ÐºÐ¾ÑÐ¾ÑÑÑ Ð¿ÑÐ¾Ð¸ÑÑÐ¾Ð´Ð¸Ñ Ð²ÑÐ±Ð¾Ñ ÑÑÐµÐ´ÑÑÐ²Ð°, Ð»ÐµÐ¶Ð°ÑÐµÐ³Ð¾ Ð² Ð¾ÑÐ½Ð¾Ð²Ðµ Ð½Ð¾Ð²Ð¾Ð¹ Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ¸. ÐÐ»Ñ ÑÐµÐ°Ð»Ð¸Ð·Ð°ÑÐ¸Ð¸ ÑÑÐµÐ´ÑÑÐ²Ð° Ð¾ÑÑÐ¸ÑÐ¾Ð²ÐºÐ¸ Ð¾Ð¿Ð¸ÑÑÐ²Ð°ÐµÑÑÑ Ð²ÑÑÐ¾ÐºÐ¾ÑÑÐ¾Ð²Ð½ÐµÐ²Ð°Ñ Ð°ÑÑÐ¸ÑÐµÐºÑÑÑÐ° Ð¸Ð½Ð¶ÐµÐ½ÐµÑÐ½Ð¾Ð³Ð¾ Ð¿Ð¾ÑÑÐ°Ð»Ð°, Ð¾Ð±ÑÑÑÐ½ÑÑÑÐ°Ñ Ð¿ÑÐ¸Ð½ÑÐ¸Ð¿ Ð¿Ð¾Ð»ÑÑÐµÐ½Ð¸Ñ Ð´Ð°Ð½Ð½ÑÑ Ð¸Ð· Grafana. ÐÐ¾Ð»ÐµÐµ ÑÐ¾Ð³Ð¾, ÑÐ°ÑÑÐ¼Ð°ÑÑÐ¸Ð²Ð°ÐµÑÑÑ ÐºÐ¾Ð¼Ð¿Ð¾Ð½ÐµÐ½ÑÐ½Ð°Ñ Ð°ÑÑÐ¸ÑÐµÐºÑÑÑÐ° ÑÐµÐ°Ð»Ð¸Ð·ÑÐµÐ¼Ð¾Ð¹ Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ¸, Ð² Ð¾ÑÐ½Ð¾Ð²Ðµ ÐºÐ¾ÑÐ¾ÑÐ¾Ð¹ Ð»ÐµÐ¶Ð°Ñ Ð²Ð°Ð¶Ð½ÐµÐ¹ÑÐ¸Ðµ React-Ð¿Ð°ÑÑÐµÑÐ½Ñ. ÐÐ¾ Ð·Ð°Ð²ÐµÑÑÐµÐ½Ð¸Ð¸ ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÐºÐ¸ Ð¿Ð¾Ð»ÑÑÐµÐ½Ð½Ð°Ñ Ð³ÑÐ°ÑÐ¸ÑÐµÑÐºÐ°Ñ Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ° ÑÐ»ÑÐ¶Ð¸Ñ ÑÐ¾ÑÐ¾ÑÐ¸Ð¼ Ð¿Ð¾Ð¼Ð¾ÑÐ½Ð¸Ðº Ð² Ð¾ÑÐ¾Ð±ÑÐ°Ð¶ÐµÐ½Ð¸Ð¸ Ð¼ÐµÑÑÐ¸Ðº Ð¸Ð· Grafana, ÑÐ°ÐºÐ¸Ñ ÐºÐ°Ðº ÐºÐ¾Ð»Ð¸ÑÐµÑÑÐ²Ð¾ Ð·Ð°Ð´Ð°Ñ Ð¸Ð· Jira, Ð½Ð°ÑÐ¾Ð´ÑÑÐ¸ÑÑÑ Ð² ÑÐ°Ð·Ð½ÑÑ ÑÐ¾ÑÑÐ¾ÑÐ½Ð¸ÑÑ Ð² ÑÐºÐ°Ð·Ð°Ð½Ð½ÑÐµ Ð¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°ÑÐµÐ»ÐµÐ¼ Ð¿ÐµÑÐ¸Ð¾Ð´Ñ Ð²ÑÐµÐ¼ÐµÐ½Ð¸. ÐÐ¾Ð´Ð´ÐµÑÐ¶ÐºÐ° ÑÐ°Ð·Ð½ÑÑ Ð¼Ð°ÑÑÑÐ°Ð±Ð¾Ð² Ð¿Ð¾Ð¼Ð¾Ð³Ð°ÐµÑ ÑÐºÑÐµÑÑÐ¸ÑÑ ÑÐ°Ð·Ð½Ð¾Ð¿Ð»Ð°Ð½Ð¾Ð²ÑÐµ Ð´Ð¸Ð°Ð³ÑÐ°Ð¼Ð¼Ñ Ð½Ð° Ð¾Ð´Ð½Ð¾Ð¼ ÑÐ¾Ð»ÑÑÐµ, ÑÐ°ÑÑÐ¼Ð°ÑÑÐ¸Ð²Ð°Ñ Ð¸Ñ ÐºÐ°Ðº ÐµÐ´Ð¸Ð½Ð¾Ðµ Ð¸Ð·Ð¾Ð±ÑÐ°Ð¶ÐµÐ½Ð¸Ðµ, ÑÑÐ¾ Ð¿Ð¾Ð¼Ð¾Ð³Ð°ÐµÑ ÑÐ¾ÐºÑÐ°ÑÐ¸ÑÑ ÑÑÑÐ´Ð¾ÐµÐ¼ÐºÐ¾ÑÑÑ ÑÐ°Ð±Ð¾ÑÑ Ð¸Ð½Ð¶ÐµÐ½ÐµÑÐ¾Ð² ÐºÐ¾Ð¼Ð¿Ð°Ð½Ð¸Ð¸.
description: This graduation thesis is dedicated to the integration of Grafana into the companys engineering portal through the development of a universal data visualization library. The reason for creating your own solution is the lack of tools that can work with multiâscale data displayed by different types of diagrams within the same canvas. As part of the work, an overview of existing React libraries is being conducted, on the basis of which the tool will be developed. During the comparison, a list of significant criteria is formed, on the basis of which the selection of the tool underlying the new library takes place. To implement the rendering tool, a high-level architecture of the engineering portal is described, explaining the principle of obtaining data from Grafana. Moreover, the component architecture of the implemented library is considered, which is based on the most important React patterns. Upon completion of development, the resulting graphics library serves as a good assistant in displaying metrics from Grafana, such as the number of tasks from Jira that are in different states during user-specified time periods. Support for different scales helps to combine diverse diagrams on one canvas, treating them as a single image, which helps to reduce the complexity of the work of the companys engineers.