Horizon (Openstack Dashboard) Plugin – Stack Designer UI for Instance Deployments

Registered by Pradeep Kumar

The Stack Designer can be viewed as a user canvas for developing the Instance designs with various OpenStack entities and deploying them using HEAT engine. The front end is a GUI that will be converted to a HEAT Template and deployed.

Front-end UI has a django client that interacts with:
     • Glance Client for image list
     • Cinder Client for volume list
     • Neutron Client for network list
     • Keystone Client for authentication
     • HEAT client for deployment

This feature acts as unified dashboard for deploying instances and associated resources. Notable features are
     • Create the design with drag and drop UI elements
     • Add all resources in a single place (Existing or New resource)
     • Edit design to suit the requirement
     • Launch or Save for later
     • Export the designs to HEAT templates that can be deployed from Stacks UI
     • No hassle in back and forth transitions of individual panels

Blueprint information

Pradeep Kumar
Needs approval
Pradeep Kumar
Series goal:
Not started
Milestone target:
Completed by
Rob Cresswell

Related branches



[lblanchard 07-14-2014] Hi Pradeep, Do you have any wireframes/designs to share around the UI addition? I think my main question at this point would be, are we working this into the Orchestration section of Horizon as it exists currently? I think Horizon users would benefit from these features, but I don't think it should be it's own UI in my opinion. I'm just trying to get a clearer picture on the UI additions here.


[pradeep-av 07-21-2014] Hi Liz, I have put together a set of images that should clarify the positioning of the UI. I agree that it should be along with the Orchestration->Stacks page. I have a zipped content of a few images at https://www.dropbox.com/s/mjfzjndf6vszf5w/Stack_designer.zip. Please review and provide your comments. On the implementation part, I am working on leveraging the Horizon's best practices along with secure javascript code for animations.


[lblanchard 07-28-2014] Thanks for the link, Pradeep. I really like the concept of allowing users to visually build out their stacks. I have some feedback that I’d like to see addressed in future design concepts.

1) The current designs show the user building out a stack…but it doesn’t look like there’s a way to save the stack. Does the user just have the option to launch what they’ve built? Or is there an idea around allowing for saving without actually Launching?

[pradeep-av 08-15-2014] There is a save and load option available for the user. Right now the plan is to support saving/loading designs created using this UI. Future versions may include decoding any HEAT Templates (This is for future scope as it requires lots of error handling)

2) I think the inventory section should be labeled.

[pradeep-av 08-15-2014] Definitely. The wireframes are crude representation of actual implementation. I will post an updated mock up using devstack-Horizon,with little more detailed descriptions.

3) How would this design scale for a large stack? Could the user zoom in/out? Could they pan the design area?

[pradeep-av 08-15-2014] That actually depends on certain things. Although zoom option will be good, the instances have count parameters like in Launch instances and that must suffice for scale systems. However the zooming option will be good in any case, and I will try to implement it.

4) What would loading a stack do? Would the user select from the list of previously launched stacks? Would this be a modal?

[pradeep-av 08-15-2014] Initially I was thinking of Load Design as counter part of Save. There are three actions Save/Load designs which are not launched and Load the deployed stacks for updating. But the terminologies for the actions can be finalized during deeper UX reviews. This would be a modal.

5) What are presets?

[pradeep-av 08-15-2014] Presets are standard templates with predefined topology and structures. This would be generic based on market trends.

6) I think it would be nice to have some details about the instances/networks/etc in the design shown to the user. Maybe things like name and flavor?

[pradeep-av 08-15-2014] Yes, these will be along with the properties as they are editable. We can include them as a popover on hovering over the elements to avoid clutter.

7) How does the user connect things in the stack?

[pradeep-av 08-15-2014] Unlike the resources view in the stack topology view (current UI) this will be cloud resources and not 'HEAT' resources. So the connections would be via network interfaces. Structured deployment resource will be a drag and drop property.

8) How does the user switch from the designer to the stacks list?

[pradeep-av 08-15-2014] Browser navigation plus a back button ( this will include handling auto saves of designs)

9) In the stacks list, what is the difference between Create Stack and Design Stack? Shouldn’t these be the same action just allowing the user to do the action visually vs. via forms?

[pradeep-av 08-15-2014] That's right but the representation of resources is of different context as mentioned in answer for (7). So initially these two need to be separate actions.

10) I think there needs to be a clear “Selected” state that shows which image/instance/network has been selected in the design.

[pradeep-av 08-15-2014] I dont follow this question regarding state, however I thing the next set of wireframes must clear the gaps.

[pradeep-av 08-15-2014] I apologize for the delay in response. Please find my answers in line

[tsufiev 30-03-2016] I suggest you to talk to Drago Rosson from Rackspace, who has been working on his Hot Builder UI.


Work Items

This blueprint contains Public information 
Everyone can see this information.