Skip to content

CIRCLE / cloud

Go to a project
Commit 10dbd8bf by Kálmán Viktor
Options

dashboard: hide template tour box

parent 14ce8bf2
Showing with 88 additions and 39 deletions
circle/dashboard/static/dashboard/dashboard.css
...@@ -684,7 +684,7 @@ textarea[name="list-new-namelist"] { ...@@ -684,7 +684,7 @@ textarea[name="list-new-namelist"] {
.dashboard-vm-details-connect-command { .dashboard-vm-details-connect-command {
/* for mobile view */ /* for mobile view */
margin-bottom: 20px; padding-bottom: 20px;
} }
#store-list-list { #store-list-list {
...@@ -956,3 +956,11 @@ textarea[name="list-new-namelist"] { ...@@ -956,3 +956,11 @@ textarea[name="list-new-namelist"] {
#vm-list-search-checkbox-span { #vm-list-search-checkbox-span {
cursor: pointer cursor: pointer
} }
#vm-details-resources-disk {
padding: 2px 5px 10px 5px;
}
#vm-details-start-template-tour {
margin-right: 5px;
}
circle/dashboard/static/dashboard/vm-details.js
...@@ -315,6 +315,24 @@ $(function() { ...@@ -315,6 +315,24 @@ $(function() {
if(Boolean($(this).data("disabled"))) return false; if(Boolean($(this).data("disabled"))) return false;
}); });
$("#dashboard-tutorial-toggle").click(function() {
var box = $("#alert-new-template");
var list = box.find("ol")
list.stop().slideToggle(function() {
var url = box.find("form").prop("action");
var hidden = list.css("display") === "none";
box.find("button i").prop("class", "fa fa-caret-" + (hidden ? "down" : "up"));
$.ajax({
type: 'POST',
url: url,
data: {'hidden': hidden},
headers: {"X-CSRFToken": getCookie('csrftoken')},
success: function(re, textStatus, xhr) {}
});
});
return false;
});
}); });
......
circle/dashboard/static/dashboard/vm-tour.js
$(function() { $(function() {
$(".vm-details-start-template-tour").click(function() { $("#vm-details-start-template-tour").click(function() {
var intro = introJs(); var intro = introJs();
intro.setOptions({ intro.setOptions({
'nextLabel': gettext("Next"), 'nextLabel': gettext("Next"),
...@@ -10,7 +10,7 @@ $(function() { ...@@ -10,7 +10,7 @@ $(function() {
intro.setOptions({ intro.setOptions({
steps: [ steps: [
{ {
element: document.querySelector("#vm-details-template-tour-button"), element: document.querySelector("#vm-details-start-template-tour"),
intro: "<p>" + gettext("Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above.") + "</p>" + intro: "<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('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 " + "<p>" + gettext("During the tour please don't try the functions because it may lead to graphical glitches, however " +
...@@ -27,19 +27,21 @@ $(function() { ...@@ -27,19 +27,21 @@ $(function() {
{ {
element: document.querySelector('#vm-details-resources-form'), element: document.querySelector('#vm-details-resources-form'),
intro: '<p><strong>' + gettext("CPU priority") + ":</strong> " + gettext("higher is better") + "</p>" + intro: '<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("CPU count") + ":</strong> " + gettext("number of CPU cores.") + "</p>" +
'<p><strong>' + gettext("RAM amount") + ":</strong> " + gettext("amount of RAM.") + "</p>", '<p><strong>' + gettext("RAM amount") + ":</strong> " + gettext("amount of RAM.") + "</p>",
position: "top",
}, },
{ {
element: document.querySelector('#vm-details-resources-disk'), element: document.querySelector('#vm-details-resources-disk'),
intro: gettext("You can add empty disks, download new ones and remove existing ones here."), intro: gettext("You can add empty disks, download new ones and remove existing ones here."),
position: "top",
}, },
{ {
element: document.querySelector('a[href="#network"]'), element: document.querySelector('a[href="#network"]'),
intro: gettext('You can add new network interfaces or remove existing ones here.'), intro: gettext('You can add new network interfaces or remove existing ones here.'),
}, },
{ {
element: document.querySelector("#ops"), element: document.querySelector('#ops a[class*="operation-deploy"]'),
intro: gettext("Deploy the virtual machine."), intro: gettext("Deploy the virtual machine."),
}, },
{ {
...@@ -51,7 +53,7 @@ $(function() { ...@@ -51,7 +53,7 @@ $(function() {
intro: gettext("After you have connected to the virtual machine do your modifications then log off."), intro: gettext("After you have connected to the virtual machine do your modifications then log off."),
}, },
{ {
element: document.querySelector("#ops"), element: document.querySelector('#ops a[class*="operation-save_as"]'),
intro: gettext('Press the "Save as template" button and wait until the activity finishes.'), intro: gettext('Press the "Save as template" button and wait until the activity finishes.'),
}, },
{ {
......
circle/dashboard/templates/dashboard/vm-detail.html
...@@ -6,14 +6,25 @@ ...@@ -6,14 +6,25 @@
{% block content %} {% block content %}
{% if instance.is_base %} {% if instance.is_base %}
<div class="alert alert-info alert-new-template"> <div class="alert alert-info alert-new-template" id="alert-new-template" style="position: relative;">
<strong>{% trans "This is the master vm of your new template" %}</strong> <form action="{% url "dashboard.views.vm-toggle-tutorial" pk=instance.pk %}"
<div id="vm-details-template-tour-button" class="pull-right"> method="POST">
<a href="#" class="btn btn-default btn-lg pull-right vm-details-start-template-tour"> {% csrf_token %}
<input name="hidden" type="hidden"
value="{{ hide_tutorial|yesno:"false,true" }}"/>
<button type="submit"
id="dashboard-tutorial-toggle" class="btn btn-sm pull-right btn-success">
<i class="fa fa-caret-{% if hide_tutorial %}down{% else %}up{% endif %}"></i>
{% trans "Toggle tutorial panel" %}
</button>
<a href="#" class="btn btn-default btn-sm pull-right"
id="vm-details-start-template-tour">
<i class="fa fa-play"></i> {% trans "Start template tutorial" %} <i class="fa fa-play"></i> {% trans "Start template tutorial" %}
</a> </a>
</div> </form>
<ol> <strong>{% trans "This is the master vm of your new template" %}</strong>
<ol {% if hide_tutorial %}style="display: none;"{% endif %}>
<li>{% trans "Modify the virtual machine to suit your needs <strong>(optional)</strong>" %} <li>{% trans "Modify the virtual machine to suit your needs <strong>(optional)</strong>" %}
<ul> <ul>
<li>{% trans "Change the description" %}</li> <li>{% trans "Change the description" %}</li>
......
circle/dashboard/templates/dashboard/vm-detail/resources.html
...@@ -18,34 +18,28 @@ ...@@ -18,34 +18,28 @@
{% endif %} {% endif %}
</form> </form>
<hr /> <hr />
<div id="vm-details-resources-disk">
<div class="row" id="vm-details-resources-disk"> <h3>
<div class="col-sm-11"> {% trans "Disks" %}
<h3> <div class="pull-right">
{% trans "Disks" %} <div id="disk-ops">
<div class="pull-right"> {% include "dashboard/vm-detail/_disk-operations.html" %}
<div id="disk-ops">
{% include "dashboard/vm-detail/_disk-operations.html" %}
</div>
</div> </div>
</h3> </div>
</h3>
<div class="row" id="vm-details-disk-add-for-form"></div>
{% if not instance.disks.all %}
{% if not instance.disks.all %} {% trans "No disks are added." %}
{% trans "No disks are added!" %} {% endif %}
{% endif %} {% for d in instance.disks.all %}
{% for d in instance.disks.all %} <h4 class="list-group-item-heading dashboard-vm-details-network-h3">
<h4 class="list-group-item-heading dashboard-vm-details-network-h3"> {% with long_remove=True %}
{% with long_remove=True %} {% include "dashboard/_disk-list-element.html" %}
{% include "dashboard/_disk-list-element.html" %} {% endwith %}
{% endwith %} </h4>
</h4> {% endfor %}
{% endfor %}
</div>
</div> </div>
{% if user.is_superuser %} {% if user.is_superuser %}
......
circle/dashboard/urls.py
...@@ -45,6 +45,7 @@ from .views import ( ...@@ -45,6 +45,7 @@ from .views import (
VmTraitsUpdate, VmRawDataUpdate, VmTraitsUpdate, VmRawDataUpdate,
GroupPermissionsView, GroupPermissionsView,
LeaseAclUpdateView, LeaseAclUpdateView,
toggle_template_tutorial,
) )
autocomplete_light.autodiscover() autocomplete_light.autodiscover()
...@@ -97,6 +98,8 @@ urlpatterns = patterns( ...@@ -97,6 +98,8 @@ urlpatterns = patterns(
name='dashboard.views.vm-traits'), name='dashboard.views.vm-traits'),
url(r'^vm/(?P<pk>\d+)/raw_data/$', VmRawDataUpdate.as_view(), url(r'^vm/(?P<pk>\d+)/raw_data/$', VmRawDataUpdate.as_view(),
name='dashboard.views.vm-raw-data'), name='dashboard.views.vm-raw-data'),
url(r'^vm/(?P<pk>\d+)/toggle_tutorial/$', toggle_template_tutorial,
name='dashboard.views.vm-toggle-tutorial'),
url(r'^node/list/$', NodeList.as_view(), name='dashboard.views.node-list'), url(r'^node/list/$', NodeList.as_view(), name='dashboard.views.node-list'),
url(r'^node/(?P<pk>\d+)/$', NodeDetailView.as_view(), url(r'^node/(?P<pk>\d+)/$', NodeDetailView.as_view(),
......
circle/dashboard/views.py
...@@ -361,13 +361,16 @@ class VmDetailView(CheckedDetailView): ...@@ -361,13 +361,16 @@ class VmDetailView(CheckedDetailView):
instance = context['instance'] instance = context['instance']
user = self.request.user user = self.request.user
ops = get_operations(instance, user) ops = get_operations(instance, user)
hide_tutorial = self.request.COOKIES.get(
"hide_tutorial_for_%s" % instance.pk) == "True"
context.update({ context.update({
'graphite_enabled': settings.GRAPHITE_URL is not None, 'graphite_enabled': settings.GRAPHITE_URL is not None,
'vnc_url': reverse_lazy("dashboard.views.detail-vnc", 'vnc_url': reverse_lazy("dashboard.views.detail-vnc",
kwargs={'pk': self.object.pk}), kwargs={'pk': self.object.pk}),
'ops': ops, 'ops': ops,
'op': {i.op: i for i in ops}, 'op': {i.op: i for i in ops},
'connect_commands': user.profile.get_connect_commands(instance) 'connect_commands': user.profile.get_connect_commands(instance),
'hide_tutorial': hide_tutorial,
}) })
# activity data # activity data
...@@ -3635,3 +3638,13 @@ def store_refresh_toplist(request): ...@@ -3635,3 +3638,13 @@ def store_refresh_toplist(request):
def absolute_url(url): def absolute_url(url):
return urljoin(settings.DJANGO_URL, url) return urljoin(settings.DJANGO_URL, url)
@login_required
def toggle_template_tutorial(request, pk):
hidden = request.POST.get("hidden", "").lower() == "true"
instance = get_object_or_404(Instance, pk=pk)
response = HttpResponseRedirect(instance.get_absolute_url())
response.set_cookie( # for a week
"hide_tutorial_for_%s" % pk, hidden, 7 * 24 * 60 * 60)
return response
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment