CN116996405B

CN116996405B - Network visualization method, device, client, system and readable storage medium

Info

Publication number: CN116996405B
Application number: CN202311246887.8A
Authority: CN
Inventors: 赵慧
Original assignee: Suzhou Metabrain Intelligent Technology Co Ltd
Current assignee: Suzhou Metabrain Intelligent Technology Co Ltd
Priority date: 2023-09-26
Filing date: 2023-09-26
Publication date: 2024-01-23
Anticipated expiration: 2043-09-26
Also published as: CN116996405A

Abstract

The invention relates to the field of computers, and discloses a network visualization method, a device, a client, a system and a readable storage medium, in order to solve the problems that a visualization process occupies background server resources of a management platform and occupies large calculation data. The method is applied to the client and comprises the following steps: acquiring current request data information; judging whether target request data information which is the same as the current request data information exists in a request data information set or not; if the target request data information does not exist in the request data information set, updating the request data information set, and rendering a page picture; and if the target request data information exists in the request data information set, not processing the request data information set and the page picture. The invention only renders the page picture when the page changes, so that the computing resource is saved, and the data processing process is executed by the client, so that the background service resource can be released.

Description

Network visualization method, device, client, system and readable storage medium

Technical Field

The present invention relates to the field of computers, and in particular, to a network visualization method, device, client, system, and computer readable storage medium.

Background

When technicians intensively deploy network isolation policies and reduce the number of firewall rules, if the isolation policies are to be configured reasonably and efficiently, the current network state must be cleared and mastered. The visual display of the current network state is a very important mode, the current visualization is basically based on the calculation data of a background server of a management platform, the page is simply responsible for display, the background server is required to recalculate the data every time the page is refreshed, the page reloads dom (Document Object Model ), and the computing resources are consumed similarly when the data are unchanged.

Therefore, how to solve the above technical problems should be of great interest to those skilled in the art.

Disclosure of Invention

The invention aims to provide a network visualization method, a device, a client, a system and a computer readable storage medium, wherein the client processes data and displays a page, and renders a page picture when the page changes, so that the computing resource is saved.

In order to solve the above technical problems, the present invention provides a network visualization method, applied to a client, including:

acquiring current request data information;

judging whether target request data information which is the same as the current request data information exists in a request data information set or not;

if the target request data information does not exist in the request data information set, updating the request data information set, and rendering a page picture;

and if the target request data information exists in the request data information set, not processing the request data information set and the page picture.

As an implementation manner, the rendering the page picture includes:

generating an area where each group of client combinations are located in the target page picture by utilizing the browser of the client;

generating a node diagram of each client in the target page picture; the node diagram of the client is in the region corresponding to the client combination;

adding a connecting line between node diagrams corresponding to target clients in each client combination; the target client is the client with access relation;

adding a pointing identifier on the connection line;

Generating canvas of the target page picture to obtain the target page picture;

and rendering the page picture by utilizing different areas in the target page picture and the page picture.

As an implementation manner, before adding the pointing identifier on the connection line, the method further includes:

based on a data driven document technology, adding hatching among node diagrams corresponding to a target client in each client combination; the shadow line is the same as the connecting line in position and is different from the attribute of the connecting line.

As an embodiment, further comprising:

displaying the shadow line when a cursor hovers over the shadow line;

when the cursor leaves the shadow line, the shadow line is hidden.

As an implementation manner, the generating, by using the browser of the client, the region where each group of clients are combined in the target page picture includes:

determining the height occupied by each client combination in the target page picture according to the number of the clients in each client combination;

determining a diagonal position coordinate corresponding to the initial position coordinate according to the height, the width of the row pre-divided for the page and the initial position coordinate of each group of client combinations;

Based on a data driven document technology, four point coordinates of an area where each client combination is located are determined according to the starting position coordinates, the diagonal position coordinates, the width and the height of each client combination.

As an implementation manner, according to the number of the clients in each client combination, determining the height occupied by each client combination in the target page picture includes:

determining the height occupied by each client combination in the target page picture according to a first formula, wherein the first formula is as follows:

H=（math.ceil（w×agentcount/n））×h；

h is the height occupied by each client side combination in the target page picture; w is the width occupied by each client in each client combination; the agent count is the number of the clients in each client combination; n is the width of the column pre-divided for the page; h is the height of the row of the client in each client combination, and math.ceil represents an upward rounding function.

As an implementation manner, generating the node map of each client in the target page picture includes:

replacing the clients in each group of client combinations with corresponding node icons based on a data driven document technology;

Defining a node name for each of the clients based on a data driven document technology; the node map of each client includes the node icon and the node name.

As an implementation manner, adding a connection line between the node diagrams corresponding to the target client in each client combination includes:

determining the node position of the target client in each client combination;

distinguishing a service providing client and a service accessing client in the target clients;

determining the position of a control point according to the node positions of the service providing client and the service accessing client based on a data driven document technology;

based on the data driven document technology, a Bezier curve is added at the node location of the service providing client, the node location of the service accessing client and the location of the control point.

As an implementation manner, in each client combination, the radian directions of a plurality of bezier curves are the same.

As an implementation manner, before determining the node position of the target client in each client combination, the method further includes:

Traversing the clients in each client combination, and determining serial numbers corresponding to the clients one by one;

and determining the node position of each client in each client combination according to the starting position coordinate of each client combination, the serial number of the client, the width of a row pre-divided for a page, the width occupied by each client in each client combination and the row height of the client in each client combination.

As an implementation manner, determining the node position of each client in each client combination according to the starting position coordinate of each client combination, the serial number of the client, the width of a column pre-divided for a page, the width occupied by each client in each client combination, and the height of the row of the client in each client combination includes:

determining the abscissa of the client according to a second formula, wherein the second formula is:

X=mapstartx+（index%(n/w））×w；

wherein X is the abscissa of the client, mapstartx is the abscissa in the initial position coordinate of the client combination where the client is located, index is the serial number of the client,% represents the remainder, and n is the width of the row pre-divided for the page; w is the width occupied by each client in each client combination;

Determining the ordinate of the client according to a third formula, wherein the third formula is:

Y=mapstarty+（Math.ceil(w×index/n)）×h；

wherein Y is an ordinate of the client, mapstart is an ordinate in a starting position coordinate of a client combination where the client is located, w is a width occupied by each client in each client combination, index is a serial number of the client, h is a height of a row where the client is located in each client combination, and math.ceil represents an upward rounding function.

As an implementation manner, adding the pointing identifier on the connection line includes:

and adding an arrow at the tail end of the connecting line based on the data-driven document technology, wherein the tail end of the connecting line is the position of the service access client.

As one implementation, the canvas for generating the target page picture includes:

determining the width of the canvas as the width of the page;

determining the height of the canvas as the maximum height occupied by all the client combinations;

the canvas is generated according to the width and the height of the canvas.

As an implementation manner, before the rendering of the page picture by using the different areas in the target page picture and the page picture, the method further includes:

Judging whether different areas exist between the target page picture and the page picture or not;

if the target page picture is the same as the page picture, not rendering the page picture;

and if different areas exist in the target page picture and the page picture, executing the step of rendering the page picture by utilizing the different areas in the target page picture and the page picture.

As one implementation, the target page picture is a picture in a scalable vector graphics format.

As an implementation manner, before determining whether the target request data information identical to the current request data information exists in the request data information set, the method further includes:

acquiring the request data information set from a background server of a management platform;

and storing the request data information set into a session storage.

As an implementation manner, before acquiring the current request data information, the method further includes:

the background server of the management platform receives the request data information between the clients;

the background server judges whether the same request data information exists or not;

discarding the request data information if the same request data information exists in the background server;

If the same request data information does not exist in the background server, judging whether a service access client and a service providing client corresponding to the request data information are in a micro-isolation control client range or not;

and if the service access client and the service providing client corresponding to the request data information are in the micro-isolation control client range, recording the request data information to form the request data information set.

As an implementation manner, after forming the request data information set, the method further includes:

and ordering the request data information in the request data information set according to the outbound direction.

As an implementation manner, before the background server of the management platform receives the request data information between the clients, the method further includes:

acquiring the request data information in a kernel module mode;

and sending the request data information to a background server of the management platform.

The invention also provides a network visualization device, comprising:

the first acquisition module is used for acquiring the current request data information;

the first judging module is used for judging whether target request data information which is the same as the current request data information exists in the request data information set or not;

The processing module is used for updating the request data information set and rendering a page picture if the target request data information does not exist in the request data information set; and if the target request data information exists in the request data information set, not processing the request data information set and the page picture.

The invention also provides a client, comprising:

a memory for storing a computer program;

and a processor for implementing any one of the above-described network visualization methods when executing the computer program.

The invention also provides a network visualization system, comprising: and the management platform and the client are used for managing the client.

The present invention also provides a computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of any of the above described network visualization methods.

The network visualization method provided by the invention is applied to a client and comprises the following steps: acquiring current request data information; judging whether target request data information which is the same as the current request data information exists in a request data information set or not; if the target request data information does not exist in the request data information set, updating the request data information set, and rendering a page picture; and if the target request data information exists in the request data information set, not processing the request data information set and the page picture.

The beneficial effects are that: the network visualization method of the invention compares the current request data information with the request data information in the request data information set by acquiring the current request data information, and judges whether the same target request data information exists. When target request data information exists in the request data information set, the page is not required to be refreshed, no processing is performed, and computing resources are saved; and when the target request data information does not exist in the request data information set, indicating that the page is changed, and rendering the page picture. Therefore, the invention only renders the page picture when the page changes, thereby saving the computing resources, and the processing process is executed by the client, so that the background service resources can be released.

Furthermore, the present invention provides an apparatus, a client, a system and a computer readable storage medium having the above advantages.

Drawings

For a clearer description of embodiments of the invention or of the prior art, the drawings that are used in the description of the embodiments or of the prior art will be briefly described, it being apparent that the drawings in the description below are only some embodiments of the invention, and that other drawings can be obtained from them without inventive effort for a person skilled in the art.

Fig. 1 is a flowchart of a network visualization method according to an embodiment of the present invention;

FIG. 2 is a flowchart of a network visualization method according to an embodiment of the present invention;

FIG. 3 is a flowchart of an area where each group of client combinations are located in a target page picture according to an embodiment of the present invention;

fig. 4 is a flowchart of generating a node diagram of each client in a target page picture according to an embodiment of the present invention;

FIG. 5 is a flowchart of adding a connection line between node graphs corresponding to a target client according to an embodiment of the present invention;

FIG. 6 is a schematic diagram of a canvas according to an embodiment of the present invention;

FIG. 7 is a flowchart of a canvas for generating a target page picture provided by an embodiment of the present invention;

fig. 8 is a flowchart of a network visualization method according to an embodiment of the present invention;

fig. 9 is a flowchart of a network visualization method according to an embodiment of the present invention;

fig. 10 is a block diagram of a network visualization device according to an embodiment of the present invention;

fig. 11 is a block diagram of a client according to an embodiment of the present invention.

Detailed Description

In order to better understand the aspects of the present invention, the present invention will be described in further detail with reference to the accompanying drawings and detailed description. It will be apparent that the described embodiments are only some, but not all, embodiments of the invention. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.

Micro-isolation (Micro Segmentation) is a network security technology, and by means of micro-isolation, enterprises can better control the data flow with the increasing east-west interfaces, or control the longitudinal connection data flow between servers and between peripheral bypass security tools.

The capability requirement of the micro-isolation core is focused on the isolation of east-west traffic, and the micro-isolation is realized by dividing all the services in a data center into a plurality of tiny network nodes according to a specific principle, executing access control on the nodes according to dynamic policy analysis, logically isolating the nodes and limiting the lateral movement of users. Micro-isolation is typically done in software, which makes it easier to define fine-grained partitions.

In the micro-isolated architecture, the concept of an internal network and an external network is not existed any more, but the data center network is isolated into a plurality of tiny computing units, which are called nodes for short. Each node needs to access the resources of other nodes, and needs to pass the authentication of the micro-isolation client, if the node identity authentication is not passed or does not have access rights, the node identity authentication is intercepted by the client.

As the background technology part, the current visualization is basically based on the background server of the management platform to calculate data, and the page is simply responsible for display, so that the background is required to recalculate the data for each refreshing of the page, the page reloads dom, and the computing resources are consumed similarly when the data are unchanged.

In view of this, the present invention provides a network visualization method, applied to a client, please refer to fig. 1, which includes:

step S101: and acquiring the current request data information.

The current request data information is obtained from the client. The current request data information includes Id (Identification), name, IP address of the service access client (service visitor), and Id, name, IP address of the service providing client (service provider).

For example, the format of the current request data information may be: { sourceId: "a", sourceiname: "service visitor", sourceIP: "100.2.23.14", serverId: "B", serverName: "service provider", serverIP: "100.2.23.15", serverPort: "22" }.

Step S102: and judging whether target request data information which is the same as the current request data information exists in the request data information set.

The request data information set comprises at least one request data information, the current request data information is compared with the request data information in the request data information set, and the request data information which is the same as the current request data information in the request data information set is called target request data information.

In one embodiment of the present invention, before determining whether the target request data information identical to the current request data information exists in the request data information set, the method may further include:

acquiring a request data information set from a background server of a management platform;

and storing the request data information set into a session storage.

Data within the session store (session) is purged at the end of the page session.

Step S103: and if the target request data information does not exist in the request data information set, updating the request data information set, and rendering the page picture.

And the request data information set is updated by rendering the page picture, namely, the current request data information is stored in the request data information set.

Step S104: and if the target request data information exists in the request data information set, not processing the request data information set and the page picture.

And the target request data information exists in the request data information set, which indicates that the page picture is unchanged and is not processed.

Wherein steps S101 to S104 may be operated by a browser of the client.

The network visualization method in this embodiment compares the current request data information with the request data information in the request data information set by acquiring the current request data information, and determines whether the same target request data information exists. When target request data information exists in the request data information set, the page is not required to be refreshed, no processing is performed, and computing resources are saved; and when the target request data information does not exist in the request data information set, indicating that the page is changed, and rendering the page picture. Therefore, the invention only renders the page picture when the page changes, thereby saving the computing resources, and the processing process is executed by the client, so that the background service resources can be released.

Referring to fig. 2, in one embodiment of the present invention, the network visualization method includes:

step S201: and acquiring the current request data information.

Step S202: and judging whether target request data information which is the same as the current request data information exists in the request data information set.

Step S203: and if the target request data information does not exist in the request data information set, updating the request data information set.

Step S204: and generating an area where each group of client combinations are located in the target page picture by using the browser of the client.

In the invention, a plurality of clients (agents) are grouped to form at least one client combination, and the number of the clients included in each client combination can be equal or unequal according to the situation. The grouping condition of the client can be set according to the actual situation, for example, the grouping can be performed according to the service content of the client.

The target page picture is a picture used for rendering the current page picture.

Each client combination occupies a certain area on the target page picture, namely the area where the client combination is located. For example, the area where the client group is located may be a rectangle.

As an implementation manner, referring to fig. 3, generating, by using the browser of the client, an area where each group of clients in the target page picture are located includes:

step S2041: and determining the height occupied by each client combination in the target page picture according to the number of clients in each client combination.

As an implementation manner, according to the number of clients in each client combination, determining the height occupied by each client combination in the target page picture includes:

H=（math.ceil（w×agentcount/n））×h；

h is the height occupied by each client side combination in the target page picture; w is the width occupied by each client in each client combination; the agentcount is the number of clients in each client combination; n is the width of the column pre-divided for the page; h is the height of the row in which the client is located in each client combination, and math.ceil represents an upward rounding function.

It should be noted that the width w occupied by each client in the client combination is not specifically limited, and is determined according to circumstances. For example, the width w occupied by each client in the client combination may be 160px (Pixel).

The page can be divided into m columns according to the available width of the page, the size of m is not limited in the invention, and the page can be set by itself, for example, m can be 3, 4, 5, 6, 7, 8 and the like. The width of each column is equal, and the width of each column may be determined according to the size of the page width. When the page width is relatively large, the width of each divided column is also relatively large, and when the page width is relatively large, the width of each divided column is also relatively small. For example, the width of each column may be 480px, 640px, 800px, etc.

Step S2042: and determining the diagonal position coordinates corresponding to the initial position coordinates according to the height, the width of the row pre-divided for the page and the initial position coordinates of each group of client combinations.

The region corresponding to the client combination is rectangular, and the initial position coordinate and the diagonal position coordinate are positioned on a diagonal line.

Assuming that the starting position coordinate of one client combination is the coordinate of the lower left corner, the starting position coordinate is (mapstartx, mapstarty), where mapstartx is the abscissa of the client combination starting position coordinate, and mapstarty is the ordinate of the client combination starting position coordinate, then the diagonal position coordinate is (mapstartx+n, mapstarty+h).

Step S2043: based on the data driven document technology, four point coordinates of the area where each client combination is located are determined according to the starting position coordinates, the diagonal position coordinates, the width and the height of each client combination.

A Data-Driven document (D3) is a JavaScript visualization library based on the web standard. D3 can vividly present data by means of SVG (Scalable Vector Graphics ), canvas, and HTML (HyperText Markup Language, hypertext markup language). D3 combines powerful visual interaction techniques with the techniques of data-driven DOM (Document Object Model ), and visualizes data with the powerful freedom of modern browsers.

The four point coordinates are the position coordinates of four corners of the client combined rectangular area, the position coordinate of the left upper corner is (mapstartx, mapstarty), the position coordinate of the left lower corner is (mapstartx, mapstarty+H), the position coordinate of the right upper corner is (mapstartx+n, mapstarty), and the position coordinate of the right lower corner is (mapstartx+n, mapstarty+H).

And obtaining four point coordinates of the corresponding region of each client combination, namely realizing the visualization of the corresponding region of each client combination.

When the number of the client combinations is larger than m, locating according to the height of the client combinations H1 to Hm, wherein the height is the smallest.

Step S205: generating a node diagram of each client in the target page picture; the node diagram of the client is in the region corresponding to the client combination to which the node diagram belongs.

Assuming that there are two client combinations Q, P, the target page picture includes two areas, each area corresponds to one client combination, and node diagrams corresponding to clients Q1, Q2, …, qi in the client combination Q are all in the area of the client combination Q, and node diagrams corresponding to clients P1, P2, …, pt in the client combination P are all in the area of the client combination P.

The node map of the client may be arranged in an array within the region of the belonging client combination.

The node map of the client includes node icons and node names. The node icons are preset, specific patterns can be set by themselves, and the node icons are not limited in the invention. The node name may be defined by itself, and is not limited in the present invention. One client corresponds to one node icon and one node name.

As an implementation manner, referring to fig. 4, generating a node map of each client in the target page picture includes:

step S2051: based on the data driven document technology, the clients in each group of client combinations are replaced with corresponding node icons.

The node icon is replaced according to the unique identifier of the client, and the node is replaced by the attribute of this.nodes.filter () of D3 to be the designed node icon.

Step S2052: defining a node name for each client based on the data driven document technology; the node map of each client includes node icons and node names.

The this. Nodes. Application ("text") method is used to modify the text (function (d) { return "name"; } to the desired name.

Step S206: adding a connecting line between node diagrams corresponding to target clients in each client combination; the target client is a client with an access relationship.

The target client typically includes two clients, for example, when client a accesses client B, then client a and client B are target clients. And connecting the node diagrams corresponding to the client A and the client B respectively.

It should be noted that, in the present invention, the type of the connection line between the target clients is not limited. For example, the line between the target clients is a straight line, or the line between the target clients is a curved line.

As an implementation manner, referring to fig. 5, adding, in each client combination, a connection line between node diagrams corresponding to the target client includes:

step S2061: within each client combination, the node location of the target client is determined.

Step S2062: the service providing clients and the service accessing clients in the target clients are distinguished.

For example, when client a accesses client B, client a services access the client, and client B provides the client for the service.

Step S2063: based on the data driven document technology, the location of the control point is determined from the node locations of the service providing client and the service accessing client.

The control point is located 2/3 of the absolute value of the node position coordinate difference of the service providing client and the service accessing client from the position of the service providing client.

Step S2064: based on the data driven document technology, bezier curves are added at the node locations of the service providing clients, the node locations of the service accessing clients, and the locations of the control points.

Bezier curves (also known as Bezier curves or Bezier curves) are mathematical curves applied to two-dimensional graphics applications. The vector graph is used to draw the curve precisely, the Betz curve is composed of line segments and nodes, the nodes are draggable supporting points, and the line segments are telescopic curves.

The node location of the service providing client, the node location of the service accessing client, and the location of the control point are all on a Bessel curve. The node location of the service providing client, the node location of the service accessing client, i.e. the start point and the end point on the bezier curve.

In the implementation, the connection line between the service providing client and the service accessing client is set to be a Bezier curve, so that the connection line between different target clients can be prevented from overlapping, and the connection line between the target clients can be displayed more clearly.

As an implementation manner, in each client combination, the radian directions of the multiple bezier curves are the same.

Assuming that the client A, the client B and the client C are on the same horizontal line, an access relationship exists between the client A and the client B, an access relationship exists between the client A and the client C, and when the Bezier curve between the client A and the client B is bent upwards, the Bezier curve between the client A and the client C is also bent upwards; when the bezier curve between the client a and the client B is bent downward, the bezier curve between the client a and the client C is also bent downward.

Step S207: and adding a pointing identifier on the connection line.

The pointing indicia may be arrows or the like.

In one embodiment of the invention, adding a directional identifier to a connection line includes:

based on the document technology driven by data, an arrow is added at the tail end of the connection line, and the tail end of the connection line is the position of the service access client.

An arrow can be added at the end of the connecting line, and the arrow can read the tail end coordinate information of the connecting line to carry out covering processing.

Step S208: and generating a canvas of the target page picture to obtain the target page picture.

The canvas needs to accommodate all of the regions to which the client combinations correspond. The schematic diagram of the target page picture is shown in fig. 6, and the target page picture comprises a canvas 1, wherein areas 2 corresponding to all client combinations are distributed in the canvas 1, and node diagrams 3 of all clients included in each client combination are distributed in the areas 2 corresponding to the client combination. Three client combinations are shown as an example, wherein two client combinations comprise eight clients and one client combination comprises six clients.

Referring to FIG. 7, as one implementation, the canvas for generating the target page picture includes:

step S2081: the width of the canvas is determined to be the width of the page.

The canvas has a width equal to the page width, i.e., window. Screen. Availwidth.

Step S2082: the height of the canvas is determined to be the maximum height occupied by all client combinations.

Let k client combinations be provided, all the client combinations occupy heights H1, H2, …, hk, respectively, and the canvas has heights Max (H1, H2, …, hk).

Step S2083: the canvas is generated according to the width and height of the canvas.

Vector graphics format (Scalable Vector Graphics, SVG) is an open standard vector graphics language that allows the design of exciting, high resolution Web graphics pages. The user can directly trace the image with code, can turn on the SVG image with any word processing tool, can make the image interactive by changing part of the code, and can insert the image into HTML at any time to view through a browser.

The vector graphic format picture has the characteristic of high resolution, and can not be distorted when the page is scaled.

Step S209: and rendering the page picture by utilizing different areas in the target page picture and the page picture.

And comparing the dom after each generation of the target page picture with the original dom by utilizing the virtual dom principle of vue, only modifying the change part in the dom, and rendering on the page. Rendering is implemented by the browser of the client.

It should be noted that steps S205 to S208 are also implemented by using the browser of the client. The generation of the target page picture is realized by the browser, and the information related to the browser page, such as the page width, involved in the generation process is not required to be acquired from other positions.

When the target page picture is generated and implemented by other programs of the client, the information about the browser can be obtained from the browser, and then the generated target page picture is sent to the browser and rendered by the browser.

In this embodiment, only the changed portion is rendered, so that page performance loss can be reduced.

In one embodiment of the present invention, before rendering the page picture by using the different regions in the target page picture and the page picture, the method may further include:

judging whether different areas exist between the target page picture and the page picture;

and if the target page picture and the page picture have different areas, executing the step of rendering the page picture by utilizing the different areas in the target page picture and the page picture.

Step S210: and if the target request data information exists in the request data information set, not processing the request data information set and the page picture.

Referring to fig. 8, in one embodiment of the present invention, the network visualization method includes:

step S301: and acquiring the current request data information.

Step S302: and judging whether target request data information which is the same as the current request data information exists in the request data information set.

Step S303: and if the target request data information does not exist in the request data information set, updating the request data information set.

Step S304: and generating an area where each group of client combinations are located in the target page picture by using a browser of the client.

Step S305: generating a node diagram of each client in the target page picture; the node diagram of the client is in the region corresponding to the client combination to which the node diagram belongs.

Step S306: adding a connecting line between node diagrams corresponding to target clients in each client combination; the target client is a client with an access relationship.

Step S307: based on a data driven document technology, adding hatching among node diagrams corresponding to target clients in each client combination; the hatching is the same as the connection line position and is different from the attribute of the connection line.

The addition of hatching is the same as the addition of wiring.

It should be noted that, in the present invention, different properties of the hatching and the connecting line are not limited, and may be set by itself. Attributes include, but are not limited to, any one or any combination of transparency, width, color. For example, the hatching and the connecting line are different colors, the width of the hatching is 3 times of the width of the connecting line, the transparency of the hatching is 50%, and the transparency of the connecting line is 0.

In one embodiment of the invention, when the cursor hovers over a shadow line, the shadow line is displayed; when the cursor leaves the shadow line, the shadow line is hidden.

When the cursor of the mouse is crossed, the display hatching is realized through a river event. For example, when the mouse is moved over a shadow line, a different color of shadow line is displayed, with a transparency of 50% and a width of 3 times the line. The hidden display setting attribute is class=hide when the mouse is not scratched.

Hover is a method of mimicking a Hover event (mouse moving over and out of an object).

Step S308: and adding a pointing identifier on the connection line.

Step S309: and generating a canvas of the target page picture to obtain the target page picture.

Step S310: and rendering the page picture by utilizing different areas in the target page picture and the page picture.

Step S311: and if the target request data information exists in the request data information set, not processing the request data information set and the page picture.

It should be noted that steps S305 to S311 may also be performed by a browser of the client.

On the basis of any one of the foregoing embodiments, in one embodiment of the present invention, before determining the node position of the target client in each client combination, the method further includes:

and determining the node position of each client in each client combination according to the starting position coordinate of each client combination, the serial number of the client, the width of the row pre-divided for the page, the occupied width of each client in each client combination and the height of the row of the client in each client combination.

In each client combination, the sequence numbers of the clients are 0, 1, 2, 3, … and r from 0, and r is equal to the number of the clients in the client combination minus one.

As an implementation manner, determining the node position of each client in each client combination according to the starting position coordinate of each client combination, the serial number of the client, the width of the column pre-divided for the page, the width occupied by each client in each client combination, and the height of the row of the client in each client combination includes:

and determining the abscissa of the client according to a second formula, wherein the second formula is as follows:

X=mapstartx+（index%(n/w））×w；

wherein X is the abscissa of the client, mapstartx is the abscissa of the initial position coordinate of the client combination where the client is located, index is the serial number of the client,% represents the remainder, and n is the width of the row pre-divided for the page; w is the width occupied by each client in each client combination;

determining the ordinate of the client according to a third formula, wherein the third formula is as follows:

Y=mapstarty+（Math.ceil(w×index/n)）×h；

wherein Y is the ordinate of the client, mapstart is the ordinate in the starting position coordinate of the client combination where the client is located, w is the width occupied by each client in each client combination, index is the serial number of the client, h is the height of the row where the client is located in each client combination, and math.

And after the coordinates of each client in the client combination are determined, the position of the target client can be obtained.

Referring to fig. 9, in one embodiment of the present invention, the network visualization method includes:

step S401: and the background server of the management platform receives the request data information between the clients.

It should be noted that, the two clients involved in requesting the data information may be both clients in one network, for example, the client a accesses the client B, or one may be an external network, for example, the client a accesses hundreds of degrees or a new wave, and all the external networks are regarded as one client.

In one embodiment of the present invention, before the background server of the management platform receives the request data information between the clients, the method further includes:

the client acquires the request data information in a kernel module mode;

and the client sends the request data information to a background server of the management platform.

The request data information is obtained by a kernel module mode, and IN the example of linux, the network traffic information (request data information) is obtained by hooking at five hooks nf_inet_pre_routing, nf_inet_local_in, nf_inet_forward, nf_inet_local_out and nf_inet_post_routing of Netfilter.

Step S402: the background server determines whether the same request data information already exists.

Step S403: and if the same request data information exists in the background server, discarding the request data information.

It should be noted that the background server discards the received request data information.

Step S404: if the same request data information does not exist in the background server, judging whether the service access client and the service providing client corresponding to the request data information are in the micro-isolation control client range or not.

Step S405: and if the service access client and the service providing client corresponding to the request data information are in the range of the client controlled by micro isolation, recording the request data information to form a request data information set.

In one embodiment of the present invention, after forming the request data information set, further comprising:

When the service access client accesses other clients, the direction is the outbound direction.

All the request data information is ordered according to the outbound direction, and the record form can be [ { sourceId: "A", sourceName: "A", sourceIP: "100.2.23.14", serverId: "B", serverName: "B", serverIP: "100.2.23.15", serverPort: "22" }, { sourceId: "C", sourceName: "C", sourceIP: "100.2.123.14", serverId: "D", serverName: "D", serverIP: "100.2.123.15", serverPort: "25" }.

In this embodiment, by sorting the request data information, the browser of the client is convenient to compare the current request data information with the request data information set stored in the session storage, so as to avoid error of comparison results caused by sequence.

Step S406: and discarding the request data information if the service access client and the service providing client corresponding to the request data information are not in the range of the client controlled by micro isolation.

Step S407: and acquiring the current request data information.

Step S408: and judging whether target request data information which is the same as the current request data information exists in the request data information set.

Step S409: and if the target request data information does not exist in the request data information set, updating the request data information set, and rendering the page picture.

Step S410: and if the target request data information exists in the request data information set, not processing the request data information set and the page picture.

The network visualization method of the present invention is described in a specific case below.

Architecture:

the system comprises a management platform and clients, wherein one management platform manages a plurality of clients. The micro-isolation control is the access relation before the multiple clients, and the acquired traffic is the traffic information among the clients.

Capturing network traffic in real time:

1. the client obtains the network traffic information (i.e. request data information) through a kernel module mode.

Data integration and recording: background server processing:

2. and (3) data recording: the background server of the management platform receives network flow information reported by a client, wherein the flow information is in the format of { sourceId: "A", sourceName: "service visitor", sourceIP: "100.2.23.14", serverId: "B", serverName: "service provider", serverIP: "100.2.23.15", serverPort: "22" }, and the server checks whether the information exists in the system after receiving the information, and if so, discards the record; if not, continuing to judge whether the visitor and the provider of the record are both in the range of the client, and if so, reserving the record.

3. Data sorting: all data were combined in the outbound direction and recorded as [ { sourceId: "a", sourceIP: "100.2.23.14", serverId: "B", serverName: "B", serverIP: "100.2.23.15", serverPort: "22" }, { sourceId: "C", sourceIP: "100.2.123.14", serverId: "D", serverName: "D", serverIP: "100.2.123.15", serverPort: "25" }.

Page data processing:

4. page caching: the page stores the request data information in the session message, window.

Generating SVG pictures:

5. calculating the position occupied by the client grouping: calculating the height occupied by the client groups according to the number of the clients under the groups, and equally dividing the page into m (3 to 8) columns according to the available width of the page, wherein the width of each column is ensured to be between n (480 px, 640px and 800 px); the method of calculating the height occupied by each group is that 160px is occupied by each client, so that the required row is obtained, and each row needs 120 px. The final required height was h=math.ceil (160×agentcount/n) ×120. The starting position of the current group is (mapstartx, mapstarty); the termination position is (mapstartx+n, mapstarty+h). The current height of each column is H1, H2, … and Hm. And when the group number is greater than m, finding out the position with the smallest height according to the heights from H1 to Hm.

6. Calculating the position occupied by the client: each client is in the client combination area of the client, the occupied position is firstly traversed according to the initial position (mapstart ) of the combination, and then the position of each client can be obtained according to the sequence number index as (mapstart+index% (n/160) x 160 and mapstart+Math.ceil (160 x index/n) x 120).

7. Packet visualization: four points are arranged in the area where each client combination is located, a rectangle is generated, the rectangles are respectively the positions of four corners of the group, and according to the step 5, the rectangles are respectively: the refupcodedinatx=mapstart rtx, the d.refupcodedinaty=mapstart rtx, the d.lightdowncodedinatx=mapstart rtx+n, the d.lightdowncodedinaty=mapstart+h;

the code is as follows:

this.lineGroup = this.container.append('g')

this.lineGroup.selectAll('.link').data(this.data.workGroupData)

.enter().append('path')

.attr('class', 'link')

.attr('d', link =>genGroupPath(link), )

.attr('id', (link, i) =>'link-' + i)

.attr("stroke", "#e4e7f2")

.attr("fill", "none")

function genGroupPath(d) {

return "M " + d.leftUpCoordinateX + "," + d.leftUpCoordinateY + " L " + d.rightDownCoordinateX + "," + d.leftUpCoordinateY + " L " + d.rightDownCoordinateX + "," + d.rightDownCoordinateY + " L " + d.leftUpCoordinateX + "," + d.rightDownCoordinateY + " L " + d.leftUpCoordinateX + "," + d.leftUpCoordinateY

}

8. generating a node diagram of the client:

code: svg.end ("circle")

Attr ("cx", x)// the x coordinate of the center of the circle

Attr ("cy", y)// the y coordinate of the center of the circle

Attr ("r", 1)// radius of circle

The node diagram comprises a node icon and a node name, the node icon is replaced according to the unique identifier of the client, and the node is replaced by the attribute of the is. Nodes. Filter () of D3 to be a designed icon;

code:

this is. Nodes. Filter (= > item. Name= ') application (' use '). Attr (' xlink: href ', # -group'). Attr ('stroke', # -ccc '). Attr (' fill ', # 778191'). Attr ('x', function () { return-this getbbox (). Width/2 }). The method comprises the following steps: the is. Nodes. Application ("text"). Text (function (d) { return "name"; } method is modified to the required name.

9. Adding a connection line between clients with access relations: and (3) determining the shape of the line by the connection between the clients according to the client space occupation information obtained in the step (6) and the coordinates of the two clients with access relation, and connecting by using a Bezier curve, wherein the Bezier curve is designed and controlled. And respectively judging the coordinate positions of the starting point and the end point to generate a control point. The position of the control point is 2/3 of the absolute value of the coordinate difference of the starting point and the ending point, so that smooth radian and consistent radian direction of the curve are ensured.

Code: if (math.abs (tx-sx) < 50) { return "M" +sx+ "," +sy+ "Q" + (sx- (ty-sy)/5) +, "+ (0.25 x ty+0.75 x sy) +" +tx+ "," +ty } else if (math.abs (ty-sy) < 50) { return "M" +sx+ "," +sy+ "Q" + (sx/3+2 x/3) +, "+math abs (sy+ (tx-sx)/6) +" +tx+ "," +ty })

10. The wired mouse slides over the hatched design: the shadow line is completely consistent with the position of the connecting line, and the same generation method is used, wherein the difference is that the mouse is set to slide, namely the color displayed by the river event is changed into a color different from the line, the transparency is 50%, the width is 3 times of the connecting line, and the pattern level is positioned above the connecting line. The hidden display setting attribute is class=hide when the mouse is not scratched.

11. Arrow setting: an arrow is added at the end of a line in a mode of adding an attribute by using attr ('marker-end', (links, i) = > 'url (#' + 'marker-' +i+ ')'), the arrow can read the coordinate data at the end of the line, perform covering processing, and only add at the line and not add at the shadow line.

12. Canvas width and height calculation: the SVG canvas width is equal to the page width, i.e., window. Screen. AvailWidth, and the canvas height is equal to the maximum of H1 through Hm.

13. Virtual dom loading: comparing the dom after each SVG picture generation with the original dom by utilizing the virtual dom principle of vue, and only modifying the change part in the dom to render on the page, and rendering (); the page performance loss is reduced.

The micro-isolated network visualization method is based on the D3 technology, the background only provides the original data, the calculation processing of the data is processed by a browser of a client and finally displayed, only the changed dom is needed to be loaded by utilizing the virtual dom loading principle, the SVG of the D3 is utilized to generate a Web graphic page with high resolution, and the page is not distorted when scaled.

The network visualization device provided by the embodiment of the invention is introduced below, and the network visualization device described below and the network visualization method described above can be referred to correspondingly.

Fig. 10 is a block diagram of a network visualization device according to an embodiment of the present invention, and referring to fig. 10, the network visualization device may include:

a first obtaining module 100, configured to obtain current request data information;

a first judging module 200, configured to judge whether the target request data information identical to the current request data information exists in the request data information set;

the processing module 300 is configured to update the request data information set and render a page picture if the target request data information does not exist in the request data information set; and if the target request data information exists in the request data information set, not processing the request data information set and the page picture.

The network visualization device of the present embodiment is configured to implement the foregoing network visualization method, so that the specific implementation in the network visualization device may be portions of the foregoing embodiments of the network visualization method, for example, the first obtaining module 100, the first judging module 200, and the processing module 300, which are respectively configured to implement steps S101, S102, S103, and S104 in the foregoing network visualization method, so that the specific implementation thereof may refer to descriptions of respective partial embodiments, and will not be repeated herein.

As one implementation, the processing module 300 includes:

the first generation sub-module is used for generating an area where each group of client combinations are located in the target page picture by utilizing a browser of the client;

the second generation sub-module is used for generating a node diagram of each client in the target page picture; the node diagram of the client is in the region corresponding to the client combination to which the node diagram belongs;

the first adding submodule is used for adding a connecting line between node diagrams corresponding to the target clients in each client combination; the target client is a client with an access relationship;

the second adding submodule is used for adding a pointing identifier on the connecting line;

the third generation submodule is used for generating canvas of the target page picture so as to obtain the target page picture;

And the rendering sub-module is used for rendering the page picture by utilizing different areas in the target page picture and the page picture.

As an embodiment, the processing module 300 further includes:

a third adding sub-module, configured to add hatching between node diagrams corresponding to the target clients in each client combination based on the data-driven document technology; the hatching is the same as the connection line position and is different from the attribute of the connection line.

As an embodiment, further comprising:

a display sub-module for displaying the shadow line when the cursor hovers over the shadow line;

and the hiding sub-module is used for hiding the shadow line when the cursor leaves the shadow line.

As an embodiment, the first generating sub-module includes:

the first determining unit is used for determining the height occupied by each client combination in the target page picture according to the number of clients in each client combination;

the second determining unit is used for determining diagonal position coordinates corresponding to the initial position coordinates according to the height, the width of the row pre-divided for the page and the initial position coordinates of each group of client combinations;

and a third determining unit, configured to determine four point coordinates of an area where each client combination is located according to a start position coordinate, a diagonal position coordinate, a width, and a height of each client combination based on a data-driven document technology.

As an embodiment, the first determining unit is specifically configured to:

H=math.ceil（w×agentcount/n）×h；

As an embodiment, the second generating sub-module includes:

a replacing unit, configured to replace the clients in each group of client combinations with corresponding node icons based on the data-driven document technology;

a name definition unit for defining a node name for each client based on the data-driven document technology; the node map of each client includes node icons and node names.

As an embodiment, the first adding submodule includes:

a fourth determining unit, configured to determine, in each client combination, a node location of the target client;

a distinguishing unit for distinguishing the service providing client and the service accessing client in the target client;

A fifth determining unit for determining a location of a control point according to a node location of the service providing client and the service accessing client based on the data-driven document technology;

an adding unit configured to add a Bezier curve at a node position of the service providing client, a node position of the service accessing client, and a position of the control point based on the data-driven document technology.

As an embodiment, the first adding sub-module further includes:

the traversing unit is used for traversing the clients in each client combination and determining the serial numbers corresponding to the clients one by one;

and a sixth determining unit, configured to determine the node position of each client in each client combination according to the starting position coordinate of each client combination, the serial number of the client, the width of the column pre-divided for the page, the width occupied by each client in each client combination, and the height of the row where the client in each client combination is located.

As an embodiment, the sixth determining unit is specifically configured to:

X=mapstartx+（index%(n/w）×w；

Y=mapstarty+Math.ceil(w×index/n)×h；

As an embodiment, the second adding sub-module is specifically configured to:

As an embodiment, the third generating sub-module includes:

a seventh determining unit, configured to determine that the width of the canvas is the width of the page;

an eighth determining unit, configured to determine that the height of the canvas is a maximum value of heights occupied by all the client combinations;

and the generating unit is used for generating the canvas according to the width and the height of the canvas.

As an embodiment, the processing module 300 further includes:

the judging submodule is used for judging whether different areas exist between the target page picture and the page picture or not;

the processing sub-module is used for not rendering the page picture if the target page picture is the same as the page picture; and if different areas exist between the target page picture and the page picture, triggering a rendering sub-module.

As an embodiment, the network visualization apparatus further includes:

the second acquisition module is used for acquiring the request data information set from a background server of the management platform;

and the storage module is used for storing the request data information set into the session storage.

As an embodiment, the network visualization apparatus further includes:

the third acquisition module is used for acquiring the request data information in a kernel module mode;

and the sending module is used for sending the request data information to a background server of the management platform.

The invention also provides a network visualization device, comprising:

the receiving module is used for receiving the request data information between the clients;

the second judging module is used for judging whether the same request data information exists or not;

the discarding module is used for discarding the request data information if the same request data information exists in the background server;

the third judging module is used for judging whether the service access client and the service providing client corresponding to the request data information are in the micro-isolation control client range or not if the same request data information does not exist in the background server;

and the recording module is used for recording the request data information to form a request data information set if the service access client and the service providing client corresponding to the request data information are in the range of the client controlled by micro isolation.

Optionally, the network visualization device further includes:

and the ordering module is used for ordering the request data information in the request data information set according to the outbound direction.

The client provided by the embodiment of the present invention is introduced below, and the client described below and the network visualization method described above may be referred to correspondingly.

Fig. 11 is a block diagram of a client according to an embodiment of the present invention, including:

a memory 11 for storing a computer program;

a processor 12 for implementing the steps of any of the embodiment network visualization methods described above when executing a computer program.

The number of clients the invention is not limited, as the case may be.

The following describes a computer readable storage medium provided in an embodiment of the present invention, where the computer readable storage medium described below and the network visualization method described above may be referred to correspondingly.

A computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of any of the network visualization methods of the embodiments described above.

In this specification, each embodiment is described in a progressive manner, and each embodiment is mainly described in a different point from other embodiments, so that the same or similar parts between the embodiments are referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant points refer to the description of the method section.

Those of skill would further appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both, and that the various illustrative elements and steps are described above generally in terms of functionality in order to clearly illustrate the interchangeability of hardware and software. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.

The steps of a method or algorithm described in connection with the embodiments disclosed herein may be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two. The software modules may be disposed in random access Memory (Random Access Memory, RAM), memory, read-Only Memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, a removable disk, a CD-ROM (Compact Disc Read-Only Memory), or any other form of storage medium known in the art.

The network visualization method, device, client, system and computer readable storage medium provided by the invention are described in detail above. The principles and embodiments of the present invention have been described herein with reference to specific examples, the description of which is intended only to facilitate an understanding of the method of the present invention and its core ideas. It should be noted that it will be apparent to those skilled in the art that various modifications and adaptations of the invention can be made without departing from the principles of the invention and these modifications and adaptations are intended to be within the scope of the invention as defined in the following claims.

Claims

1. A network visualization method, applied to a client, comprising:

acquiring current request data information;

if the target request data information exists in the request data information set, the request data information set and the page picture are not processed;

Before obtaining the current request data information, the method further comprises the following steps:

2. The network visualization method of claim 1, wherein rendering the page picture comprises:

adding a pointing identifier on the connection line;

generating canvas of the target page picture to obtain the target page picture;

3. The network visualization method of claim 2, further comprising, prior to adding the directional identifier to the connection line:

4. A network visualization method as recited in claim 3, further comprising:

displaying the shadow line when a cursor hovers over the shadow line;

when the cursor leaves the shadow line, the shadow line is hidden.

5. The network visualization method of claim 2, wherein generating, with the browser of the client, an area in which each group of client combinations in the target page picture is located comprises:

6. The network visualization method of claim 5, wherein determining the height of each of the client combinations in the target page picture based on the number of clients in each of the client combinations comprises:

H=（math.ceil（w×agentcount/n））×h；

7. The network visualization method of claim 2, wherein generating the node map for each client in the target page picture comprises:

8. The network visualization method of claim 2, wherein adding a connection between the node graphs corresponding to the target clients within each of the client combinations comprises:

determining the node position of the target client in each client combination;

9. The network visualization method of claim 8, wherein the radian directions of a plurality of the bezier curves are the same within each of the client combinations.

10. The network visualization method of claim 8, wherein prior to determining the node location of the target client within each of the client combinations, further comprising:

11. The network visualization method of claim 10, wherein determining the node location of each of the clients in each of the client combinations based on the start location coordinates of each of the client combinations, the sequence numbers of the clients, the width of the pre-divided columns of pages, the width occupied by each of the clients in each of the client combinations, and the height in which the clients in each of the client combinations are located comprises:

X=mapstartx+（index%(n/w））×w；

Y=mapstarty+（Math.ceil(w×index/n)）×h；

12. The network visualization method of claim 2, wherein adding a directional identifier on the connection line comprises:

13. The network visualization method of claim 2, wherein generating the canvas of the target page picture comprises:

determining the width of the canvas as the width of the page;

the canvas is generated according to the width and the height of the canvas.

14. The network visualization method of claim 2, wherein prior to rendering the page picture using a different region of the target page picture than the page picture, further comprising:

15. A network visualization method as recited in claim 2, wherein the target page picture is a picture in a scalable vector graphics format.

16. The network visualization method of claim 1, wherein before determining whether there is target request data information in the set of request data information that is the same as the current request data information, further comprising:

and storing the request data information set into a session storage.

17. The network visualization method of claim 1, further comprising, after forming the set of requested data information:

ordering the request data information in the request data information set according to the outbound direction;

the outbound direction is the direction when the service access client accesses other clients.

18. The network visualization method of claim 1, wherein before the background server of the management platform receives the request data information between the clients, further comprising:

the client acquires the request data information in a kernel module mode, wherein the kernel module mode is that the request data information is acquired through a kernel layer of the client;

and the client sends the request data information to a background server of a management platform.

19. A network visualization apparatus, comprising:

the processing module is used for updating the request data information set and rendering a page picture if the target request data information does not exist in the request data information set; if the target request data information exists in the request data information set, the request data information set and the page picture are not processed;

And the recording module is used for recording the request data information and forming the request data information set if the service access client and the service providing client corresponding to the request data information are in the range of the micro-isolation controlled client.

20. A client, comprising:

a memory for storing a computer program;

processor for implementing the steps of the network visualization method according to any of claims 1 to 16 and 18 when executing the computer program.

21. A network visualization system, comprising: a management platform and a client according to claim 20;

the management platform is used for providing a request data information set for the client.

22. A computer readable storage medium, characterized in that it has stored thereon a computer program which, when executed by a processor, implements the steps of the network visualization method according to any of claims 1 to 18.