Visual chart presentation method, system and electronic device

Abstract

The application provides a visual chart display method and system and an electronic device, which are applied to a business server; the business server is pre-configured with use permissions of each user on different Grafana objects; in response to a query request of a target Grafana object, if it is judged that the user has the permission, corresponding file information is acquired from a Grafana server through an Nginx server to display a visual chart. In this way, the use permissions of the user on the different Grafana objects are configured in the business server, after it is judged that the user has the use permission of the target Grafana object, only the corresponding file information needs to be acquired from the Grafana server, and the corresponding visual chart can be displayed, the user does not need to develop the chart independently, and the Grafana server does not need to be developed secondarily or the permissions of different businesses need to be set, so that the redundant complexity of permission control is reduced, and human resources and time cost are saved.

Description

Technical Field

[0001] This invention relates to the field of visualization technology, and in particular to a method, system, and electronic device for displaying visual charts. Background Technology

[0002] In related technologies, when data visualization is required, two main approaches are used: One approach involves developing entirely custom charts based on specific needs. However, this often involves developing different visualizations for the same business system, and using the same data source and type of chart data across various systems, leading to repetitive development and requiring permission adjustments for each system. The other approach is local deployment using existing open-source software. Grafana's chart display and management heavily rely on existing software support, potentially requiring secondary development or reassigning permissions and data based on usage scenarios. These approaches generally suffer from redundant and complex permission control, wasting significant human and time resources. Summary of the Invention

[0003] The purpose of this invention is to provide a method, system, and electronic device for displaying visual charts, so as to reduce the redundancy and complexity of access control and save human resources and time costs.

[0004] This invention provides a visualization chart display method applied to a business server. The business server communicates with a Grafana server via an Nginx server. The business server is pre-configured with each user's access permissions for different Grafana objects on the Grafana server. Query fields in the business server correspond to query variables in the Grafana server. The method includes: responding to a query request for a target Grafana object, determining whether the user initiating the query request has access permissions for the target Grafana object; if the user has access permissions for the target Grafana object, obtaining the file information corresponding to the target Grafana object from the Grafana server via the Nginx server; and displaying a visualization chart corresponding to the target Grafana object based on the file information.

[0005] This invention provides a visualization chart display system, comprising: a business server, an Nginx server, and a Grafana server; the business server communicates with the Grafana server via the Nginx server; the business server is pre-configured with each user's access permissions for different Grafana objects on the Grafana server; the query fields in the business server correspond to the query variables in the Grafana server; the business server responds to query requests for a target Grafana object by determining whether the user initiating the query request has access permissions for the target Grafana object; if the user has access permissions for the target Grafana object, the business server retrieves the file information corresponding to the target Grafana object from the Grafana server via the Nginx server; and based on the file information, displays the visualization chart corresponding to the target Grafana object.

[0006] The present invention provides an electronic device, including a processor and a memory, wherein the memory stores machine-executable instructions that can be executed by the processor, and the processor executes the machine-executable instructions to implement the visualization chart display method described above.

[0007] This invention provides a machine-readable storage medium storing machine-executable instructions. When these machine-executable instructions are invoked and executed by a processor, they cause the processor to implement any of the aforementioned visualization chart display methods.

[0008] This invention provides a visualization chart display method, system, and electronic device. These are applied to a business server. The business server communicates with a Grafana server via an Nginx server. The business server is pre-configured with each user's access permissions for different Grafana objects on the Grafana server. Query fields on the business server correspond to query variables on the Grafana server. The method includes: responding to a query request for a target Grafana object, determining whether the user initiating the query request has access permissions for the target Grafana object; if the user has access permissions for the target Grafana object, obtaining the file information corresponding to the target Grafana object from the Grafana server via the Nginx server; and displaying a visualization chart corresponding to the target Grafana object based on the file information. This method configures user access permissions for different Grafana objects on the business server. After determining that a user has access permissions for the target Grafana object, it only needs to obtain the corresponding file information from the Grafana server to display the corresponding visualization chart. Users do not need to develop their own charts, nor do they need to perform secondary development on the Grafana server or set permissions for different businesses, thereby reducing the redundancy and complexity of permission control and saving human resources and time costs. Attached Figure Description

[0009] To more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0010] Figure 1 A flowchart illustrating a method for displaying visual charts provided in an embodiment of the present invention;

[0011] Figure 2 A schematic diagram of the Variable configuration interface of a Grafana chart panel provided in an embodiment of the present invention;

[0012] Figure 3 This is a schematic diagram illustrating the associated SQL execution statement of a specific chart under a chart panel, provided as an embodiment of the present invention.

[0013] Figure 4 A schematic diagram of a configuration page provided in an embodiment of the present invention;

[0014] Figure 5 A schematic diagram of a visualization chart provided in an embodiment of the present invention;

[0015] Figure 6 A flowchart illustrating a visual chart provided as an embodiment of the present invention;

[0016] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0017] The technical solution of the present invention will be clearly and completely described below with reference to the embodiments. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0018] Currently, with the rapid development of internet technology, massive amounts of data are being collected from various industries. Data mining, data collection, data filtering, and finally data aggregation and analysis have become an integral part of the entire industry chain. Similarly, a wide variety of visualization programs are emerging, such as DataV, Davinci, Redash, DataWrapper, Metabase, Grafana, and so on. Different business teams will choose different visualization tools to use or further develop based on their specific needs.

[0019] Grafana supports a wide variety of data sources, such as TiDB (an open-source database product), MySQL (a relational database management system), and Elasticsearch (a database). It also offers diverse display component types, such as tables, pie charts, and line charts. Its operation configuration is flexible and easily extensible, and it supports SQL (Structured Query Language) operations. Furthermore, it boasts mature system configurations and a relatively active community, making it a frequent choice for some departments or teams.

[0020] However, how to integrate Grafana with actual business operations while minimizing human and material costs and achieving basically satisfactory results has become a major concern. Currently, there are generally two solutions for data visualization:

[0021] Option 1 involves developing charts entirely in-house based on specific needs. This process goes from scratch and encompasses the entire software design workflow, from requirements analysis to interaction design, followed by development by front-end and back-end programmers, testing and regression analysis, and finally, deployment.

[0022] However, developing charts entirely in-house can lead to a significant waste of human resources and time, especially in scenarios where the overall UI (User Interface) interaction requirements are not high and the primary purpose is data display. In actual development scenarios, the same business system may continuously have different visualization charts that need to be developed. Often, the same data source and the same type of chart data may need to be used in various business systems. This means that each development process requires allocating human resources to each business system, resulting in substantial resource waste. Beyond the development of the business itself, secondary adjustments may be needed based on the actual permission management of each business system, which also consumes considerable time.

[0023] Option two involves local deployment using existing open-source software, such as Grafana. The display and management of Grafana charts heavily rely on the software's existing support. This may require secondary development on the open-source software, or reallocating permissions or data based on the use case, and sharing relevant chart page links with relevant users for querying. Grafana provides a relatively comprehensive permission system, distinguishing between Viewer (reading permissions), Editor (editing permissions), and Admin (administrator permissions). It also allows for assigning relevant Term (team) members, and then further assigning them to relevant Organizations, using different basic dashboards to differentiate permissions.

[0024] However, the most difficult aspect of deploying Grafana locally is managing and allocating permissions, mainly due to the following issues:

[0025] 1. The granularity of permissions is too large, making it difficult to control specific data permissions. It can only be controlled by creating numerous chart panels and assigning permissions one by one, which is very difficult to manage. For example, the normal steps to differentiate data permissions for one type of user are as follows: create a new folder -> import the dashboard -> set a star for the dashboard -> create a user -> create a team -> select the user -> set permissions -> select the corresponding folder. However, for another type of user or role with different data permissions, it is necessary to copy the configuration again in the import dashboard step, modify the variables and redistribute them, and so on, which is very difficult to use in complex scenarios.

[0026] 2. Unable to design and assign permissions for complex user / role systems.

[0027] 3. It cannot be integrated with existing or other independent business system access control systems.

[0028] 4. In practical use, managing a permission system on Grafana is quite difficult, and directly providing Grafana addresses for relevant users to access is not very practical (for example, expecting charts and business systems to be highly cohesive rather than separate), which presents various management problems.

[0029] In summary, failing to use open-source visualization programs like Grafana for data presentation requires significantly more manpower and resources, and data visualization charts across various business systems cannot be effectively reused. However, directly using Grafana charts presents challenges such as mismatches with product requirements and difficulties in allocating user data permissions. Therefore, this invention provides a visualization chart display method, system, and electronic device. This technology can be applied to applications that require displaying visualization charts of Grafana objects.

[0030] To facilitate understanding of this embodiment, a visualization chart display method disclosed in this invention will first be introduced. This method is applied to a business server; the business server communicates with a Grafana server via an Nginx server. The business system to which the business server belongs generally refers to an existing or future application system with access control features, including but not limited to web management systems and mobile H5 applications. The Nginx server is an open-source web service and proxy service software that supports high performance and high concurrency. The Grafana server is a cross-platform, open-source measurement analysis and visualization tool that can visually query and display collected data. By working with time-series databases, it can be used in internet infrastructure or other application analysis fields.

[0031] The business server is pre-configured with each user's access permissions to different Grafana objects within the Grafana server. The query fields in the business server correspond to the query variables in the Grafana server. These Grafana objects can be understood as different objects pre-configured in the Grafana server, and their related charts can be displayed in the Grafana chart panel. For example, different gameids can represent different games, and different games can correspond to the aforementioned different Grafana objects. The game-related data for each game can be displayed in the Grafana chart panel. Based on actual business needs, different users can be configured in the business server to access different Grafana objects. For example, user A may only have access permissions to game-related data for game01 and game02, while user B may only have access permissions to game-related data for game01 and game03.

[0032] In the business server, the query fields set are typically determined based on the query variables in the Grafana server. For example, when configuring a dashboard (a panel page displaying one or more charts) in the Grafana server, the unique identifier assigned to that dashboard by the Grafana server, as well as the query variables that need to be controlled for that chart panel, can be determined. For instance, if the variable's name is configured as "gameid" and the label is "game," then the corresponding business server usually needs to set query fields with unique identifier values, specific variable names, and other fields according to specific business requirements, such as chart type, description, assigned role / user, status, etc. Figure 1 As shown, the method includes the following steps:

[0033] Step S102: In response to a query request for the target Grafana object, determine whether the user who initiated the query request has permission to use the target Grafana object.

[0034] The target Grafana object mentioned above can be understood as the specific Grafana object that the user wants to view. For example, if a user wants to view the visualization chart of the game corresponding to game01, then the game corresponding to game01 is the target Grafana object mentioned above. Other fields included in the query fields of the business server, such as "resource_key", "product", "module", "chart category", and "verification method", can usually be pre-configured by the business side administrators. Users only need to select the identifier of the specific object they want to view in the query field corresponding to the query variable, such as game01, and fill in the start and end times of the data corresponding to the visualization chart in the other query fields. After all the query parameters in the query fields of the business server are filled, the user can click search. After receiving the query request, the business server needs to first determine whether the user has permission to use the target Grafana object.

[0035] Step S104: If the user has permission to use the target Grafana object, obtain the file information corresponding to the target Grafana object from the Grafana server through the Nginx server.

[0036] The aforementioned file information typically refers to the HTML document corresponding to the target Grafana object returned by the Grafana server. HTML is a hypertext markup language for web pages, consisting of a series of tags that form the overall structural skeleton of a web page, unifying the format of documents across the web. If it is determined that the user has permission to use the target Grafana object—for example, if the target Grafana object is included in a pre-defined list of Grafana objects that the user has permission to use—then the Nginx server can retrieve the HTML document corresponding to the target Grafana object from the Grafana server. This HTML document usually also includes scripts, images, style files, and other resources that need to be referenced.

[0037] Step S106: Based on the file information, display the visualization chart corresponding to the target Grafana object.

[0038] The number of the above visualization charts can be one or more. After the business server obtains the file information, it can display the visualization chart corresponding to the target Grafana object that the user wants to query based on the obtained file information. For example, if the target Grafana object is the game corresponding to game01, it can display the visualization chart corresponding to the relevant game data of the game corresponding to game01 to the user.

[0039] The aforementioned visualization chart display method is applied to a business server. The business server communicates with the Grafana server via an Nginx server. The business server is pre-configured with each user's access permissions for different Grafana objects on the Grafana server. The query fields on the business server correspond to the query variables on the Grafana server. The method includes: responding to a query request for a target Grafana object, determining whether the user initiating the query request has access permissions for the target Grafana object; if the user has access permissions for the target Grafana object, retrieving the file information corresponding to the target Grafana object from the Grafana server via the Nginx server; and displaying the visualization chart corresponding to the target Grafana object based on the file information. This method configures user access permissions for different Grafana objects on the business server. After determining that a user has access permissions for the target Grafana object, it only needs to retrieve the corresponding file information from the Grafana server to display the corresponding visualization chart. Users do not need to develop their own charts, nor do they need to perform secondary development on the Grafana server or set permissions for different business operations. This reduces the redundancy and complexity of access control and saves human resources and time costs.

[0040] In an optional implementation, the method is based on the method of the above embodiments. In this method, the business server includes a business front-end and a business back-end. The business front-end is usually a page that users can see directly and that everyone can access, which can be understood as a browser. The business back-end is usually a page that can only be seen by authorized operators or special users who have permission to log in.

[0041] In practice, Grafana server administrators configure dashboards through the Grafana server, determining the unique identifier assigned to each dashboard and the query variables that need to be controlled. These query variables are typically determined manually based on specific needs or SQL execution statements. For example, if a chart's data source is an SQL statement like `select xx from table where gameid = $gameid`, then `$gameid` is the variable. The chart can query data for different games based on changes in `$gameid`. Since the data source for each chart is determined by the specific business scenario, the variables are usually different for each chart. When determining the query variables to be controlled based on the SQL statement, keywords can be extracted from the obtained SQL execution statement. These keywords can be used to determine the query variables. For example, an SQL statement might contain a template string with special characters, such as `$gameid`. This is usually a predefined variable format, making it easy to replace with actual values ​​later.

[0042] like Figure 2 The diagram shows a Grafana chart panel's Variable configuration interface, which includes name (e.g., gameid); Type (e.g., Query); and Label (e.g., game). Figure 3 The diagram shows an example of an SQL execution statement associated with a specific chart in a chart panel, including the variable $gameid.

[0043] The administrators of the business server can design the relevant table structure. The configuration table is particularly important. The fields of the configuration table are mainly designed based on the resource dimensions of the specific Grafana chart panel, such as the unique identifier mentioned above and the query condition configuration. Other fields can be designed according to specific business needs, such as chart type, description, assigned role / user, status, etc.

[0044] Typically, a design page needs to be configured so that administrators of the business server can configure the fields described in the configuration table above, such as chart type, chart's unique identifier in Grafana, and available parameter variables. This can be stored in a database table for easy concatenation and replacement during subsequent forwarding. Query conditions can be set according to the specific needs of the business system. Individual query conditions with dimensions having English names correspond to the query variables in the chart panels mentioned above, mainly because English is more suitable for Grafana variables, but the business system needs Chinese labels and explanations. For example, if a Grafana chart panel has a variable `gameid`, then when configuring the chart parameters in the business system, there needs to be a line for configuring `gameid`, specifying whether it is required, its Chinese explanation, and whether it uses a dropdown or input box as the input method. Other fields are determined based on specific business requirements, such as whether they are required, label names, form control types, and data sources.

[0045] like Figure 4 The diagram illustrates a configuration page, which includes: the `resource_key` field, the product it belongs to, the module it belongs to, the chart category, the verification method, whether it's a global chart, and specific query condition settings. The actual configuration process typically requires manual configuration, and the role / user field mentioned above is equally important. This configuration ensures that the visibility of a Grafana chart panel depends on the specific business system, rather than Grafana's own permission management system. In other words, the visibility permissions of Grafana charts on the business system are configured according to the business server's permission management, while the visibility of charts for ordinary users or roles is determined by the administrator's configuration.

[0046] Because the query conditions for charts on the business server are entirely determined by the business logic itself, specific data permissions can be controlled accordingly. For example, assuming the main data of a Grafana chart is games, when using a dropdown component to call an API to retrieve the data source, the business server can control data permissions. Here, the data source refers to the business server's data source. If the Grafana chart is to display revenue data for a certain game, the variable is naturally the game-related gameid. However, the Grafana server itself cannot control which games a user selects; that is, there is no permission management. In this case, the business server acts as an intermediate layer to handle permissions. The business server can control each user's game permissions, including which games each user has access to. The range of games available within these permissions is the aforementioned data source.

[0047] The method includes the following steps:

[0048] Step 1: Receive a query request for the target Grafana object through the business frontend, concatenate the query parameters carried in the query request into a URL, pass the URL to the src attribute of the iframe tag, and send the resource address corresponding to the src attribute to the business backend; the query parameters include the object identifier of the target Grafana object.

[0049] The URL (Uniform Resource Locator) mentioned above is a concise representation of the location and access method of a resource obtainable from the Internet; it is the address of a standard resource on the Internet. The iframe tag acts as a document within a document; the iframe element creates an inline frame (i.e., an inline frame) that contains another document. The src attribute specifies the URL of the document displayed within the iframe tag. The object identifier can be used to indicate the target Grafana object, such as game01; different Grafana objects typically have different object identifiers. In actual implementation, users can fill in relevant query parameters through the browser page on the business front end, for example, according to... Figure 4 In the query condition settings field, select the specific gameid. Since the user's permissions are pre-configured in the business server, when the user clicks the gameid field, it will display the gameids corresponding to one or more Grafana objects that the user has access to, such as game01, game03, etc. The user can then select the specific gameid they want to view, such as game01. After all other fields are filled in, click search. The business frontend can then concatenate the query parameters filled in on this page to form a URL. For example, it can concatenate the unique identifier of the chart panel, the specific object identifier, the start time and end time of the data to form a URL. The formed URL is then passed to the src attribute of the iframe tag. The business frontend will request the resource address corresponding to the src attribute of the iframe tag according to its own characteristics and send the resource address to the business backend.

[0050] Step two: In response to the business backend receiving the resource address, the business backend determines whether the user initiating the query request has permission to use the target Grafana object.

[0051] Step two may specifically include:

[0052] Step 20: In response to the business backend receiving the resource address, obtain the first Grafana object with the user's pre-configured usage permissions through the business backend, and determine whether the target Grafana object belongs to the first Grafana object.

[0053] The aforementioned first Grafana object can include a single Grafana object or a collection of multiple different Grafana objects, depending on user permissions. This first Grafana object can be represented by the object identifiers of each Grafana object, such as game01, game03, etc. Thus, the first Grafana object can be the object identifier of a single Grafana object or a collection of object identifiers of multiple Grafana objects. When the business backend receives the resource address, it can obtain the pre-configured first Grafana object that the user has the right to use. If the first Grafana object is represented by an object identifier, the object identifier of the target Grafana object can be compared with the object identifier of the first Grafana object one by one to determine whether the object identifier of the target Grafana object is included in the object identifier of the first Grafana object.

[0054] Step 21: If the target Grafana object belongs to the first Grafana object, determine that the user has permission to use the target Grafana object.

[0055] Step 22: If the target Grafana object does not belong to the first Grafana object, determine that the user does not have permission to use the target Grafana object.

[0056] If the target Grafana object belongs to the first Grafana object—for example, if the target Grafana object's object identifier is included in the first Grafana object's object identifier—it means that the user has pre-configured access permissions for the target Grafana object. In this case, it can be confirmed that the user has access permissions for the target Grafana object, and subsequent steps can be performed. If the target Grafana object's object identifier is not included in the first Grafana object's object identifier, it means that the user has not pre-configured access permissions for the target Grafana object. In this case, it can be confirmed that the user does not have access permissions for the target Grafana object, and subsequent steps should not be performed, ending the process.

[0057] Step 3: If the user has permission to use the target Grafana object, the business backend obtains the first path corresponding to the query request based on the resource address, and sends the first path to the Nginx server. The Nginx server adds an authentication request header containing the user token identifier to the first path to obtain the second path, and sends the second path to the Grafana server, so that the Grafana server returns the file information corresponding to the target Grafana object based on the second path.

[0058] After confirming the user's access permissions to the target Grafana object through the business backend, to prevent the user from transmitting unnecessary or dangerous information through other means, the query parameters are typically compared with the previously configured query parameters on the business server to ensure they all meet the configuration requirements. This involves re-verifying the query parameters, such as confirming the user's permission to query a specific data item. Once verified, the resource address is adapted to a first path that conforms to the Grafana server's path format requirements (i.e., the Grafana chart dashboard path format) and redirected to the Nginx server for forwarding. Considering potential security issues with network requests, the Nginx server, upon receiving the first path, can add an authentication request header containing the user's token identifier to obtain a second path. For example, a user-related token can be added, which can be generated when the user logs in for the first time through the business frontend. This second path is then sent to the Grafana server. The Grafana server can verify the access legitimacy of the request based on the authentication request header. After verification, the server can retrieve the corresponding file information based on the second path and return this file information to the business frontend through the business backend.

[0059] Step 4: Load file information through the business front end; the file information includes resource information corresponding to the associated resources; the associated resources include: the number, color, and style of the charts corresponding to the target Grafana object; the resource information includes: the interface information and / or link address information corresponding to the associated resources.

[0060] After receiving the file information, the business frontend begins to load the file information. This file information usually includes the number, color, and style of the charts corresponding to the target Grafana object, as well as the interface information and / or link address information of the associated resources.

[0061] Step 5: Send a resource request to the Grafana server via the Nginx server to retrieve the associated resources.

[0062] Based on the resource information of the aforementioned associated resources, the business frontend generates a resource request to obtain the associated resource and forwards it to the Grafana server through the Nginx server. The Grafana server obtains the corresponding associated resource based on the interface information and / or link address information carried in the request and returns the obtained associated resource to the business frontend. Based on these associated resources, the number, color, and style of the charts corresponding to the target Grafana object to be displayed can be determined.

[0063] Step 6: Receive the associated resources corresponding to the resource request returned by the Grafana server through the business front-end, and display the visualization chart corresponding to the target Grafana object based on the file information and associated resources.

[0064] The target Grafana object corresponds to multiple charts to be displayed; this step six can be specifically achieved through steps 60 to 62:

[0065] Step 60: Receive the associated resources corresponding to the resource request returned by the Grafana server through the business front-end, and call the preset interface of the chart panel corresponding to the query request through the business front-end to obtain multiple SQL templates corresponding to the target Grafana object; wherein, each SQL template corresponds to a chart to be displayed.

[0066] After the business frontend receives the associated resources corresponding to the resource request returned by the Grafana server, it can call the preset interface of the chart panel corresponding to the query request. For example, it can call an interface similar to / api / dashboards / uid / {resource_key}, where resource_key is the unique identifier generated when configuring the chart panel on the Grafana server, to request multiple SQL templates corresponding to the chart panel, that is, the raw SQL of the chart panel (i.e., the SQL statement of the original data source). In the Grafana server, multiple charts of the target Grafana object will be displayed in the chart display panel, with each SQL template corresponding to one chart to be displayed.

[0067] Step 61: Combine the query parameters in the query request with each SQL template to obtain a list of SQL statements.

[0068] The query parameters carried in the query request are combined with all the SQL templates obtained above to generate a list of valid SQL queries. Specifically, the query parameters can be replaced in each SQL template, and the corresponding position of each query parameter can be used. For example, if the SQL template includes "gameid" and the actual query parameter "gameid" is "game01", then "gameid" in the SQL template can be replaced with "game01".

[0069] Step 62: Using the business front-end, retrieve the target data corresponding to each chart to be displayed according to the list of SQL statements, so as to render the visualization chart corresponding to the target Grafana object.

[0070] This step 62 can be achieved through the following steps A to D:

[0071] Step A: For each chart to be displayed, send a data resource retrieval request for that chart to the business backend.

[0072] The business frontend sends a data resource retrieval request for each chart to be displayed. To avoid security issues such as SQL injection, or malicious users directly accessing data beyond their permissions by calling the interface and modifying variable values, additional processing is usually required. The Nginx server intercepts the data resource retrieval request and forwards it to the business backend. The business backend obtains relevant request parameters through the HTTP request header referer and verifies basic data permissions / parameter format information.

[0073] Step B involves obtaining the target SQL template corresponding to the chart to be displayed through the business backend, and combining the query parameters with the target SQL template to obtain the target SQL statement.

[0074] The business backend obtains the target SQL module corresponding to each chart to be displayed, replaces the template parameters with the actual query parameters, and obtains the target SQL statement corresponding to each chart to be displayed.

[0075] Step C: If the business backend determines that the target SQL statement is included in the SQL statement list, a data resource retrieval request is sent to the Grafana server, so that the Grafana server can return the target data corresponding to the data resource retrieval request to the business frontend.

[0076] For each target SQL statement corresponding to a chart to be displayed, the business backend compares this target SQL statement with the SQL statement list to determine if it is included. If it is, the business backend sends a data resource retrieval request to the Grafana server. The Grafana server retrieves the target data based on the request and returns it to the business frontend via the business backend. If the target SQL statement is not included in the list, a corresponding message is generated to inform the user that there is an error and the target data could not be retrieved.

[0077] Step D involves rendering a visual chart corresponding to the target Grafana object based on each target data corresponding to each chart to be displayed through the business front end.

[0078] like Figure 5 The diagram shows a visualization chart. The business front end can render and present the visualization chart corresponding to the target Grafana object after the business server has performed permission control based on the target data corresponding to each chart to be displayed.

[0079] The aforementioned visualization method provides a solution for connecting existing business servers to Grafana servers. This addresses the issues of complex and redundant access control, and the inability to effectively reuse charts, that often arise when using Grafana for visualization. By segmenting the access control of Grafana objects and delegating it to the relevant business servers for more granular control, this approach saves on manpower and resources. The connected business servers only need to develop a single configuration module, which can then be dynamically configured to display charts corresponding to the Grafana server as needed. This granular access control of Grafana objects effectively aligns with the existing access control modules of the business servers, better meeting actual requirements and facilitating management.

[0080] This invention provides a visualization chart display system, including: a business server, an Nginx server, and a Grafana server; the business server communicates with the Grafana server through the Nginx server; the business server is pre-configured with each user's usage permissions for different Grafana objects in the Grafana server; the query fields in the business server correspond to the query variables in the Grafana server;

[0081] The business server responds to query requests for the target Grafana object by determining whether the user initiating the query request has permission to use the target Grafana object. If the user has permission to use the target Grafana object, the server retrieves the file information corresponding to the target Grafana object from the Grafana server via the Nginx server. Based on the file information, the server displays the visualization chart corresponding to the target Grafana object.

[0082] The aforementioned visualization chart display system has user access permissions for different Grafana objects configured in the business server. After determining that a user has access permissions for the target Grafana object, it only needs to obtain the corresponding file information from the Grafana server to display the corresponding visualization chart. Users do not need to develop charts themselves, nor do they need to perform secondary development on the Grafana server or set permissions for different businesses. This reduces the redundancy and complexity of permission control and saves human resources and time costs.

[0083] In an optional implementation, the business server includes a business frontend and a business backend. The business frontend receives query requests for a target Grafana object, concatenates the query parameters carried in the query request into a URL, passes the URL to the src attribute of an iframe tag, and sends the resource address corresponding to the src attribute to the business backend. The business backend receives the resource address, determines whether the user initiating the query request has permission to use the target Grafana object, and if the user has permission, obtains the first path corresponding to the query request based on the resource address and sends the first path to the Nginx server. The Nginx server adds an authentication request header containing a user token identifier to the first path to obtain a second path and sends the second path to the Grafana server. The Grafana server returns the file information corresponding to the target Grafana object based on the second path. The business frontend displays a visualization chart corresponding to the target Grafana object based on the file information.

[0084] In an optional implementation, the Grafana server is also used to: verify the user token identifier in the authentication request header, verify whether the Grafana server allows the user to query file information corresponding to the second path; if the user is allowed to query file information corresponding to the second path, return the file information corresponding to the second path to the business frontend through the business backend.

[0085] The Grafana server can verify the legitimacy of the access request based on the user token identifier in the authentication request header. That is, it verifies whether the user is allowed to query the file information corresponding to the second path. If it is confirmed to be legitimate, the corresponding file information can be retrieved according to the second path and returned to the business front end through the business backend. If it is confirmed to be illegitimate, the file information corresponding to the second path will not be returned. At this time, a corresponding prompt message can be generated to inform the user that access to the file information is not allowed.

[0086] For ease of understanding, see Figure 6The diagram illustrates a process flow for a visual chart display. Regular users or roles access the chart viewing page on the business server and search based on dynamically configured query conditions set by administrators. Specifically, access control and interception are implemented during the query search phase based on the relevant entity data permissions on the business server. When a user clicks the `gameid` field, it displays the `gameid`s corresponding to one or more Grafana objects that the user has access to, such as `game01`, `game03`, etc. The user can then select the specific `gameid` they want to view, for example, directly selecting `game01`. The business frontend concatenates relevant query parameters based on the user's selected query conditions and requests a parameter-concatenated document. An iframe element is embedded within the webpage, with its `src` attribute pointing to a same-domain interface. This interface is concatenated with the query parameters, and the resulting resource address (corresponding to the first path mentioned above) is sent to the business backend. The business backend verifies the user's permissions / parameters. Upon successful verification, the resource address is adapted to the Grafana dashboard path (corresponding to the first path mentioned above), and recognition is added via Nginx. After verifying the request header, it is forwarded to the Grafana server. The Grafana server returns the dashboard document HTML (corresponding to the file information mentioned above). The iframe of the business frontend loads the document and requests relevant web page resources (corresponding to the associated resources mentioned above). This request is forwarded to the Grafana server via Nginx. The Grafana server returns the relevant resources. The dashboard webpage inside the iframe of the business frontend is initialized, and all chart configurations in the panel are requested (corresponding to the multiple SQL templates mentioned above). Each chart requests data resources (corresponding to sending a data resource retrieval request for each chart to be displayed to the business backend). Nginx intercepts the data request and sends it to the business backend. The business backend obtains the request parameters and verifies them (obtaining the target SQL template corresponding to the chart to be displayed, combining the query parameters with the target SQL template to obtain the target SQL statement). If the verification is successful, the Grafana server returns the target data corresponding to the data resource retrieval request to the business frontend. The business frontend renders a visualization chart based on the data, which can be displayed in an embedded tag.

[0087] This disclosure also provides an electronic device, see [link to relevant documentation] Figure 7 As shown, the electronic device includes a processor 160 and a memory 161. The memory 161 stores machine-executable instructions that can be executed by the processor 160. The processor 160 executes the machine-executable instructions to implement the above-described visualization chart display method.

[0088] Furthermore, Figure 7 The electronic device shown also includes a bus 162 and a communication interface 163, with the processor 160, the communication interface 163 and the memory 161 connected via the bus 162.

[0089] The memory 161 may include high-speed random access memory (RAM) or non-volatile memory, such as at least one disk storage device. Communication between this system network element and at least one other network element is achieved through at least one communication interface 163 (which can be wired or wireless), such as the Internet, wide area network, local area network, or metropolitan area network. The bus 162 may be an ISA bus, PCI bus, or EISA bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 7 The symbol is represented by a single double-headed arrow, but this does not mean that there is only one bus or one type of bus.

[0090] Processor 160 may be an integrated circuit chip with signal processing capabilities. In implementation, each step of the above method can be completed by the integrated logic circuitry in the hardware of processor 160 or by instructions in software form. Processor 160 can be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it can also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this disclosure. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of this disclosure can be directly manifested as execution by a hardware decoding processor, or execution by a combination of hardware and software modules in the decoding processor. The software module can reside in a mature storage medium in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or registers. This storage medium is located in memory 161. Processor 160 reads information from memory 161 and, in conjunction with its hardware, completes the steps of the method described in the preceding embodiment. The method is applied to a business server. The business server communicates with the Grafana server through an Nginx server. The business server is pre-configured with each user's usage permissions for different Grafana objects in the Grafana server. The query fields in the business server correspond to the query variables in the Grafana server. The following steps are specifically executed:

[0091] In response to a query request for a target Grafana object, determine whether the user initiating the query request has permission to use the target Grafana object; if the user has permission to use the target Grafana object, retrieve the file information corresponding to the target Grafana object from the Grafana server through the Nginx server; based on the file information, display the visualization chart corresponding to the target Grafana object.

[0092] The specific implementation methods and working processes can be referred to the corresponding processes in the above method embodiments, and will not be repeated here.

[0093] In an optional implementation, the business server includes a business front-end and a business back-end. When the processor executes a query request in response to a target Grafana object and determines whether the user initiating the query request has permission to use the target Grafana object, it specifically performs the following steps: receiving the query request for the target Grafana object through the business front-end, concatenating the query parameters carried in the query request into a URL, passing the URL to the src attribute of the iframe tag, and sending the resource address corresponding to the src attribute to the business back-end; wherein the query parameters include the object identifier of the target Grafana object; and in response to the business back-end receiving the resource address, determining whether the user initiating the query request has permission to use the target Grafana object.

[0094] In an optional implementation, when the processor performs the operation of determining whether the user initiating the query request has permission to use the target Grafana object through the business backend, it specifically performs the following steps: obtaining a pre-configured first Grafana object for which the user has permission through the business backend; determining whether the target Grafana object belongs to the first Grafana object; if the target Grafana object belongs to the first Grafana object, determining that the user has permission to use the target Grafana object; if the target Grafana object does not belong to the first Grafana object, determining that the user does not have permission to use the target Grafana object.

[0095] In an optional implementation, when the processor executes the step of retrieving file information corresponding to the target Grafana object from the Grafana server via the Nginx server, it specifically performs the following steps: obtaining the first path corresponding to the query request based on the resource address through the business backend, and sending the first path to the Nginx server; wherein, the Nginx server adds an authentication request header containing a user token identifier to the first path to obtain a second path, and sends the second path to the Grafana server, so that the Grafana server returns the file information corresponding to the target Grafana object based on the second path.

[0096] In an optional implementation, the business server includes a business front-end and a business back-end. When the processor executes the process of displaying a visualization chart corresponding to the target Grafana object based on file information, it specifically performs the following steps: loading file information through the business front-end; wherein the file information includes resource information corresponding to associated resources; the associated resources include the number, color, and style of the charts corresponding to the target Grafana object; the resource information includes the interface information and / or link address information corresponding to the associated resources; sending a resource request to the Grafana server to obtain the associated resources through the Nginx server; receiving the associated resources corresponding to the resource request returned by the Grafana server through the business front-end, and displaying a visualization chart corresponding to the target Grafana object based on the file information and the associated resources.

[0097] In an optional implementation, when the processor executes the process of displaying a visualization chart corresponding to the target Grafana object based on file information and associated resources, it specifically performs the following steps: It calls a preset interface of the chart panel corresponding to the query request through the business front-end to obtain multiple SQL templates corresponding to the target Grafana object; wherein each SQL template corresponds to a chart to be displayed; it combines the query parameters in the query request with each SQL template to obtain a list of SQL statements; and it obtains each target data corresponding to each chart to be displayed through the business front-end according to the list of SQL statements, so as to render the visualization chart corresponding to the target Grafana object.

[0098] In an optional implementation, when the processor executes the process of retrieving each target data corresponding to each chart to be displayed according to the SQL statement list through the business frontend to render the visualization chart corresponding to the target Grafana object, it specifically performs the following steps: for each chart to be displayed, it sends a data resource retrieval request for that chart to be displayed to the business backend; it retrieves the target SQL template corresponding to the chart to be displayed through the business backend, combines the query parameters with the target SQL template to obtain the target SQL statement; if the business backend determines that the target SQL statement is included in the SQL statement list, it sends the data resource retrieval request to the Grafana server, so that the Grafana server returns the target data corresponding to the data resource retrieval request to the business frontend; and the business frontend renders the visualization chart corresponding to the target Grafana object based on each target data corresponding to each chart to be displayed.

[0099] The above method, in response to a query request for a target Grafana object, determines whether the user initiating the query has permission to use the target Grafana object. If the user has permission, the Nginx server retrieves the file information corresponding to the target Grafana object from the Grafana server. Based on the file information, a visualization chart corresponding to the target Grafana object is displayed. This method configures user access permissions for different Grafana objects in the business server. After determining that the user has permission to use the target Grafana object, it only needs to retrieve the corresponding file information from the Grafana server to display the corresponding visualization chart. Users do not need to develop their own charts, nor do they need to perform secondary development on the Grafana server or set permissions for different business functions. This reduces the redundancy and complexity of permission control, saving human resources and time costs.

[0100] This disclosure also provides a machine-readable storage medium storing machine-executable instructions that, when invoked and executed by a processor, cause the processor to perform the following steps:

[0101] In response to a query request for a target Grafana object, determine whether the user initiating the query request has permission to use the target Grafana object; if the user has permission to use the target Grafana object, retrieve the file information corresponding to the target Grafana object from the Grafana server through the Nginx server; based on the file information, display the visualization chart corresponding to the target Grafana object.

[0102] The specific implementation methods and working processes can be referred to the corresponding processes in the above method embodiments, and will not be repeated here.

[0103] In an optional implementation, the business server includes a business front-end and a business back-end. When the processor executes a query request in response to a target Grafana object and determines whether the user initiating the query request has permission to use the target Grafana object, it specifically performs the following steps: receiving the query request for the target Grafana object through the business front-end, concatenating the query parameters carried in the query request into a URL, passing the URL to the src attribute of the iframe tag, and sending the resource address corresponding to the src attribute to the business back-end; wherein the query parameters include the object identifier of the target Grafana object; and in response to the business back-end receiving the resource address, determining whether the user initiating the query request has permission to use the target Grafana object.

[0104] In an optional implementation, when the processor performs the operation of determining whether the user initiating the query request has permission to use the target Grafana object through the business backend, it specifically performs the following steps: obtaining a pre-configured first Grafana object for which the user has permission through the business backend; determining whether the target Grafana object belongs to the first Grafana object; if the target Grafana object belongs to the first Grafana object, determining that the user has permission to use the target Grafana object; if the target Grafana object does not belong to the first Grafana object, determining that the user does not have permission to use the target Grafana object.

[0105] In an optional implementation, when the processor executes the step of retrieving file information corresponding to the target Grafana object from the Grafana server via the Nginx server, it specifically performs the following steps: obtaining the first path corresponding to the query request based on the resource address through the business backend, and sending the first path to the Nginx server; wherein, the Nginx server adds an authentication request header containing a user token identifier to the first path to obtain a second path, and sends the second path to the Grafana server, so that the Grafana server returns the file information corresponding to the target Grafana object based on the second path.

[0106] In an optional implementation, the business server includes a business front-end and a business back-end. When the processor executes the process of displaying a visualization chart corresponding to the target Grafana object based on file information, it specifically performs the following steps: loading file information through the business front-end; wherein the file information includes resource information corresponding to associated resources; the associated resources include the number, color, and style of the charts corresponding to the target Grafana object; the resource information includes the interface information and / or link address information corresponding to the associated resources; sending a resource request to the Grafana server to obtain the associated resources through the Nginx server; receiving the associated resources corresponding to the resource request returned by the Grafana server through the business front-end, and displaying a visualization chart corresponding to the target Grafana object based on the file information and the associated resources.

[0107] In an optional implementation, when the processor executes the process of displaying a visualization chart corresponding to the target Grafana object based on file information and associated resources, it specifically performs the following steps: It calls a preset interface of the chart panel corresponding to the query request through the business front-end to obtain multiple SQL templates corresponding to the target Grafana object; wherein each SQL template corresponds to a chart to be displayed; it combines the query parameters in the query request with each SQL template to obtain a list of SQL statements; and it obtains each target data corresponding to each chart to be displayed through the business front-end according to the list of SQL statements, so as to render the visualization chart corresponding to the target Grafana object.

[0108] In an optional implementation, when the processor executes the process of retrieving each target data corresponding to each chart to be displayed according to the SQL statement list through the business frontend to render the visualization chart corresponding to the target Grafana object, it specifically performs the following steps: for each chart to be displayed, it sends a data resource retrieval request for that chart to be displayed to the business backend; it retrieves the target SQL template corresponding to the chart to be displayed through the business backend, combines the query parameters with the target SQL template to obtain the target SQL statement; if the business backend determines that the target SQL statement is included in the SQL statement list, it sends the data resource retrieval request to the Grafana server, so that the Grafana server returns the target data corresponding to the data resource retrieval request to the business frontend; and the business frontend renders the visualization chart corresponding to the target Grafana object based on each target data corresponding to each chart to be displayed.

[0109] The above method, in response to a query request for a target Grafana object, determines whether the user initiating the query has permission to use the target Grafana object. If the user has permission, the Nginx server retrieves the file information corresponding to the target Grafana object from the Grafana server. Based on the file information, a visualization chart corresponding to the target Grafana object is displayed. This method configures user access permissions for different Grafana objects in the business server. After determining that the user has permission to use the target Grafana object, it only needs to retrieve the corresponding file information from the Grafana server to display the corresponding visualization chart. Users do not need to develop their own charts, nor do they need to perform secondary development on the Grafana server or set permissions for different business functions. This reduces the redundancy and complexity of permission control, saving human resources and time costs.

[0110] The computer program products of the visualization chart display method, system, and electronic device provided in the embodiments of the present invention include a computer-readable storage medium storing program code. The instructions included in the program code can be used to execute the methods described in the preceding method embodiments. For specific implementation, please refer to the method embodiments, which will not be repeated here.

[0111] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, essentially, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0112] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for displaying visual charts, characterized in that, The method is applied to a business server; the business server communicates with the Grafana server through an Nginx server; the business server is pre-configured with each user's usage permissions for different Grafana objects in the Grafana server; The query fields in the business server correspond to the query variables in the Grafana server; The business server includes: a business front-end and a business back-end; the method includes: The business frontend receives a query request for a target Grafana object, concatenates the query parameters carried in the query request into a URL, passes the URL to the src attribute of an iframe tag, and sends the resource address corresponding to the src attribute to the business backend; wherein, the query parameters include the object identifier of the target Grafana object, the unique identifier of the chart panel filled in the browser page of the business frontend, the start time of the data, and the end time. In response to the business backend receiving the resource address, the business backend determines whether the user who initiated the query request has permission to use the target Grafana object. If the user has permission to use the target Grafana object, the business backend obtains the first path corresponding to the query request based on the resource address, and sends the first path to the Nginx server; wherein, the Nginx server adds an authentication request header containing a user token identifier to the first path to obtain a second path, and sends the second path to the Grafana server, so that the Grafana server returns the file information corresponding to the target Grafana object based on the second path; Based on the file information, a visualization chart corresponding to the target Grafana object is displayed.

2. The method according to claim 1, characterized in that, The business backend determines whether the user initiating the query request has permission to use the target Grafana object, including: The business backend obtains the first Grafana object that the user has usage permission for, which is pre-configured, and determines whether the target Grafana object belongs to the first Grafana object; If the target Grafana object belongs to the first Grafana object, it is determined that the user has permission to use the target Grafana object; If the target Grafana object does not belong to the first Grafana object, it is determined that the user does not have permission to use the target Grafana object.

3. The method according to claim 1, characterized in that, Based on the file information, the steps for displaying the visualization chart corresponding to the target Grafana object include: The file information is loaded through the business front-end; wherein, the file information includes resource information corresponding to the associated resources; the associated resources include: the number, color, and style of the charts corresponding to the target Grafana object; the resource information includes: the interface information and / or link address information corresponding to the associated resources; The Nginx server sends a resource request to the Grafana server to obtain the associated resources; The business front-end receives the associated resources corresponding to the resource request returned by the Grafana server, and displays a visualization chart corresponding to the target Grafana object based on the file information and the associated resources.

4. The method according to claim 3, characterized in that, The target Grafana object corresponds to multiple charts to be displayed; The steps for displaying the visualization chart corresponding to the target Grafana object based on the file information and the associated resources include: The business front-end calls the preset interface of the chart panel corresponding to the query request to obtain multiple SQL templates corresponding to the target Grafana object; wherein, each SQL template corresponds to a chart to be displayed. The query parameters in the query request are combined with each of the SQL templates to obtain a list of SQL statements; The business front-end retrieves each target data corresponding to each chart to be displayed according to the list of SQL statements, so as to render the visualization chart corresponding to the target Grafana object.

5. The method according to claim 4, characterized in that, The steps for retrieving each target data corresponding to each chart to be displayed from the business front-end according to the list of SQL statements, and rendering the visualization chart corresponding to the target Grafana object, include: For each of the charts to be displayed, a data resource acquisition request for that chart is sent to the business backend; The target SQL template corresponding to the chart to be displayed is obtained through the business backend, and the query parameters are combined with the target SQL template to obtain the target SQL statement; If the business backend determines that the target SQL statement is included in the SQL statement list, the data resource acquisition request is sent to the Grafana server, so that the Grafana server can return the target data corresponding to the data resource acquisition request to the business frontend; The business front-end renders a visual chart corresponding to the target Grafana object based on each target data corresponding to each chart to be displayed.

6. A visualization chart display system, characterized in that, include: Business server, Nginx server, and Grafana server; The business server communicates with the Grafana server through an Nginx server. The business server is pre-configured with each user's usage permissions for different Grafana objects in the Grafana server; The query fields in the business server correspond to the query variables in the Grafana server; The business server includes: a business front-end and a business back-end; The business frontend is used to receive query requests for a target Grafana object, concatenate the query parameters carried in the query request into a URL, pass the URL to the src attribute of the iframe tag, and send the resource address corresponding to the src attribute to the business backend; wherein, the query parameters include the object identifier of the target Grafana object, the unique identifier of the chart panel filled in the browser page of the business frontend, the start time of the data, and the end time. The business backend is used to receive the resource address, determine whether the user who initiated the query request has the right to use the target Grafana object; if the user has the right to use the target Grafana object, obtain the first path corresponding to the query request based on the resource address, and send the first path to the Nginx server. The Nginx server is used to add an authentication request header containing a user token identifier to the first path to obtain the second path, and then send the second path to the Grafana server. The Grafana server returns the file information corresponding to the target Grafana object based on the second path; Based on the file information, the business front-end displays a visual chart corresponding to the target Grafana object.

7. The system according to claim 6, characterized in that, The Grafana server is also used for: Verify the user token identifier in the authentication request header, and verify whether the Grafana server allows the user to query file information corresponding to the second path; If the user is allowed to query the file information corresponding to the second path, the file information corresponding to the second path is returned to the business frontend through the business backend.

8. An electronic device, characterized in that, It includes a processor and a memory, the memory storing machine-executable instructions that can be executed by the processor, the processor executing the machine-executable instructions to implement the visualization chart display method according to any one of claims 1-5.

9. A machine-readable storage medium, characterized in that, The machine-readable storage medium stores machine-executable instructions that, when invoked and executed by a processor, cause the processor to implement the visualization chart display method according to any one of claims 1-5.

Images