HTML5 graph overlays for application topology

Patent metadata

Field	Value
Publication number	US-9852114-B2
Application number	US-201414307997-A
Country	US
Kind code	B2
Filing date	Jun 18, 2014
Priority date	Jun 18, 2014
Publication date	Dec 26, 2017
Grant date	Dec 26, 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 graph layout manager and 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. Additional information may be rendered in independent layers overlaid on the GUI which a user may selectively activate or de-activate to show or hide, respectively, the additional information. The layers may be generated using extension points exposed via the declarative layout.

First claim

We claim:

1. A method of generating a user interface, the method comprising:
determining positions of a plurality of nodes and a plurality of child elements within the plurality of nodes according to a declarative layout, wherein the nodes and child elements visually represent a topology of virtual computing resources and application components executing thereon, wherein the declarative layout comprises an extension point associated with a first child element of the plurality of child elements;
generating a base layer comprising a first plurality of scalar vector graphics (SVG) elements that renders the plurality of nodes and the plurality of child elements at the determined positions;
identifying one or more layers of information to be overlaid on the base layer;
retrieving supplemental information, from a virtualization component, for each of the one or more layers of information to be overlaid on the base layer, wherein the supplemental information is data associated with the plurality of nodes and application components of the topology;
generating a second layer comprising a second plurality of SVG elements based on the extension point associated with the first child element, the supplemental information, and the identified one or more layers of information; and
rendering, on a display device, a graphical user interface comprising the base layer and the second layer, wherein the second layer is rendered overlaid on the base layer.

2. The method of claim 1 , wherein the extension point comprises a name identifier in an item declaration specifying layout properties of the first child element.

3. The method of claim 1 , wherein the extension point comprises a name identifier in an item declaration of a container element containing the first child element.

4. The method of claim 1 , wherein generating the second layer comprising the second plurality of SVG elements based on the extension point associated with the first child element further comprises:
generating an item declaration that specifies content for the second layer; and
inserting the item declaration into the declarative layout at a position based on the extension point associated with the first child element.

5. The method of claim 1 , wherein the second layer comprises a network layer indicating a communications network connected to at least one node of the plurality of nodes.

6. The method of claim 1 , wherein the second layer comprises a deployment status layer indicating success of deployment of the plurality of nodes and child elements at localized points of the base layer.

7. The method of claim 1 , wherein generating the second layer comprising the second plurality of SVG elements based on the extension point associated with the first child element 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 extension point; and
inserting the document object into a web document.

8. 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:
determining positions of a plurality of nodes and a plurality of child elements within the plurality of nodes according to a declarative layout, wherein the nodes and child elements visually represent a topology of virtual computing resources and application components executing thereon, wherein the declarative layout comprises an extension point associated with a first child element of the plurality of child elements;
generating a base layer comprising a first plurality of scalar vector graphics (SVG) elements that renders the plurality of nodes and the plurality of child elements at the determined positions;
identifying one or more layers of information to be overlaid on the base layer;
retrieving supplemental information, from a virtualization component, for each of the one or more layers of information to be overlaid on the base layer, wherein the supplemental information is data associated with the plurality of nodes and application components of the topology;
generating a second layer comprising a second plurality of SVG elements based on the extension point associated with the first child element, the supplemental information, and the identified one or more layers of information; and
rendering, on a display device, a graphical user interface comprising the base layer and the second layer, wherein the second layer is rendered overlaid on the base layer.

9. The non-transitory computer-readable storage medium of claim 8 , wherein the extension point comprises a name identifier in an item declaration specifying layout properties of the first child element.

10. The non-transitory computer-readable storage medium of claim 8 , wherein the extension point comprises a name identifier in an item declaration of a container element containing the first child element.

11. The non-transitory computer-readable storage medium of claim 8 , wherein the steps for generating the second layer comprising the second plurality of SVG elements based on the extension point associated with the first child element further comprise:
generating an item declaration that specifies content for the second layer; and
inserting the item declaration into the declarative layout at a position based on the extension point associated with the first child element.

12. The non-transitory computer-readable storage medium of claim 8 , wherein the second layer comprises a network layer indicating a communications network connected to at least one node of the plurality of nodes.

13. The non-transitory computer-readable storage medium of claim 8 , wherein the second layer comprises a deployment status layer indicating success of deployment of the plurality of nodes and child elements at localized points of the base layer.

14. The non-transitory computer-readable storage medium of claim 8 , wherein the steps for generating the second layer comprising the second plurality of SVG elements based on the extension point associated with the first child element further comprise:
instantiating a document object comprising an SVG element;
modifying a position attribute and a size attribute of the document object based on the extension point; and
inserting the document object into a web document.

15. A computer system for generating a user interface, comprising:
a display device; and
a processor programmed to carry out the steps of:
determining positions of a plurality of nodes and a plurality of child elements within the plurality of nodes according to a declarative layout, wherein the nodes and child elements visually represent a topology of virtual computing resources and application components executing thereon, wherein the declarative layout comprises an extension point associated with a first child element of the plurality of child elements;
generating a base layer comprising a first plurality of scalar vector graphics (SVG) elements that renders the plurality of nodes and the plurality of child elements at the determined positions;
identifying one or more layers of information to be overlaid on the base layer;
retrieving supplemental information, from a virtualization component, for each of the one or more layers of information to be overlaid on the base layer, wherein the supplemental information is data associated with the plurality of nodes and application components of the topology;

generating a second layer comprising a second plurality of SVG elements based on the extension point associated with the first c

Assignees

• Vmware Inc

Inventors

• Wang Jialiang
• Mangtani Komal Nitin
• Jalagam Sesh

Classifications

• G06F40/106 Primary

  Display of layout of documents; Previewing · CPC title

• G06F17/2247 Primary

  Physics · mapped topic

• G06F17/212

  Physics · mapped topic

• G06F40/143

  Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD] · CPC title