HTML5 graph layout for application topology

Patent metadata

Field	Value
Publication number	US-9836284-B2
Application number	US-201414307963-A
Country	US
Kind code	B2
Filing date	Jun 18, 2014
Priority date	Jun 18, 2014
Publication date	Dec 5, 2017
Grant date	Dec 5, 2017

Abstract

A user may create a blueprint that specifies an application's architecture, including virtual machines (VM) nodes, software services and application components within the VM nodes. To do so, the user manipulates a graphical user interface (GUI) rendered by a Scalable Vector Graphics (SVG) layout engine. The SVG layout engine parses declarative layout configurations and translates the declarative layout into SVG elements that visually represent the blueprint. The SVG layout engine dynamically calculates absolute positions and sizes of child elements based on the declarative layout.

First claim

We claim:

1. A method of generating a user interface, the method comprising:
retrieving structural information comprising a topology of virtual computing resources and application components executing thereon, wherein the structural information specifies a plurality of nodes corresponding to the virtual computing resources and a plurality of child elements of the plurality of nodes;
generating a declarative layout associated with the plurality of child elements of the plurality of nodes according to the structural information, wherein the declarative layout is a text description of the structural information associated with the plurality of child elements;
translating the declarative layout into a plurality of scalar vector graphics (SVG) elements that renders the plurality of child elements based on the declarative layout, comprising:
parsing the text description to determine positional and sizing information for the plurality of child elements based on the declarative layout relative to the plurality of nodes; and

rendering, on a display device, a graphical user interface comprising the plurality of SVG elements, wherein the graphical user interface visually represents the topology.

2. The method of claim 1 , further comprising:
determining absolute positions and sizes for each child element of the plurality of nodes based on the declarative layout, wherein the plurality of SVG elements are modified to specify the determined absolute positions and sizes.

3. The method of claim 1 , further comprising:
generating a plurality of SVG container elements associated with the plurality of nodes, wherein the plurality of SVG elements are inserted as children of the plurality of SVG container elements.

4. The method of claim 1 , further comprising:
determining the declarative layout specifies a directional layout for a first set of child elements in sequence, wherein the directional layout is selected from a group consisting of a vertical layout and a horizontal layout.

5. The method of claim 1 , further comprising:
detecting a change to the topology of virtual computing resources and application components executing thereon;
modifying the structural information based on the detected change to the topology; and
modifying at least one of the plurality of SVG elements based on the modified structural information.

6. The method of claim 1 , wherein translating the declarative layout into the plurality of scalar vector graphics (SVG) elements that renders the plurality of child elements based on the declarative layout further comprises:
instantiating a document object comprising an SVG element;
modifying a position attribute and a size attribute of the document object based on the declarative layout; and
inserting the document object into a web document.

7. The method of claim 1 , wherein translating the declarative layout into the plurality of scalar vector graphics (SVG) elements that renders the plurality of child elements based on the declarative layout further comprises:
generating markup text defining the plurality of SVG elements having a position attribute and a size attribute, wherein the position attribute comprises an absolute position calculated based on the declarative layout.

8. The method of claim 1 , wherein the declarative layout comprises a data structure formatted in a JavaScript Object Notation (JSON) format.

9. A non-transitory computer-readable storage medium comprising instructions that, when executed in a computing device, generate a user interface, by performing the steps of:
retrieving structural information comprising a topology of virtual computing resources and application components executing thereon, wherein the structural information specifies a plurality of nodes corresponding to the virtual computing resources and a plurality of child elements of the plurality of nodes;
generating a declarative layout associated with the plurality of child elements of the plurality of nodes according to the structural information, wherein the declarative layout is a text description of the structural information associated with the plurality of child elements;
translating the declarative layout into a plurality of scalar vector graphics (SVG) elements that renders the plurality of child elements based on the declarative layout, comprising:
parsing the text description to determine positional and sizing information for the plurality of child elements based on the declarative layout relative to the plurality of nodes; and

rendering, on a display device, a graphical user interface comprising the plurality of SVG elements, wherein the graphical user interface visually represents the topology.

10. The non-transitory computer-readable storage medium of claim 9 , wherein the steps further comprise:
determining absolute positions and sizes for each child element of the plurality of nodes based on the declarative layout, wherein the plurality of SVG elements are modified to specify the determined absolute positions and sizes.

11. The non-transitory computer-readable storage medium of claim 9 , wherein the steps further comprise:
generating a plurality of SVG container elements associated with the plurality of nodes, wherein the plurality of SVG elements are inserted as children of the plurality of SVG container elements.

12. The non-transitory computer-readable storage medium of claim 9 , wherein the steps further comprise:
determining the declarative layout specifies a directional layout for a first set of child elements in sequence, wherein the directional layout is selected from a group consisting of a vertical layout and a horizontal layout.

13. The non-transitory computer-readable storage medium of claim 9 , wherein the steps further comprise:
detecting a change to the topology of virtual computing resources and application components executing thereon;
modifying the structural information based on the detected change to the topology; and
modifying at least one of the plurality of SVG elements based on the modified structural information.

14. The non-transitory computer-readable storage medium of claim 9 , wherein translating the declarative layout into the plurality of scalar vector graphics (SVG) elements that renders the plurality of child elements based on the declarative layout further comprises:
instantiating a document object comprising an SVG element;
modifying a position attribute and a size attribute of the document object based on the declarative layout; and
inserting the document object into a web document.

15. The non-transitory computer-readable storage medium of claim 9 , wherein translating the declarative layout into the plurality of scalar vector graphics (SVG) elements that renders the plurality of child elements based on the declarative layout further comprises:
generating markup text defining the plurality of SVG elements having a position attribute and a size attribute, wherein the position attribute comprises an absolute position calculated based on the declarative layout.

16. The non-transitory computer-readable storage medium of claim 9 , wherein the declarative layout comprises a data structure formatted in a JavaScript Object Notation (JSON) format.

17. A computer system for generating a user interface, comprising:
a display device; and
a processor programmed to carry out the steps of:
retrieving structural information comprising a topology of virtual computing resources and application components executing thereon, wherein the structural information specifies a plurality of nodes corresponding to the

Assignees

• Vmware Inc

Inventors

• Wang Jialiang
• Mangtani Komal Nitin
• Jalagam Sesh

Classifications

• G06F8/34 Primary

  Graphical or visual programming · CPC title