Introduction to the

Recently wanted to do some statistics for packaging and development process and monitoring, there are two solutions, one is direct do a front page, the database storage of data, directly on the front page display, but this solution need front-end and back-end personnel to cooperate, in the case of resources nervous, can’t achieve rapid visual display; The other solution is to plug into grafana platform. the company has built this service, just write some SQL statements, and you can display the data in the database in the interface, and when the operation and maintenance requirements are met, the operation and maintenance estimate can be configured in about two hours. After comparing the two schemes, I decided to use grafana platter scheme. However, it was still a little difficult for a novice to match these things, and it took almost two days to match the platter, on the premise that the operation and maintenance students helped to match the data source. I have also checked a lot of information on the Internet. I may think this is too simple, and I have not found relevant Chinese documents. I hereby record this, so that the novice can get started quickly.

Access to the process

The configuration of the large market should go through the following process:

    1. Install grafana platter;
    1. Configure the data source;
    1. Create dashboards;
    1. Add display panel in the large plate;
    1. Configure the display panel to display the data;
    1. Adjust the display style of the market;
    1. Verify data accuracy;

For step 1, 2, there are many reference documentation, reference blog.csdn.net/easylife206… It’s very detailed and comprehensive.

The following describes the process of configuring a displayable panel.

Create a dashboard

After installing Grafana and configuring the platters, we are ready to create our dashboard. First log in to the platters and then find the platters we can operate on. For example: Click the “APS” button on the right and then click the “New Dashboard” button on the upper right. Then click the “Save” button on the upper right and enter a name in the popup window. By now, our first Dashboard has been built.

After the dashboard is created, sometimes we may feel that the name or other information set at the beginning is inconsistent with the specific content to be configured and want to modify it. At this time, click the Settings icon in the upper right corner of the dashboard to modify the content to be adjusted.

You can see some other Settings in the left sidebar:

  • Annotaions: Add some notes, the notes added here will be displayed in the large table, and the notes added here are global, and will be on every table in the dashboard;

  • Variables: Global variables that can be used to configure SQL statements or add new variables. They are displayed in the upper right corner of the big screen.

  • Versions: A record is generated each time you save here.

  • Permissions: Permission management, where you can restrict others from seeing or editing the market;

  • JSON Model: The display form and content of the large plate are all through the analysis of the JSON Model, the corresponding modification of the large plate, the JSON Model here will change accordingly;

About the market is a brief introduction of these, and then we will talk about the content of the show.

Add a display panel

The display panel is a chart in dashboard. With Dashboard, we can add a chart by clicking the + icon in the upper right corner

Then select Add Query to Add the data Query, which is a graph by default. If you want to use other graphs, you can select “Choose Visualization” and then Add the data Query. Here we select “Add Query” and use the default chart style.

In the Panel configuration page, select the data source (Query) first, and then fill in the following content as prompted. Click “Edit SQL” below to switch to the mode of directly filling in the Query statement

After correctly filling in the data query statement, click on the outside of the input box to see the effect above (the curve in the picture).

Adjust presentation styles

At the beginning, the effect of the chart may not be what we want, we can click the chart icon to choose a new display form

Data set, chart style selected, next to the panel to set a name to express its content, select the style icon, fill in a name

Here, a panel is set up, then we fill in the SQL to do a simple introduction (understanding of the limited, understand how much, how much it is introduced)

SELECT $__timeGroupAlias(create_time,'24h'), sum(case status when 3 then 1 else 0 end) as value, 'Success count' as metric FROM APs_jenkins_build_task_history GROUP BY 1 ORDER BY 1Copy the code

SQL statement __timeGroupAlias(create_time,’24h’), value, metric

  • __timeGroupAlias (create_time, ’24 h) : Create_time is the name of a column in the database table. This function will match this column with the time series in the upper right corner. Otherwise, setting the time in the upper right corner does not affect the icon content.

  • Value: This variable is the dots displayed on the icon. This variable must be of numeric type.

  • Metric: This metric is used for description. You can see the metric in the bottom corner of the metric.

To the panel even configuration is done, then you need to do is the most important step, is to click on the top right corner of the save icon, otherwise once the refresh the page, we will be reset to the default configuration, as long as don’t refresh the page, the content of the configuration has been around, we can configure several tables, and then to hold together.

Modify the Panel that has been configured

Select the panel you want to modify, click on its name – and select Edit in the popover

Adding global variables

An additional point here is to add global parameters to avoid modifying SQL statements when you want to view multiple dimensions of data

In the “Test” page, click the “Settings” icon in the upper right corner – “Select Variables-” click Add Variable

At this point we can look at the content in different dimensions without changing the SQL

Validation data presentation

The market is just as the data display carrier, after the configuration, we must do the data calibration again, to ensure that the display and their expectations.

conclusion

Through this market configuration, there are two very deep feelings

  • When doing the time assessment, it is necessary to level the cognition first, can be done in two hours, not can take two days or more
  • The process of study and research should be recorded so that later people can quickly start. When the configuration of the feeling is very difficult, after the configuration of the feeling of the configuration of the market is very simple, if not recorded, a new person in the absence of these records, may also experience such a grope to complete the configuration.

Author: Xue Jianqiang, Mobile Architecture Group, Free Big Front End R&D Center

Reference:

Blog.csdn.net/easylife206…

The h2r. Cn / 2020/07/13 /…

Blog.csdn.net/weixin_3034…

Author: Xue Jianqiang, Research and development Center of Freely Big front end

Recruitment information

Free big front end R&D center recruiting new students! FE/IOS/Android engineer company benefits include:

  • Five insurances and one housing fund in full, plus commercial insurance
  • Free gym + annual physical examination
  • 10 percent discount for rent near the company
  • Evening taxi reimbursement
  • 2 promotions per year

Welcome to join us if you have passion for technology! Please send your resume to [email protected], or add wechat V-nice-V for details!