Merge branch 'feature-template-wizard' into 'master'

Feature Template Wizard

⚠  pip install and migrate required

django-admin.py makemessages -d djangojs -l hu --settings=circle.settings.local --ignore=jsi18n/*
python manage.py compilejsi18n --settings=circle.settings.local -o dashboard/static/jsi18n -l hu
python manage.py compilejsi18n --settings=circle.settings.local -o dashboard/static/jsi18n -l en

.gitignore

@@ -35,3 +35,6 @@ circle/*.pem
 # collected static files:
 circle/static
 circle/static_collected
+
+# jsi18n files
+jsi18n

circle/circle/settings/base.py

@@ -253,6 +253,7 @@ THIRD_PARTY_APPS = (
     'djcelery',
     'sizefield',
     'taggit',
+    'statici18n',
 )
 
 # Apps specific for this project go here.

circle/dashboard/forms.py

@@ -27,8 +27,9 @@ from django.contrib.auth.forms import (
 
 from crispy_forms.helper import FormHelper
 from crispy_forms.layout import (
-    Layout, Div, BaseInput, Field, HTML, Submit, Fieldset, TEMPLATE_PACK
+    Layout, Div, BaseInput, Field, HTML, Submit, Fieldset, TEMPLATE_PACK,
 )
+
 from crispy_forms.utils import render_field
 from django import forms
 from django.forms.widgets import TextInput
@@ -44,9 +45,6 @@ from vm.models import (
 )
 from .models import Profile
 
-VLANS = Vlan.objects.all()
-DISKS = Disk.objects.exclude(type="qcow2-snap")
-
 
 class VmCustomizeForm(forms.Form):
     name = forms.CharField()
@@ -479,35 +477,21 @@ class NodeForm(forms.ModelForm):
 
 class TemplateForm(forms.ModelForm):
     networks = forms.ModelMultipleChoiceField(
-        queryset=VLANS, required=False)
-    system = forms.CharField(widget=forms.TextInput)
+        queryset=None, required=False, label=_("Networks"))
 
     def __init__(self, *args, **kwargs):
-        parent = kwargs.pop("parent", None)
         self.user = kwargs.pop("user", None)
         super(TemplateForm, self).__init__(*args, **kwargs)
 
+        self.fields['networks'].queryset = Vlan.get_objects_with_level(
+            'user', self.user)
+
         data = self.data.copy()
         data['owner'] = self.user.pk
         self.data = data
 
-        if parent is not None:
-            template = InstanceTemplate.objects.get(pk=parent)
-            parent = template.__dict__
-            fields = ["system", "name", "num_cores", "boot_menu", "ram_size",
-                      "priority", "access_method", "raw_data",
-                      "arch", "description"]
-            for f in fields:
-                self.initial[f] = parent[f]
-            self.initial['lease'] = parent['lease_id']
-            self.initial['parent'] = template
-            self.initial['name'] = "Clone of %s" % self.initial['name']
-            self.for_networks = template
-        else:
-            self.for_networks = self.instance
-
-        if self.instance.pk or parent is not None:
-            n = self.for_networks.interface_set.values_list("vlan", flat=True)
+        if self.instance.pk:
+            n = self.instance.interface_set.values_list("vlan", flat=True)
             self.initial['networks'] = n
 
         if not self.instance.pk and len(self.errors) < 1:
@@ -604,7 +588,7 @@ class TemplateForm(forms.ModelForm):
                 Field('arch'),
             ),
             Fieldset(
-                "stuff",
+                _("Virtual machine settings"),
                 Field('access_method'),
                 Field('boot_menu'),
                 Field('raw_data', **kwargs_raw_data),
@@ -614,7 +598,7 @@ class TemplateForm(forms.ModelForm):
                 Field("system"),
             ),
             Fieldset(
-                _("External"),
+                _("External resources"),
                 Field("networks"),
                 Field("lease"),
                 Field("tags"),
@@ -626,6 +610,9 @@ class TemplateForm(forms.ModelForm):
     class Meta:
         model = InstanceTemplate
         exclude = ('state', 'disks', )
+        widgets = {
+            'system': forms.TextInput
+        }
 
 
 class LeaseForm(forms.ModelForm):

circle/dashboard/models.py

@@ -35,14 +35,13 @@ from model_utils.models import TimeStampedModel
 from model_utils.fields import StatusField
 from model_utils import Choices
 
-from vm.models import Instance
 from acl.models import AclBase
 
 logger = getLogger(__name__)
 
 
 class Favourite(Model):
-    instance = ForeignKey(Instance)
+    instance = ForeignKey("vm.Instance")
     user = ForeignKey(User)
 
 

circle/dashboard/static/dashboard/bootstrap-tour.min.css

+/* ===========================================================
+# bootstrap-tour - v0.9.1
+# http://bootstraptour.com
+# ==============================================================
+# Copyright 2012-2013 Ulrich Sossou
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+*/
+.tour-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1100;background-color:#000;opacity:.8}.tour-step-backdrop{position:relative;z-index:1101;background:inherit}.tour-step-background{position:absolute;z-index:1100;background:inherit;border-radius:6px}.popover[class*=tour-]{z-index:1100}.popover[class*=tour-] .popover-navigation{padding:9px 14px}.popover[class*=tour-] .popover-navigation [data-role=end]{float:right}.popover[class*=tour-] .popover-navigation [data-role=prev],.popover[class*=tour-] .popover-navigation [data-role=next],.popover[class*=tour-] .popover-navigation [data-role=end]{cursor:pointer}.popover[class*=tour-] .popover-navigation [data-role=prev].disabled,.popover[class*=tour-] .popover-navigation [data-role=next].disabled,.popover[class*=tour-] .popover-navigation [data-role=end].disabled{cursor:default}.popover[class*=tour-].orphan{position:fixed;margin-top:0}.popover[class*=tour-].orphan .arrow{display:none}
\ No newline at end of file

circle/dashboard/static/dashboard/bootstrap-tour.min.js

+/* ===========================================================
+# bootstrap-tour - v0.9.1
+# http://bootstraptour.com
+# ==============================================================
+# Copyright 2012-2013 Ulrich Sossou
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+*/
+!function(a,b){var c,d;return d=b.document,c=function(){function c(c){this._options=a.extend({name:"tour",steps:[],container:"body",keyboard:!0,storage:b.localStorage,debug:!1,backdrop:!1,redirect:!0,orphan:!1,duration:!1,basePath:"",template:"<div class='popover'> <div class='arrow'></div> <h3 class='popover-title'></h3> <div class='popover-content'></div> <div class='popover-navigation'> <div class='btn-group'> <button class='btn btn-sm btn-default' data-role='prev'>&laquo; Prev</button> <button class='btn btn-sm btn-default' data-role='next'>Next &raquo;</button> <button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button> </div> <button class='btn btn-sm btn-default' data-role='end'>End tour</button> </div> </div>",afterSetState:function(){},afterGetState:function(){},afterRemoveState:function(){},onStart:function(){},onEnd:function(){},onShow:function(){},onShown:function(){},onHide:function(){},onHidden:function(){},onNext:function(){},onPrev:function(){},onPause:function(){},onResume:function(){}},c),this._force=!1,this._inited=!1,this.backdrop={overlay:null,$element:null,$background:null,backgroundShown:!1,overlayElementShown:!1}}return c.prototype.addSteps=function(a){var b,c,d;for(c=0,d=a.length;d>c;c++)b=a[c],this.addStep(b);return this},c.prototype.addStep=function(a){return this._options.steps.push(a),this},c.prototype.getStep=function(b){return null!=this._options.steps[b]?a.extend({id:"step-"+b,path:"",placement:"right",title:"",content:"<p></p>",next:b===this._options.steps.length-1?-1:b+1,prev:b-1,animation:!0,container:this._options.container,backdrop:this._options.backdrop,redirect:this._options.redirect,orphan:this._options.orphan,duration:this._options.duration,template:this._options.template,onShow:this._options.onShow,onShown:this._options.onShown,onHide:this._options.onHide,onHidden:this._options.onHidden,onNext:this._options.onNext,onPrev:this._options.onPrev,onPause:this._options.onPause,onResume:this._options.onResume},this._options.steps[b]):void 0},c.prototype.init=function(a){return this._force=a,this.ended()?(this._debug("Tour ended, init prevented."),this):(this.setCurrentStep(),this._initMouseNavigation(),this._initKeyboardNavigation(),this._onResize(function(a){return function(){return a.showStep(a._current)}}(this)),null!==this._current&&this.showStep(this._current),this._inited=!0,this)},c.prototype.start=function(a){var b;return null==a&&(a=!1),this._inited||this.init(a),null===this._current&&(b=this._makePromise(null!=this._options.onStart?this._options.onStart(this):void 0),this._callOnPromiseDone(b,this.showStep,0)),this},c.prototype.next=function(){var a;return a=this.hideStep(this._current),this._callOnPromiseDone(a,this._showNextStep)},c.prototype.prev=function(){var a;return a=this.hideStep(this._current),this._callOnPromiseDone(a,this._showPrevStep)},c.prototype.goTo=function(a){var b;return b=this.hideStep(this._current),this._callOnPromiseDone(b,this.showStep,a)},c.prototype.end=function(){var c,e;return c=function(c){return function(){return a(d).off("click.tour-"+c._options.name),a(d).off("keyup.tour-"+c._options.name),a(b).off("resize.tour-"+c._options.name),c._setState("end","yes"),c._inited=!1,c._force=!1,c._clearTimer(),null!=c._options.onEnd?c._options.onEnd(c):void 0}}(this),e=this.hideStep(this._current),this._callOnPromiseDone(e,c)},c.prototype.ended=function(){return!this._force&&!!this._getState("end")},c.prototype.restart=function(){return this._removeState("current_step"),this._removeState("end"),this.setCurrentStep(0),this.start()},c.prototype.pause=function(){var a;return a=this.getStep(this._current),a&&a.duration?(this._paused=!0,this._duration-=(new Date).getTime()-this._start,b.clearTimeout(this._timer),this._debug("Paused/Stopped step "+(this._current+1)+" timer ("+this._duration+" remaining)."),null!=a.onPause?a.onPause(this,this._duration):void 0):this},c.prototype.resume=function(){var a;return a=this.getStep(this._current),a&&a.duration?(this._paused=!1,this._start=(new Date).getTime(),this._duration=this._duration||a.duration,this._timer=b.setTimeout(function(a){return function(){return a._isLast()?a.next():a.end()}}(this),this._duration),this._debug("Started step "+(this._current+1)+" timer with duration "+this._duration),null!=a.onResume&&this._duration!==a.duration?a.onResume(this,this._duration):void 0):this},c.prototype.hideStep=function(b){var c,d,e;return(e=this.getStep(b))?(this._clearTimer(),d=this._makePromise(null!=e.onHide?e.onHide(this,b):void 0),c=function(c){return function(){var d;return d=a(e.element),d.data("bs.popover")||d.data("popover")||(d=a("body")),d.popover("destroy").removeClass("tour-"+c._options.name+"-element tour-"+c._options.name+"-"+b+"-element"),e.reflex&&d.css("cursor","").off("click.tour-"+c._options.name),e.backdrop&&c._hideBackdrop(),null!=e.onHidden?e.onHidden(c):void 0}}(this),this._callOnPromiseDone(d,c),d):void 0},c.prototype.showStep=function(a){var b,c,e,f;return this.ended()?(this._debug("Tour ended, showStep prevented."),this):(f=this.getStep(a))?(e=a<this._current,b=this._makePromise(null!=f.onShow?f.onShow(this,a):void 0),c=function(b){return function(){var c,g;if(b.setCurrentStep(a),g=function(){switch({}.toString.call(f.path)){case"[object Function]":return f.path();case"[object String]":return this._options.basePath+f.path;default:return f.path}}.call(b),c=[d.location.pathname,d.location.hash].join(""),b._isRedirect(g,c))return void b._redirect(f,g);if(b._isOrphan(f)){if(!f.orphan)return b._debug("Skip the orphan step "+(b._current+1)+". Orphan option is false and the element doesn't exist or is hidden."),void(e?b._showPrevStep():b._showNextStep());b._debug("Show the orphan step "+(b._current+1)+". Orphans option is true.")}return f.backdrop&&b._showBackdrop(b._isOrphan(f)?void 0:f.element),b._scrollIntoView(f.element,function(){return null!=f.element&&f.backdrop&&b._showOverlayElement(f.element),b._showPopover(f,a),null!=f.onShown&&f.onShown(b),b._debug("Step "+(b._current+1)+" of "+b._options.steps.length)}),f.duration?b.resume():void 0}}(this),this._callOnPromiseDone(b,c),b):void 0},c.prototype.getCurrentStep=function(){return this._current},c.prototype.setCurrentStep=function(a){return null!=a?(this._current=a,this._setState("current_step",a)):(this._current=this._getState("current_step"),this._current=null===this._current?null:parseInt(this._current,10)),this},c.prototype._setState=function(a,b){var c,d;if(this._options.storage){d=""+this._options.name+"_"+a;try{this._options.storage.setItem(d,b)}catch(e){c=e,c.code===DOMException.QUOTA_EXCEEDED_ERR&&this.debug("LocalStorage quota exceeded. State storage failed.")}return this._options.afterSetState(d,b)}return null==this._state&&(this._state={}),this._state[a]=b},c.prototype._removeState=function(a){var b;return this._options.storage?(b=""+this._options.name+"_"+a,this._options.storage.removeItem(b),this._options.afterRemoveState(b)):null!=this._state?delete this._state[a]:void 0},c.prototype._getState=function(a){var b,c;return this._options.storage?(b=""+this._options.name+"_"+a,c=this._options.storage.getItem(b)):null!=this._state&&(c=this._state[a]),(void 0===c||"null"===c)&&(c=null),this._options.afterGetState(a,c),c},c.prototype._showNextStep=function(){var a,b,c;return c=this.getStep(this._current),b=function(a){return function(){return a.showStep(c.next)}}(this),a=this._makePromise(null!=c.onNext?c.onNext(this):void 0),this._callOnPromiseDone(a,b)},c.prototype._showPrevStep=function(){var a,b,c;return c=this.getStep(this._current),b=function(a){return function(){return a.showStep(c.prev)}}(this),a=this._makePromise(null!=c.onPrev?c.onPrev(this):void 0),this._callOnPromiseDone(a,b)},c.prototype._debug=function(a){return this._options.debug?b.console.log("Bootstrap Tour '"+this._options.name+"' | "+a):void 0},c.prototype._isRedirect=function(a,b){return null!=a&&""!==a&&("[object RegExp]"===toString.call(a)&&!a.test(b)||"[object String]"===toString.call(a)&&a.replace(/\?.*$/,"").replace(/\/?$/,"")!==b.replace(/\/?$/,""))},c.prototype._redirect=function(b,c){return a.isFunction(b.redirect)?b.redirect.call(this,c):b.redirect===!0?(this._debug("Redirect to "+c),d.location.href=c):void 0},c.prototype._isOrphan=function(b){return null==b.element||!a(b.element).length||a(b.element).is(":hidden")&&"http://www.w3.org/2000/svg"!==a(b.element)[0].namespaceURI},c.prototype._isLast=function(){return this._current<this._options.steps.length-1},c.prototype._showPopover=function(b,c){var d,e,f,g,h,i;return i=a.extend({},this._options),f=a(a.isFunction(b.template)?b.template(c,b):b.template),e=f.find(".popover-navigation"),h=this._isOrphan(b),h&&(b.element="body",b.placement="top",f=f.addClass("orphan")),d=a(b.element),f.addClass("tour-"+this._options.name+" tour-"+this._options.name+"-"+c),d.addClass("tour-"+this._options.name+"-element tour-"+this._options.name+"-"+c+"-element"),b.options&&a.extend(i,b.options),b.reflex&&d.css("cursor","pointer").on("click.tour-"+this._options.name,function(a){return function(){return a._isLast()?a.next():a.end()}}(this)),b.prev<0&&e.find("[data-role='prev']").addClass("disabled"),b.next<0&&e.find("[data-role='next']").addClass("disabled"),b.duration||e.find("[data-role='pause-resume']").remove(),b.template=f.clone().wrap("<div>").parent().html(),d.popover({placement:b.placement,trigger:"manual",title:b.title,content:b.content,html:!0,animation:b.animation,container:b.container,template:b.template,selector:b.element}).popover("show"),g=d.data("bs.popover")?d.data("bs.popover").tip():d.data("popover").tip(),g.attr("id",b.id),this._reposition(g,b),h?this._center(g):void 0},c.prototype._reposition=function(b,c){var e,f,g,h,i,j,k;if(h=b[0].offsetWidth,f=b[0].offsetHeight,k=b.offset(),i=k.left,j=k.top,e=a(d).outerHeight()-k.top-b.outerHeight(),0>e&&(k.top=k.top+e),g=a("html").outerWidth()-k.left-b.outerWidth(),0>g&&(k.left=k.left+g),k.top<0&&(k.top=0),k.left<0&&(k.left=0),b.offset(k),"bottom"===c.placement||"top"===c.placement){if(i!==k.left)return this._replaceArrow(b,2*(k.left-i),h,"left")}else if(j!==k.top)return this._replaceArrow(b,2*(k.top-j),f,"top")},c.prototype._center=function(c){return c.css("top",a(b).outerHeight()/2-c.outerHeight()/2)},c.prototype._replaceArrow=function(a,b,c,d){return a.find(".arrow").css(d,b?50*(1-b/c)+"%":"")},c.prototype._scrollIntoView=function(c,d){var e,f,g,h,i,j;return e=a(c),e.length?(f=a(b),h=e.offset().top,j=f.height(),i=Math.max(0,h-j/2),this._debug("Scroll into view. ScrollTop: "+i+". Element offset: "+h+". Window height: "+j+"."),g=0,a("body,html").stop(!0,!0).animate({scrollTop:Math.ceil(i)},function(a){return function(){return 2===++g?(d(),a._debug("Scroll into view. Animation end element offset: "+e.offset().top+". Window height: "+f.height()+".")):void 0}}(this))):d()},c.prototype._onResize=function(c,d){return a(b).on("resize.tour-"+this._options.name,function(){return clearTimeout(d),d=setTimeout(c,100)})},c.prototype._initMouseNavigation=function(){var b;return b=this,a(d).off("click.tour-"+this._options.name,".popover.tour-"+this._options.name+" *[data-role='prev']:not(.disabled)").off("click.tour-"+this._options.name,".popover.tour-"+this._options.name+" *[data-role='next']:not(.disabled)").off("click.tour-"+this._options.name,".popover.tour-"+this._options.name+" *[data-role='end']").off("click.tour-"+this._options.name,".popover.tour-"+this._options.name+" *[data-role='pause-resume']").on("click.tour-"+this._options.name,".popover.tour-"+this._options.name+" *[data-role='next']:not(.disabled)",function(a){return function(b){return b.preventDefault(),a.next()}}(this)).on("click.tour-"+this._options.name,".popover.tour-"+this._options.name+" *[data-role='prev']:not(.disabled)",function(a){return function(b){return b.preventDefault(),a.prev()}}(this)).on("click.tour-"+this._options.name,".popover.tour-"+this._options.name+" *[data-role='end']",function(a){return function(b){return b.preventDefault(),a.end()}}(this)).on("click.tour-"+this._options.name,".popover.tour-"+this._options.name+" *[data-role='pause-resume']",function(c){var d;return c.preventDefault(),d=a(this),d.text(d.data(b._paused?"pause-text":"resume-text")),b._paused?b.resume():b.pause()})},c.prototype._initKeyboardNavigation=function(){return this._options.keyboard?a(d).on("keyup.tour-"+this._options.name,function(a){return function(b){if(b.which)switch(b.which){case 39:return b.preventDefault(),a._isLast()?a.next():a.end();case 37:if(b.preventDefault(),a._current>0)return a.prev();break;case 27:return b.preventDefault(),a.end()}}}(this)):void 0},c.prototype._makePromise=function(b){return b&&a.isFunction(b.then)?b:null},c.prototype._callOnPromiseDone=function(a,b,c){return a?a.then(function(a){return function(){return b.call(a,c)}}(this)):b.call(this,c)},c.prototype._showBackdrop=function(){return this.backdrop.backgroundShown?void 0:(this.backdrop=a("<div/>",{"class":"tour-backdrop"}),this.backdrop.backgroundShown=!0,a("body").append(this.backdrop))},c.prototype._hideBackdrop=function(){return this._hideOverlayElement(),this._hideBackground()},c.prototype._hideBackground=function(){return this.backdrop.remove(),this.backdrop.overlay=null,this.backdrop.backgroundShown=!1},c.prototype._showOverlayElement=function(b){var c,d,e;return d=a(b),d&&0!==d.length&&!this.backdrop.overlayElementShown?(this.backdrop.overlayElementShown=!0,c=a("<div/>"),e=d.offset(),e.top=e.top,e.left=e.left,c.width(d.innerWidth()).height(d.innerHeight()).addClass("tour-step-background").offset(e),d.addClass("tour-step-backdrop"),a("body").append(c),this.backdrop.$element=d,this.backdrop.$background=c):void 0},c.prototype._hideOverlayElement=function(){return this.backdrop.overlayElementShown?(this.backdrop.$element.removeClass("tour-step-backdrop"),this.backdrop.$background.remove(),this.backdrop.$element=null,this.backdrop.$background=null,this.backdrop.overlayElementShown=!1):void 0},c.prototype._clearTimer=function(){return b.clearTimeout(this._timer),this._timer=null,this._duration=null},c}(),b.Tour=c}(jQuery,window);
\ No newline at end of file

circle/dashboard/static/dashboard/dashboard.css

@@ -486,6 +486,55 @@ footer a, footer a:hover, footer a:visited {
   margin-bottom: 20px;
 }
 
+.template-choose-list {
+  max-width: 600px;
+}
+
+.template-choose-list-element small {
+  display: none;
+  float: right;
+  padding-right: 50px;
+}
+
+.template-choose-list-element {
+  padding: 6px 10px;
+  cursor: pointer;
+  margin-bottom: 15px; /* bootstrap panel default is 20px */
+}
+
+.template-choose-list input[type="radio"] {
+  float: right;
+}
+
+/* template create vm help */
+.alert-new-template {                                                       
+  background: #3071a9;                                                      
+  color: white;                                                             
+  font-size: 22px;                                                          
+}                                                                           
+                                                                            
+.alert-new-template ol {                                                    
+  margin-left: 25px;
+} 
+
+/* bootstrap tour */
+.tour-template {
+  max-width: 400px;
+  min-width: 270px;
+  font-size: 16px;
+}
+
+.tour-template {
+  text-align: justify;
+}
+.tour-template .popover-title {
+  font-weight: bold;
+}
+
+#vm-details-resources-form {
+  padding: 5px; /* it's nice this way in the tour */
+}
+
 .index-vm-list-name {
   display: inline-block; 
   max-width: 70%; 
@@ -546,6 +595,10 @@ footer a, footer a:hover, footer a:visited {
   display: none;
 }
 
+#ops {
+  padding: 15px 0 15px 15px;
+}
+
 #vm-access-table th:last-child, #vm-access-table td:last-child,
 #template-access-table th:last-child, #template-access-table td:last-child {
   text-align: center;

circle/dashboard/static/dashboard/dashboard.js

@@ -33,6 +33,34 @@ $(function () {
     });
     return false;
   });
+
+  $('.template-choose').click(function(e) {
+    $.ajax({
+      type: 'GET',
+      url: '/dashboard/template/choose/', 
+      success: function(data) { 
+        $('body').append(data);
+        vmCreateLoaded();
+        addSliderMiscs();
+        $('#create-modal').modal('show');
+        $('#create-modal').on('hidden.bs.modal', function() {
+          $('#create-modal').remove();
+        });
+        // check if user selected anything
+        $("#template-choose-next-button").click(function() {
+          var radio = $('input[type="radio"]:checked', "#template-choose-form").val();
+          if(!radio) {
+            $("#template-choose-alert").addClass("alert-warning")
+            .text(gettext("Select an option to proceed!"));
+            return false;
+          }
+          return true;
+        });
+      }
+    });
+    return false;
+  });
+
   $('[href=#index-graph-view]').click(function (e) {
     var box = $(this).data('index-box');
     $("#" + box + "-list-view").hide();
@@ -327,10 +355,10 @@ function massDeleteVm(data) {
       type: 'POST',                                                         
       data: {'vms': data['data']['v']},                                  
       success: function(re, textStatus, xhr) {                            
-        for(var i=0; i< selected.length; i++)                               
-          $('.vm-list-table tbody tr').eq(data['data']['selected'][i]).fadeOut(500, function() {
+        for(var i=0; i< data['data']['v'].length; i++)                               
+          $('.vm-list-table tbody tr[data-vm-pk="' + data['data']['v'][i] + '"]').fadeOut(500, function() {
+            selected = [];                                                  
             // reset group buttons                                          
-            selected = []                                                   
             $('.vm-list-group-control a').attr('disabled', true);           
             $(this).remove();                                               
           }); 

circle/dashboard/static/dashboard/vm-tour.js

+$(function() {
+  $(".vm-details-start-template-tour").click(function() {
+    ttour = createTemplateTour();
+    ttour.init();
+    ttour.start();
+  });
+});
+
+function createTemplateTour() {
+  var ttour = new Tour({
+      storage: false,
+      name: "template",
+      template: "<div class='popover'>" +
+                  "<div class='arrow'></div>" +
+                  "<h3 class='popover-title'></h3>" +
+                  "<div class='popover-content'></div>" +
+                  "<div class='popover-navigation'>" +
+                    "<div class='btn-group'>" +
+                      "<button class='btn btn-sm btn-default' data-role='prev'>" +
+                        '<i class="icon-chevron-left"></i> ' + gettext("Prev") + "</button> " +
+                      "<button class='btn btn-sm btn-default' data-role='next'>" +
+                        gettext("Next") + ' <i class="icon-chevron-right"></i></button> ' +
+                      "<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button> " +
+                    "</div>" +
+                    "<button class='btn btn-sm btn-default' data-role='end'>" +
+                      gettext("End tour") + ' <i class="icon-flag-checkered"></i></button>' +
+                  "</div>" +
+                "</div>",
+  });
+
+  ttour.addStep({
+    element: "#vm-details-template-tour-button",
+    title: gettext("Template Tutorial Tour"),
+    content: "<p>" + gettext("Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above.") + "</p>" +
+             "<p>" + gettext('For the next tour step press the "Next" button or the right arrow (or "Back" button/left arrow for the previous step).') + "</p>" +
+             "<p>" + gettext("During the tour please don't try the functions because it may lead to graphical glitches, however " +
+                             "you can end the tour any time you want with the End Tour button!") + "</p>",
+    placement: "bottom",
+    backdrop: true,
+  });
+
+  ttour.addStep({
+    backdrop: true,
+    element: 'a[href="#home"]',
+    title: gettext("Home tab"), 
+    content: gettext("In this tab you can tag your virtual machine and modify the name and description."),
+    placement: 'top',
+    onShow: function() {
+      $('a[href="#home"]').trigger("click");
+    },
+  });
+
+  ttour.addStep({
+    element: 'a[href="#resources"]',
+    title: gettext("Resources tab"),
+    backdrop: true,
+    placement: 'top',
+    content: gettext("On the resources tab you can edit the CPU/RAM options and add/remove disks!"),
+    onShow: function() {
+      $('a[href="#resources"]').trigger("click");
+    },
+  });
+
+  ttour.addStep({
+    element: '#vm-details-resources-form',
+    placement: 'top',
+    backdrop: true,
+    title: gettext("Resources"),
+    content: '<p><strong>' + gettext("CPU priority") + ":</strong> " + gettext("higher is better") + "</p>" + 
+             '<p><strong>' + gettext("CPU count") + ":</strong> " + gettext("number of CPU cores.") + "</p>" +
+             '<p><strong>' + gettext("RAM amount") + ":</strong> " + gettext("amount of RAM.") + "</p>", 
+    onShow: function() {
+      $('a[href="#resources"]').trigger("click");
+    },
+  });
+
+  ttour.addStep({
+    element: '#vm-details-resources-disk',
+    backdrop: true,
+    placement: 'top',
+    title: gettext("Disks"),
+    content: gettext("You can add empty disks, download new ones and remove existing ones here."),
+    onShow: function() {
+      $('a[href="#resources"]').trigger("click");
+    },
+  });
+
+  ttour.addStep({
+    element: 'a[href="#network"]',
+    backdrop: true,
+    placement: 'top',
+    title: gettext("Network tab"),
+    content: gettext('You can add new network interfaces or remove existing ones here.'),
+    onShow: function() {
+      $('a[href="#network"]').trigger("click");
+    },
+  });
+
+
+  ttour.addStep({
+    element: "#ops",
+    title: '<i class="icon-play"></i> ' + gettext("Deploy"),
+    placement: "left",
+    backdrop: true,
+    content: gettext("Deploy the virtual machine."),
+  });
+
+  ttour.addStep({
+    element: "#vm-info-pane",
+    title: gettext("Connect"),
+    placement: "top",
+    backdrop: true,
+    content: gettext("Use the connection string or connect with your choice of client!"),
+    
+  });
+
+  ttour.addStep({
+    element: "#vm-info-pane",
+    placement: "top",
+    title: gettext("Customize the virtual machine"),
+    content: gettext("After you have connected to the virtual machine do your modifications then log off."),
+  });
+
+  ttour.addStep({
+    element: "#ops",
+    title: '<i class="icon-save"></i> ' + gettext("Save as"),
+    placement: "left",
+    backdrop: true,
+    content: gettext('Press the "Save as template" button and wait until the activity finishes.'),
+  });
+  
+  
+  ttour.addStep({
+    element: ".alert-new-template",
+    title: gettext("Finish"),
+    backdrop: true,
+    placement: "bottom",
+    content: gettext("This is the last message, if something is not clear you can do the the tour again!"),
+  });
+  
+  return ttour;
+}

circle/dashboard/templates/base.html

@@ -17,8 +17,10 @@
     <script src="{{ STATIC_URL }}dashboard/js/jquery.knob.js"></script>
     <script src="{{ STATIC_URL}}dashboard/bootstrap-slider/bootstrap-slider.js"></script>
     <link rel="stylesheet" href="{{ STATIC_URL }}dashboard/bootstrap-slider/slider.css"/>
+    <link href="{{ STATIC_URL }}dashboard/bootstrap-tour.min.css" rel="stylesheet">
     <link href="{{ STATIC_URL }}dashboard/dashboard.css" rel="stylesheet">
     <script src="{{ STATIC_URL }}dashboard/dashboard.js"></script>
+    <script src="{{ STATIC_URL }}jsi18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
   </head>
 
   <body>

circle/dashboard/templates/dashboard/_template-choose.html

+{% load i18n %}
+
+<div class="alert alert-info" id="template-choose-alert">
+  {% trans "Customize an existing template or create a brand new one from scratch!" %}
+</div>
+
+<form action="{% url "dashboard.views.template-choose" %}" method="POST"
+  id="template-choose-form">
+  {% csrf_token %}
+  <div class="template-choose-list">
+    {% for t in templates %}
+    <div class="panel panel-default template-choose-list-element">
+      <input type="radio" name="parent" value="{{ t.pk }}"/>
+      {{ t.name }} - {{ t.system }}
+      <small>Cores: {{ t.num_cores }} RAM: {{ t.ram_size }}</small>
+      <div class="clearfix"></div>
+    </div>
+    {% endfor %}
+    <div class="panel panel-default template-choose-list-element">
+      <input type="radio" name="parent" value="base_vm"/>
+      {% trans "Create a new base VM without disk" %}
+    </div>
+    <button type="submit" id="template-choose-next-button" class="btn btn-success pull-right">{% trans "Next" %}</button>
+    <div class="clearfix"></div>
+  </div>
+</form>
+
+<script>
+  $(function() {
+    $(".template-choose-list-element").click(function() {
+      $("input", $(this)).prop("checked", true);
+    });
+    $(".template-choose-list-element").hover(
+      function() {
+        $("small", $(this)).stop().fadeIn(200);
+      },
+      function() {
+        $("small", $(this)).stop().fadeOut(200);
+      }
+    );
+  });
+</script>

circle/dashboard/templates/dashboard/template-create.html → circle/dashboard/templates/dashboard/_template-create.html

-{% extends "dashboard/base.html" %}
 {% load i18n %}
 {% load crispy_forms_tags %} 
 
-{% block title-page %}{% trans "Create base VM" %}{% endblock %}
-
-{% block content %}
-<div class="row">
-  <div class="col-md-12">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.views.template-list" %}">{% trans "Back" %}</a>
-        <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "Create base VM" %}</h3>
-      </div>
-      <div class="panel-body">
-        {% with form=form %}
-          {% include "display-form-errors.html" %}
-        {% endwith %}
-        {% crispy form %}
-      </div>
-    </div>
+{% if leases < 1 %}
+  <div class="alert alert-warning">
+    {% trans "You haven't created any leases yet, but you need one to create a template!" %}
+    <a href="{% url "dashboard.views.lease-create" %}">{% trans "Create a new lease now." %}</a>
   </div>
-</div>
+{% endif %}
+
+{% with form=form %}
+  {% include "display-form-errors.html" %}
+{% endwith %}
+{% crispy form %}
 
 <style>
   fieldset {
@@ -35,5 +26,3 @@
     $("#hint_id_num_cores, #hint_id_priority, #hint_id_ram_size").hide();
   });
 </script>
-
-{% endblock %}

circle/dashboard/templates/dashboard/confirm/ajax-delete.html

@@ -13,7 +13,9 @@
         <br />
         <div class="pull-right" style="margin-top: 15px;">
           <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel" %}</button> 
-          <button id="confirmation-modal-button" type="button" class="btn btn-danger">{% trans "Delete" %}</button> 
+          <button id="confirmation-modal-button" type="button" class="btn btn-danger"
+          {% if disable_submit %}disabled{% endif %}
+            >{% trans "Delete" %}</button> 
         </div>
         <div class="clearfix"></div>
       </div>

circle/dashboard/templates/dashboard/confirm/base-delete.html

@@ -26,9 +26,12 @@
             {% csrf_token %}
             <a class="btn btn-default">{% trans "Cancel" %}</a>
             <input type="hidden" name="next" value="{{ request.GET.next }}"/>
-            <button class="btn btn-danger">{% trans "Yes" %}</button>
+            <button class="btn btn-danger"
+              {% if disable_submit %}disabled{% endif %}
+              >{% trans "Yes" %}</button>
           </form>
         </div>
       </div>
+    </div>
   </div>
 {% endblock %}

circle/dashboard/templates/dashboard/index-templates.html

@@ -22,15 +22,16 @@
         <p>
           {% trans "You don't have any templates, however you can still start virtual machines and even save them as new templates!" %}
         </p>
-        <p>
-          {% trans "The new button below creates a new base vm, please use only if necessary!" %}
-        </p>
       </div>
     {% endfor %}
     <div href="#" class="list-group-item list-group-footer text-right">
       <p>
-        <a href="{% url "dashboard.views.template-list" %}" class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> {% trans "show all" %}</a>
-        <a href="{% url "dashboard.views.template-create" %}" class="btn btn-success btn-xs"><i class="icon-plus-sign"></i> {% trans "new" %}</a>
+        <a href="{% url "dashboard.views.template-list" %}" class="btn btn-primary btn-xs">
+          <i class="icon-chevron-sign-right"></i> {% trans "show all" %}
+        </a>
+        <a href="{% url "dashboard.views.template-choose" %}" class="btn btn-success btn-xs template-choose">
+          <i class="icon-plus-sign"></i> {% trans "new" %}
+        </a>
       </p>
     </div>
   </div>

circle/dashboard/templates/dashboard/template-list/column-template-actions.html

 {% load i18n %}
-<a href="{% url "dashboard.views.template-create" %}?parent={{ record.pk }}" id="template-list-clone-button" class="btn btn-default btn-xs" title="{% trans "Clone" %}">
-  <i class="icon-copy"></i>
-</a>
 <a href="{% url "dashboard.views.template-detail" pk=record.pk%}" id="template-list-edit-button" class="btn btn-default btn-xs" title="{% trans "Edit" %}">
   <i class="icon-edit"></i>
 </a>

circle/dashboard/templates/dashboard/vm-detail.html

@@ -4,9 +4,40 @@
 {% block title-page %}{{ instance.name }} | vm{% endblock %}
 
 {% block content %}
+
+{% if instance.is_base %}
+<div class="alert alert-info alert-new-template">
+  <strong>{% trans "This is the master vm of your new template" %}</strong>
+  <div id="vm-details-template-tour-button" class="pull-right">
+    <a href="#" class="btn btn-default btn-lg pull-right vm-details-start-template-tour">
+      <i class="icon-play"></i> {% trans "Start template tutorial" %}
+    </a>
+  </div>
+  <ol>
+    <li>{% trans "Modify the virtual machine to suit your needs <strong>(optional)</strong>" %}
+      <ul>
+        <li>{% trans "Change the name and description" %}</li>
+        <li>{% trans "Change the resources (CPU and RAM)" %}</li>
+        <li>{% trans "Attach or detach disks" %}</li>
+        <li>{% trans "Add or remove network interfaces" %}</li>
+      </ul>
+    </li>
+    <li>{% trans "Deploy the virtual machine" %}</li>
+    <li>{% trans "Connect to the machine" %}</li>
+    <li>{% trans "Do all the needed installations/customizations" %}</li>
+    <li>{% trans "Log off from the machine" %}</li>
+    <li>
+      {% trans "Press the Save as template button" %}
+    </li>
+    <li>
+      {% trans "Delete this virtual machine <strong>(optional)</strong>" %}
+    </li>
+  </ol>
+</div>
+{% endif %}
 <div class="body-content">
   <div class="page-header">
-    <div class="pull-right" style="padding-top: 15px;" id="ops">
+    <div class="pull-right" id="ops">
       {% include "dashboard/vm-detail/_operations.html" %}
     </div>
     <h1>
@@ -112,8 +143,10 @@
 {% endblock %}
 
 {% block extra_js %}
+  <script src="{{ STATIC_URL }}dashboard/bootstrap-tour.min.js"></script>
   <script src="{{ STATIC_URL }}dashboard/vm-details.js"></script>
   <script src="{{ STATIC_URL }}dashboard/vm-common.js"></script>
   <script src="{{ STATIC_URL }}dashboard/vm-console.js"></script>
   <script src="{{ STATIC_URL }}dashboard/disk-list.js"></script>
+  <script src="{{ STATIC_URL }}dashboard/vm-tour.js"></script>
 {% endblock %}

circle/dashboard/templates/dashboard/vm-detail/resources.html

@@ -42,7 +42,7 @@
 
 <hr />
 
-<div class="row">
+<div class="row" id="vm-details-resources-disk">
   <div class="col-sm-11">
     <h3>
       {% trans "Disks" %}

circle/dashboard/tests/test_views.py

@@ -289,6 +289,7 @@ class VmDetailTest(LoginMixin, TestCase):
         tmpl = InstanceTemplate.objects.get(id=1)
         tmpl.set_level(self.u1, 'owner')
         tmpl.disks.get().set_level(self.u1, 'owner')
+        Vlan.objects.get(id=1).set_level(self.u1, 'user')
         kwargs = tmpl.__dict__.copy()
         kwargs.update(name='t1', lease=1, disks=1, raw_data='tst1')