Commit f2a517de by Őry Máté

Merge branch 'master' into acl

Conflicts:
	circle/dashboard/urls.py
	circle/dashboard/views.py
	circle/vm/models.py
parents 6b1e9548 34b69cf4
from django.contrib.auth.models import User
from django.db.models import (CharField, DateTimeField, ForeignKey, TextField)
from django.utils import timezone
from django.utils.translation import ugettext_lazy as _
from model_utils.models import TimeStampedModel
def activitycontextimpl(act):
try:
yield act
except Exception as e:
act.finish(str(e))
raise e
else:
act.finish()
class ActivityModel(TimeStampedModel):
activity_code = CharField(max_length=100, verbose_name=_('activity code'))
parent = ForeignKey('self', blank=True, null=True)
task_uuid = CharField(blank=True, max_length=50, null=True, unique=True,
help_text=_('Celery task unique identifier.'),
verbose_name=_('task_uuid'))
user = ForeignKey(User, blank=True, null=True, verbose_name=_('user'),
help_text=_('The person who started this activity.'))
started = DateTimeField(verbose_name=_('started at'),
blank=True, null=True,
help_text=_('Time of activity initiation.'))
finished = DateTimeField(verbose_name=_('finished at'),
blank=True, null=True,
help_text=_('Time of activity finalization.'))
result = TextField(verbose_name=_('result'), blank=True, null=True,
help_text=_('Human readable result of activity.'))
class Meta:
abstract = True
def finish(self, result=None):
if not self.finished:
self.finished = timezone.now()
self.result = result
self.save()
/*!
* Slider for Bootstrap
*
* Copyright 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
&.slider-horizontal {
width: 210px;
height: @baseLineHeight;
.slider-track {
height: @baseLineHeight/2;
width: 100%;
margin-top: -@baseLineHeight/4;
top: 50%;
left: 0;
}
.slider-selection {
height: 100%;
top: 0;
bottom: 0;
}
.slider-handle {
margin-left: -@baseLineHeight/2;
margin-top: -@baseLineHeight/4;
&.triangle {
border-width: 0 @baseLineHeight/2 @baseLineHeight/2 @baseLineHeight/2;
width: 0;
height: 0;
border-bottom-color: #0480be;
margin-top: 0;
}
}
}
&.slider-vertical {
height: 210px;
width: @baseLineHeight;
.slider-track {
width: @baseLineHeight/2;
height: 100%;
margin-left: -@baseLineHeight/4;
left: 50%;
top: 0;
}
.slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider-handle {
margin-left: -@baseLineHeight/4;
margin-top: -@baseLineHeight/2;
&.triangle {
border-width: @baseLineHeight/2 0 @baseLineHeight/2 @baseLineHeight/2;
width: 1px;
height: 1px;
border-left-color: #0480be;
margin-left: 0;
}
}
}
input {
display: none;
}
.tooltip-inner {
white-space: nowrap;
}
}
.slider-track {
position: absolute;
cursor: pointer;
#gradient > .vertical(#f5f5f5, #f9f9f9);
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
.border-radius(@baseBorderRadius);
}
.slider-selection {
position: absolute;
#gradient > .vertical(#f9f9f9, #f5f5f5);
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.box-sizing(border-box);
.border-radius(@baseBorderRadius);
}
.slider-handle {
position: absolute;
width: @baseLineHeight;
height: @baseLineHeight;
#gradient > .vertical(#149bdf, #0480be);
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
opacity: 0.8;
border: 0px solid transparent;
&.round {
.border-radius(@baseLineHeight);
}
&.triangle {
background: transparent none;
}
}
\ No newline at end of file
/*!
* Slider for Bootstrap
*
* Copyright 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
}
.slider.slider-horizontal {
width: 210px;
height: 20px;
}
.slider.slider-horizontal .slider-track {
height: 10px;
width: 100%;
margin-top: -5px;
top: 50%;
left: 0;
}
.slider.slider-horizontal .slider-selection {
height: 100%;
top: 0;
bottom: 0;
}
.slider.slider-horizontal .slider-handle {
margin-left: -10px;
margin-top: -5px;
}
.slider.slider-horizontal .slider-handle.triangle {
border-width: 0 10px 10px 10px;
width: 0;
height: 0;
border-bottom-color: #0480be;
margin-top: 0;
}
.slider.slider-vertical {
height: 210px;
width: 20px;
}
.slider.slider-vertical .slider-track {
width: 10px;
height: 100%;
margin-left: -5px;
left: 50%;
top: 0;
}
.slider.slider-vertical .slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider.slider-vertical .slider-handle {
margin-left: -5px;
margin-top: -10px;
}
.slider.slider-vertical .slider-handle.triangle {
border-width: 10px 0 10px 10px;
width: 1px;
height: 1px;
border-left-color: #0480be;
margin-left: 0;
}
.slider input {
display: none;
}
.slider .tooltip-inner {
white-space: nowrap;
}
.slider-track {
position: absolute;
cursor: pointer;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider-selection {
position: absolute;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5);
background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5);
background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider-handle {
position: absolute;
width: 20px;
height: 20px;
background-color: #0e90d2;
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(to bottom, #149bdf, #0480be);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
opacity: 0.8;
border: 0px solid transparent;
}
.slider-handle.round {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.slider-handle.triangle {
background: transparent none;
}
/* custom */
.slider-handle, .slider-handle:hover {
background-color: #3071a9;
opacity: 1;
width: 8px;
height: 26px;
margin-top: -4px!important;
margin-left: -6px !important;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
text-shadow: 0 1px 0 #fff;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9));
background-image: -webkit-linear-gradient(top, #428bca, 0%, #3071a9, 100%);
background-image: -moz-linear-gradient(top, #428bca 0%, #3071a9 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
background-repeat: repeat-x;
border-color: #2d6ca2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
}
.slider-handle:hover {
background: #428bca;
background-image: none;
border-color: #2d6ca2;
}
.slider-track, .slider-selection {
height: 20px !important;
background: #ccc;
background: -webkit-linear-gradient(top, #bbb, #ddd);
background: -moz-linear-gradient(top, #bbb, #ddd);
background: linear-gradient(top, #bbb, #ddd);
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #aaa;
}
.slider-selection {
background-color: #8DCA09;
background: -webkit-linear-gradient(top, #8DCA09, #72A307);
background: -moz-linear-gradient(top, #8DCA09, #72A307);
background: linear-gradient(top, #8DCA09, #72A307);
border-color: #496805;
}
.vm-slider {
width: 300px;
}
.output {
padding-left: 10px;
font-weight: bold;
}
$(function () { $(function () {
$('.vm-create').click(function(e) {
$.ajax({
type: 'GET',
url: '/dashboard/vm/create/',
success: function(data) {
$('body').append(data);
vmCreateLoaded();
addSliderMiscs();
$('#vm-create-modal').modal('show');
$('#vm-create-modal').on('hidden.bs.modal', function() {
$('#vm-create-modal').remove();
});
}
});
return false;
});
$('[href=#vm-graph-view]').click(function (e) { $('[href=#vm-graph-view]').click(function (e) {
$('#vm-list-view').hide(); $('#vm-list-view').hide();
$('#vm-graph-view').show(); $('#vm-graph-view').show();
...@@ -18,26 +34,31 @@ $(function () { ...@@ -18,26 +34,31 @@ $(function () {
$('[title]').tooltip(); $('[title]').tooltip();
$(':input[title]').tooltip({trigger: 'focus', placement: 'auto right'}); $(':input[title]').tooltip({trigger: 'focus', placement: 'auto right'});
$(".knob").knob(); $(".knob").knob();
$("[data-slider]")
.each(function () { if (window.location.hash)
var input = $(this); $("a[href=" + window.location.hash +"]").tab('show');
$("<span>")
.addClass("output")
.html($(this).val())
.insertAfter(input);
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(3));
});
$("[data-mark]")
.each(function () {
var value=$(this).attr('data-mark').parseFloat();
}); addSliderMiscs();
if (window.location.hash)
$("a[href=" + window.location.hash +"]").tab('show');
}); });
function addSliderMiscs() {
$('.vm-slider').each(function() {
$("<span>").addClass("output").html($(this).val()).insertAfter($(this));
});
$('.vm-slider').slider()
.on('slide', function(e) {
$(this).val(e.value);
$(this).parent('div').nextAll("span").html(e.value)
});
refreshSliders();
}
// ehhh
function refreshSliders() {
$('.vm-slider').each(function() {
$(this).val($(this).slider().data('slider').getValue());
$(this).parent('div').nextAll("span").html($(this).val());
});
}
...@@ -15,9 +15,8 @@ ...@@ -15,9 +15,8 @@
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="{{ STATIC_URL }}dashboard/js/jquery.knob.js"></script> <script src="{{ STATIC_URL }}dashboard/js/jquery.knob.js"></script>
<link href="{{ STATIC_URL }}dashboard/loopj-jquery-simple-slider-fa64f59/css/simple-slider.css" rel="stylesheet"> <script src="{{ STATIC_URL}}dashboard/bootstrap-slider/bootstrap-slider.js"></script>
<script src="{{ STATIC_URL }}dashboard/loopj-jquery-simple-slider-fa64f59/js/simple-slider.min.js"></script> <link rel="stylesheet" href="{{ STATIC_URL }}dashboard/bootstrap-slider/slider.css"/>
<link href="{{ STATIC_URL }}dashboard/dashboard.css" rel="stylesheet"> <link href="{{ STATIC_URL }}dashboard/dashboard.css" rel="stylesheet">
<script src="{{ STATIC_URL }}dashboard/dashboard.js"></script> <script src="{{ STATIC_URL }}dashboard/dashboard.js"></script>
</head> </head>
...@@ -39,9 +38,6 @@ ...@@ -39,9 +38,6 @@
</div> <!-- /container --> </div> <!-- /container -->
</body> </body>
<script>
{% block extra_js %} {% block extra_js %}
{% endblock %} {% endblock %}
</script>
</html> </html>
...@@ -15,51 +15,43 @@ ...@@ -15,51 +15,43 @@
<div class="list-group" id="vm-list-view"> <div class="list-group" id="vm-list-view">
{% for i in instances %} {% for i in instances %}
<a href="{{ i.get_absolute_url }}" class="list-group-item"> <a href="{{ i.get_absolute_url }}" class="list-group-item">
<i class="icon-play-sign"></i> {{ i.name }} <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div> <i class="icon-{% if i.state == "RUNNING" %}play-sign{% else %}pause{% endif %}"></i> {{ i.name }} <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
</a> </a>
{% endfor %} {% endfor %}
<a href="vm/443" class="list-group-item">
<i class="icon-play-sign"></i> ALMA <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-play-sign"></i> ALMA <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-play-sign"></i> ALMA <div class="pull-right"><i class="icon-star text-primary" title="Mark as favorite."></i></div>
</a>
<a href="#" class="list-group-item">
<i class="icon-off"></i> ALMA <div class="pull-right"><i class="icon-star-empty text-muted"></i></div>
</a>
<div href="#" class="list-group-item list-group-footer"> <div href="#" class="list-group-item list-group-footer">
<div class="row"> <div class="row">
<div class="col-sm-6 input-group input-group-sm"> <div class="col-sm-6 col-xs-6 input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search..." /> <input type="text" class="form-control" placeholder="Search..." />
<div class="input-group-btn"> <div class="input-group-btn">
<button type="submit" class="form-control btn btn-primary" title="search"><i class="icon-search"></i></button> <button type="submit" class="form-control btn btn-primary" title="search"><i class="icon-search"></i></button>
</div> </div>
</div> </div>
<div class="col-sm-6 text-right"> <div class="col-sm-6 text-right">
<a class="btn btn-primary btn-xs" href="{% url "dashboard.views.vm-list" %}"><i class="icon-chevron-sign-right"></i> <strong>13</strong> more </a> {% if more_instances > 0 %}
<a class="btn btn-success btn-xs"><i class="icon-plus-sign"></i> new </a> <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.vm-list" %}">
<i class="icon-chevron-sign-right"></i> <strong>{{ more_instances }}</strong> more
</a>
{% endif %}
<a class="btn btn-success btn-xs vm-create" href="{% url "dashboard.views.vm-create" %}"><i class="icon-plus-sign"></i> new </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="panel-body" id="vm-graph-view" style="display: none"> <div class="panel-body" id="vm-graph-view" style="display: none">
<p class="pull-right"> <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-width="100" data-height="100" data-readOnly="true" value="22"></p> <p class="pull-right"> <input class="knob" data-fgColor="chartreuse" data-thickness=".4" data-max="10" data-width="100" data-height="100" data-readOnly="true" value="{{ instances|length|add:more_instances }}"></p>
<p><span class="bigbig"><big>13</big> running </span> <p><span class="bigbig"><big>{{ running_vm_num }}</big> running </span>
<ul class="list-inline"> <ul class="list-inline">
<li class="label label-success"><i class="icon-play-sign"></i> szilva</li> {% for vm in running_vms %}
<li class="label label-success"><i class="icon-play-sign"></i> korte</li> <li class="label label-success"><i class="icon-play-sign"></i> {{ vm.name}}</li>
<li class="label label-success"><i class="icon-play-sign"></i> cseresznye</li> {% endfor %}
</ul> </ul>
</p> </p>
<p class="big text-warning"><big>10</big> stopped</p> <p class="big text-warning"><big>{{ stopped_vm_num }}</big> stopped</p>
<p>Total: $3000 </p> <p>Total: $3000 </p>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="text-right"> <div class="text-right">
<a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> <strong>13</strong> more </a> <a href="{% url "dashboard.views.vm-list" %}" class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> <strong>{{ instances|length|add:more_instances }}</strong> machines total</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -28,6 +28,8 @@ ...@@ -28,6 +28,8 @@
</div> </div>
</div> </div>
</div> </div>
{% endblock %}
{% block extra_js %}
<script src="{{ STATIC_URL }}dashboard/vm-create.js"></script>
{% endblock %} {% endblock %}
<div class="modal fade" id="vm-create-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{{ box_title }}</h4>
</div>
<div class="modal-body">
{% include template %}
</div>
<!--<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>-->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
{% extends "dashboard/base.html" %}
{% block content %}
<div class="body-content">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="no-margin">
{{ box_title }}
</h3>
</div>
<div class="panel-body">
{% include template %}
</div>
</div>
{% endblock %}
{% block extra_js %}
{% if template == "dashboard/vm-create.html" %}
<script src="{{ STATIC_URL }}dashboard/vm-create.js"></script>
{% endif %}
{% endblock %}
<style>
.row {
margin-bottom: 15px;
}
</style>
<form method="POST" action="/dashboard/vm/create/">
{% csrf_token %}
<div class="row">
<div class="col-sm-10">
<select class="select form-control" id="vm-create-template-select" name="template-pk">
<option value="-1">Choose a VM template</option>
{% for template in templates %}
<option value="{{ template.pk }}">{{ template.name}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<a class="btn btn-info vm-create-advanced-btn">Advanced <i class="vm-create-advanced-icon icon-caret-down"></i></a>
</div>
<div class="col-sm-5 text-right">
<button id="vm-create-submit" type="submit" class="btn btn-success "><i class="icon-play"></i> Start</button>
</div>
</div>
<div class="vm-create-advanced">
<div class="row">
<div class="col-sm-12">
<h2>Resources</h2>
</div>
{% include "dashboard/vm-detail-resources.html" %}
</div>
<!-- disk -->
<div class="row">
<div class="col-sm-4">
<h2>Disks</h2>
</div>
<div class="col-sm-8" style="padding-top: 3px;">
<div class="js-hidden" style="padding-top: 15px; max-width: 450px;">
<select class="form-control" id="vm-create-disk-add-form" multiple name="disks">
{% for d in disks %}
<option value="{{ d.pk }}">{{ d.name }}</option>
{% endfor %}
</select>
</div>
<div class="no-js-hidden">
<h3 id="vm-create-disk-list">
No disks are added!
</h3>
<h3 id="vm-create-disk-add">
<div class="input-group" style="max-width: 330px;">
<select class="form-control" id="vm-create-disk-add-select">
<!-- options should be copied via js from above -->
</select>
<div class="input-group-btn">
<!--<input type="submit" value="Add to network" class="btn btn-success"/>-->
<a href="#" id="vm-create-disk-add-button" class="btn btn-success"><i class="icon-plus-sign"></i></a>
</div>
</div>
</h3>
</div>
</div>
</div>
<!-- network -->
<div class="row">
<div class="col-sm-4">
<h2>Network</h2>
</div>
<style>
/* temporary inline css for dev */
a.hover-black {
color:white;
}
.hover-black:hover {
color: black /*#d9534f*/;
text-decoration: none;
}
.no-js-hidden {
display: none;
}
</style>
<div class="col-sm-8" style="padding-top: 3px;">
<div class="js-hidden" style="padding-top: 15px; max-width: 450px;">
<h4>Managed networks</h4>
<select class="form-control" id="vm-create-network-add-managed" multiple name="managed-vlans">
{% for v in vlans %}
<option value="{{ v.pk }}">{{ v.name }}</option>
{% endfor %}
</select>
<h4>Unmanaged networks</h4>
<select class="form-control" id="vm-create-network-add-unmanaged" multiple name="unmanaged-vlans">
{% for v in vlans %}
<option value="{{ v.pk }}">{{ v.name }}</option>
{% endfor %}
</select>
</div>
<div class="no-js-hidden">
<h3 id="vm-create-network-list">
Not added to any network!
</h3>
<h3 id="vm-create-network-add">
<div class="input-group" style="max-width: 330px;">
<select class="form-control" id="vm-create-network-add-select">
<!-- options should be copied via js from above -->
</select>
<span class="input-group-addon">
<input id="vm-create-network-add-checkbox-managed" type="checkbox" title data-original-title="Managed network?" style="-webkit-transform: scale(1.4, 1.4); margin-top: 4px;" checked/>
</span>
<div class="input-group-btn">
<!--<input type="submit" value="Add to network" class="btn btn-success"/>-->
<a href="#" id="vm-create-network-add-button" class="btn btn-success"><i class="icon-plus-sign"></i></a>