Jump to: navigation, search

Difference between revisions of "Merlin/PoC"

(Draft UI concept for PoC (visual editing of HOT templates))
(Draft UI concept for PoC (visual editing of HOT templates))
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
== Draft UI concept for PoC (visual editing of HOT templates) ==
 
== Draft UI concept for PoC (visual editing of HOT templates) ==
 +
To get familiar with HOT templates editing you can read either [http://docs.openstack.org/developer/heat/template_guide/hot_guide.html the guide] or more comprehensive [http://docs.openstack.org/developer/heat/template_guide/hot_spec.html#hot-spec specification]. I've tried to address the most basic cases for now, leaving behind:
 +
* parameters constraints editing (frankly speaking, I don't yet imagine how it should be done);
 +
* editing the type of link between properties and parameters, outputs and attributes;
 +
* joining the parameters into parameter groups (simple enough);
 +
* supporting intrinsic functions like '''str_replace''' or '''replace_facade''' (should be visually edited at all?).
 +
:comment [[User:Liz Blanchard|lblanchard]] 18:40, 22 August 2014 (UTC) I’m missing where these widgets fit into the overall Horizon application. Will this integrate with the Stacks section where the Heat UI work has been done?
 +
::comment [[User:Timur Sufiev|Timur Sufiev]] ([[User talk:Timur Sufiev|talk]]) 14:07, 26 August 2014 (UTC) Currently there is 'Topology' tab in each Stack Entry details - it shows more or less deployed stack with only Heat resources being shown, while the proposed HOT editor shows also Parameter and Output entities. I suspect it will confusing for users to have 2 graphical views for Heat - a topology view and template view, so they should eventually converge. Although deployed Heat stack is merely a HOT template with parameters bound to actual values and resources' attributes already calculated, HOT editor provides too much info to use it as is in the Topology tab. One of possible solutions I see here is provide Zoom In/Zoom Out feature, making HOT editor view look like Topology view when zoomed out. What do you think about it?
 +
:::comment [[User:Liz Blanchard|lblanchard]] 18:30, 29 August 2014 (UTC) This definitely makes sense to me. I'm glad to hear about any plans or ideas around making sure these two interfaces work well together.
 +
 
=== Adding a Resource entity ===
 
=== Adding a Resource entity ===
 
[[File:merlin_poc_1.png|Resource entity]]
 
[[File:merlin_poc_1.png|Resource entity]]
 +
:comment [[User:Liz Blanchard|lblanchard]] 18:40, 22 August 2014 (UTC) A few things...1) It’s not a very common practice to use right-click in a web UI and I think we should have these actions available always at the top of the canvas rather than buried in a right-click menu. 2) Should instance type be a drop down?
 +
::comment [[User:Timur Sufiev|Timur Sufiev]] ([[User talk:Timur Sufiev|talk]]) 14:07, 26 August 2014 (UTC)
 +
# To me the most obvious alternative to using context menus is a sidebar with accordion - with Resources, Parameters, Parameters Groups and Outputs section. To add an Entity to the Canvas user should drag-and-drop an entity there from the sidebar. I've recently run into very interesting demo of the analogous proprietary [https://www.youtube.com/watch?v=YsimXDFqSRM#t=510 HOT builder] made by IBM, presented at Atlanta Summit - that's how they did it (among with a dozen of other super-cool things). In case one side-bar is enough, there will still be enough space for canvas on modern desktops (given that Horizon left side-bar also eats some space).
 +
# No, the instance type should not be a drop-down, at least at template composing stage - because the available choices depend on a particular environment in which a template is deployed, which may differ from the environment in which template is composed. The difference between template compose and deploy phase should be elaborated a bit, but I didn't want to think about right from the beginning, because it seems to me very Heat-specific, while the purpose of the PoC is making a solution suitable for other projects like Murano or Mistral using HOT templates as an example.
 +
:::comment [[User:Liz Blanchard|lblanchard]] 18:30, 29 August 2014 (UTC) I like the idea of a sidebar for the user to choose from. It can be something that the user can show or hide based on if they need it. This would allow the entire canvas to be shown without the user losing real estate if they need to whole screen.
  
 
=== Adding Parameter entity ===
 
=== Adding Parameter entity ===
 
[[File:merlin_poc_2.png|Parameter entity]]
 
[[File:merlin_poc_2.png|Parameter entity]]
 +
:comment [[User:Liz Blanchard|lblanchard]] 18:40, 22 August 2014 (UTC) What are the interactions the user needs to take to create a connection on the screen? Do they have to select the resource in some way and choose an action? Do they drag and drop?
 +
::comment [[User:Timur Sufiev|Timur Sufiev]] ([[User talk:Timur Sufiev|talk]]) 14:07, 26 August 2014 (UTC) Is it okay to use right click -> context menu here? There are at least 2 actions available for a Parameter entity on canvas: 1) change some Parameter's properties 2) connect it to some Property. While changing Parameter's properties could be bound to left-click, connecting it to other entity requires either selecting this option via context menu, or pressing a button on a canvas toolbar. What is better?
 +
:::comment [[User:Liz Blanchard|lblanchard]] 18:30, 29 August 2014 (UTC) I'd suggest having a dropdown arrow for a selection menu right on the object itself that would show the user any options they could perform on the object including editing parameters and making connections. This way the user could left click. They right click interaction is not as intuitive in a browser since a lot of times this will only be used for browser functions.
  
 
=== Enhancing Resource entity to display both Properties and Attributes ===
 
=== Enhancing Resource entity to display both Properties and Attributes ===
 
[[File:merlin_poc_3.png|Parameters + Attributes]]
 
[[File:merlin_poc_3.png|Parameters + Attributes]]
 +
:comment [[User:Liz Blanchard|lblanchard]] 18:40, 22 August 2014 (UTC) I like the idea of using an accordion for this design. Would this be sticky and remember the users preference if they refresh the page?
 +
::comment [[User:Timur Sufiev|Timur Sufiev]] ([[User talk:Timur Sufiev|talk]]) 14:07, 26 August 2014 (UTC) Yes, I think it's possible.
  
 
=== Adding Output entity ===
 
=== Adding Output entity ===
 
[[File:merlin_poc_4.png|Output entity]]
 
[[File:merlin_poc_4.png|Output entity]]
 +
:comment [[User:Liz Blanchard|lblanchard]] 18:40, 22 August 2014 (UTC) Again, how does the user create these connections?
 +
::comment [[User:Timur Sufiev|Timur Sufiev]] ([[User talk:Timur Sufiev|talk]]) 14:07, 26 August 2014 (UTC) Same as in comment for Parameter entity

Latest revision as of 17:34, 29 August 2014

Draft UI concept for PoC (visual editing of HOT templates)

To get familiar with HOT templates editing you can read either the guide or more comprehensive specification. I've tried to address the most basic cases for now, leaving behind:

  • parameters constraints editing (frankly speaking, I don't yet imagine how it should be done);
  • editing the type of link between properties and parameters, outputs and attributes;
  • joining the parameters into parameter groups (simple enough);
  • supporting intrinsic functions like str_replace or replace_facade (should be visually edited at all?).
comment lblanchard 18:40, 22 August 2014 (UTC) I’m missing where these widgets fit into the overall Horizon application. Will this integrate with the Stacks section where the Heat UI work has been done?
comment Timur Sufiev (talk) 14:07, 26 August 2014 (UTC) Currently there is 'Topology' tab in each Stack Entry details - it shows more or less deployed stack with only Heat resources being shown, while the proposed HOT editor shows also Parameter and Output entities. I suspect it will confusing for users to have 2 graphical views for Heat - a topology view and template view, so they should eventually converge. Although deployed Heat stack is merely a HOT template with parameters bound to actual values and resources' attributes already calculated, HOT editor provides too much info to use it as is in the Topology tab. One of possible solutions I see here is provide Zoom In/Zoom Out feature, making HOT editor view look like Topology view when zoomed out. What do you think about it?
comment lblanchard 18:30, 29 August 2014 (UTC) This definitely makes sense to me. I'm glad to hear about any plans or ideas around making sure these two interfaces work well together.

Adding a Resource entity

Resource entity

comment lblanchard 18:40, 22 August 2014 (UTC) A few things...1) It’s not a very common practice to use right-click in a web UI and I think we should have these actions available always at the top of the canvas rather than buried in a right-click menu. 2) Should instance type be a drop down?
comment Timur Sufiev (talk) 14:07, 26 August 2014 (UTC)
  1. To me the most obvious alternative to using context menus is a sidebar with accordion - with Resources, Parameters, Parameters Groups and Outputs section. To add an Entity to the Canvas user should drag-and-drop an entity there from the sidebar. I've recently run into very interesting demo of the analogous proprietary HOT builder made by IBM, presented at Atlanta Summit - that's how they did it (among with a dozen of other super-cool things). In case one side-bar is enough, there will still be enough space for canvas on modern desktops (given that Horizon left side-bar also eats some space).
  2. No, the instance type should not be a drop-down, at least at template composing stage - because the available choices depend on a particular environment in which a template is deployed, which may differ from the environment in which template is composed. The difference between template compose and deploy phase should be elaborated a bit, but I didn't want to think about right from the beginning, because it seems to me very Heat-specific, while the purpose of the PoC is making a solution suitable for other projects like Murano or Mistral using HOT templates as an example.
comment lblanchard 18:30, 29 August 2014 (UTC) I like the idea of a sidebar for the user to choose from. It can be something that the user can show or hide based on if they need it. This would allow the entire canvas to be shown without the user losing real estate if they need to whole screen.

Adding Parameter entity

Parameter entity

comment lblanchard 18:40, 22 August 2014 (UTC) What are the interactions the user needs to take to create a connection on the screen? Do they have to select the resource in some way and choose an action? Do they drag and drop?
comment Timur Sufiev (talk) 14:07, 26 August 2014 (UTC) Is it okay to use right click -> context menu here? There are at least 2 actions available for a Parameter entity on canvas: 1) change some Parameter's properties 2) connect it to some Property. While changing Parameter's properties could be bound to left-click, connecting it to other entity requires either selecting this option via context menu, or pressing a button on a canvas toolbar. What is better?
comment lblanchard 18:30, 29 August 2014 (UTC) I'd suggest having a dropdown arrow for a selection menu right on the object itself that would show the user any options they could perform on the object including editing parameters and making connections. This way the user could left click. They right click interaction is not as intuitive in a browser since a lot of times this will only be used for browser functions.

Enhancing Resource entity to display both Properties and Attributes

Parameters + Attributes

comment lblanchard 18:40, 22 August 2014 (UTC) I like the idea of using an accordion for this design. Would this be sticky and remember the users preference if they refresh the page?
comment Timur Sufiev (talk) 14:07, 26 August 2014 (UTC) Yes, I think it's possible.

Adding Output entity

Output entity

comment lblanchard 18:40, 22 August 2014 (UTC) Again, how does the user create these connections?
comment Timur Sufiev (talk) 14:07, 26 August 2014 (UTC) Same as in comment for Parameter entity