Skip to content

Gelencsér Szabolcs / circlestack

Go to a project
Commit 11ddfd1e by Bach Dániel
Options

Merge branch 'feature-helppage' into 'master' 

Feature helppage 🚧

## Improve Help page

* using tabs to seperate FAQ and overview

See merge request !314
parents 752a1562 63c83683
Showing with 367 additions and 1 deletions
circle/circle/settings/base.py
......@@ -213,6 +213,7 @@ PIPELINE_JS = {
"dashboard/vm-common.js",
"dashboard/vm-create.js",
"dashboard/vm-list.js",
"dashboard/help.js",
"js/host.js",
"js/network.js",
"js/switch-port.js",
......
circle/dashboard/static/dashboard/dashboard.less
......@@ -1320,11 +1320,151 @@ textarea[name="new_members"] {
}
}
/* help page */
.help-tabs li {
width: 50%;
text-align: center;
}
// note: padding-margin hack to skip banner on anchor
#help-tab-content {
h1, h2, h3, h4, h5 {
font-weight: bold;
padding-top: 55px; margin-top: -55px;
}
blockquote {
background-color:#dfe4e4;
}
}
#wrapper {
position: fixed;
padding-left: 0px;
background: #252525;
left: 0px;
top: 46px;
height: 100%;
width: 210px;
transition: all .4s ease 0s;
/* Firefox */
height: -moz-calc(100% - 130px);
/* WebKit */
height: -webkit-calc(100% - 120px);
/* Opera */
height: -o-calc(100% - 110px);
/* Standard */
height: calc(100% - 130px);
}
#sidebar-wrapper {
margin-left: 0px;
left: 0px;
top: inherit;
bottom: 30px;
width: inherit;
position: inherit;
z-index: 10000;
transition: all .4s ease 0s;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
#sidebar-wrapper ul {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0px;
}
#sidebar-wrapper a {
font-family: "proxima-nova", 'Helvetica Neue', 'Helvetica', 'sans-serif';
color: #ddd;
display: block;
float: left;
width: 200px;
text-decoration: none;
background: #252525;
border-top: 1px solid #333;
border-bottom: 1px solid #222;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
#sidebar-wrapper ul a{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-size: larger;
}
#sidebar-wrapper li a{
padding-top: 6px;
padding-bottom: 6px;
padding-left: 20px;
padding-right: 6px;
font-size: smaller;
}
#sidebar-wrapper ul ul a{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 16px;
font-size: larger;
}
#sidebar-wrapper li li a{
padding-top: 6px;
padding-bottom: 6px;
padding-left: 24px;
padding-right: 6px;
font-size: smaller;
}
#sidebar-wrapper li a:hover, #sidebar-wrapper ul a:hover{
color: #fff;
background: rgba(200,200,255,0.15);
text-decoration: none;
}
#page-content {
margin-left: 200px;
}
@media only screen and (max-width: 600px) {
#wrapper {
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-o-transform: translateX(-250px);
-ms-transform: translateX(-250px);
transform: translateX(-250px);
}
#page-content {
margin-left: 0px;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
}
.overview_href {
cursor: pointer;
}
#request-buttons {
form {
display: inline;
}
textarea {
resize: none;
min-height: 80px;
......
circle/dashboard/static/dashboard/help.js 0 → 100644
$(function() {
$('.crosslink').click(function(e) {
e.preventDefault();
var menu = $(this).data("menu");
$(menu).click();
window.location = this.href;
});
var hash = window.location.hash;
if(hash) {
var menu;
if($(hash).closest(".tab-pane").prop("class").indexOf("overview") != -1) {
menu = "#overview_menu";
} else {
menu = "#faq_menu";
}
$(menu).click();
$("html, body").animate({scrollTop: $(hash).offset().top}, 500);
window.location.hash = hash;
}
});
circle/dashboard/views/index.py
......@@ -28,6 +28,7 @@ from braces.views import LoginRequiredMixin
from dashboard.models import GroupProfile
from vm.models import Instance, Node, InstanceTemplate
from dashboard.views.vm import vm_ops
from ..store_api import Store
......@@ -127,7 +128,10 @@ class HelpView(TemplateView):
def get_context_data(self, *args, **kwargs):
ctx = super(HelpView, self).get_context_data(*args, **kwargs)
operations = [(o, Instance._ops[o.op])
for o in vm_ops.values() if o.show_in_toolbar]
ctx.update({"saml": hasattr(settings, "SAML_CONFIG"),
"operations": operations,
"store": settings.STORE_URL})
return ctx
......
circle/templates/info/help/faq.html 0 → 100644
{% load i18n %}
<br/>
<h2 id="faq" >{% trans "FAQ" %}</h2>
<br/>
<h3 id="how-can-i-create-and-share-a-template">{% trans "How can I create and share a template?" %}</h3>
<blockquote>
<ol>
<li>{% trans "Start a virtual machine." %}</li>
<li>{% trans "Customize this machine - install and remove softwares, etc." %}</li>
<li>{% trans 'Click the “Save as Template” button.' %}</li>
<li>{% trans 'On the dashboard select this template to go to the "Edit template page".' %}</li>
<li>
{% trans 'Use the "Manage access" box to add a user or user group with "user" access level.' %}
(<a class="crosslink" data-menu="#overview_menu" href="#how-can-i-create-groups">
{% trans "You can easily create groups if you need to" %}</a>)
</li>
</ol>
</blockquote>
<h3 id="how-can-i-create-a-vm-and-give-to-another-user">{% trans "How can I create a VM and give to another user?" %}</h3>
<blockquote>
<ol>
<li>{% trans "Start a virtual machine." %}</li>
<li>{% trans "On the machine's Access panel you can grant access for users and groups to the VM." %}</li>
</ol>
</blockquote>
<h3 id="how-can-i-portforward">{% trans "How can I open ports?" %}</h3>
<blockquote>
<ol>
<li>{% trans "On the VM’s detail page click on the Network panel." %}</li>
<li>{% trans "On the prefered interface type the port number, select type and click ‘Add’." %}</li>
<li>{% trans "You have to open this port in the firewall too. Opening port 80 examples: " %}<br>
<ul>
<li>Ubuntu, Debian: <code>sudo ufw allow 80</code></li>
<li>
CentOS, RHEL: {% trans "append to" %} <code>/etc/sysconfig/iptables</code>:<br/>
<code>iptables -A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT</code>
{% trans "and restart the service:" %} <code>sudo service iptables restart</code>
</li>
</ul>
</li>
<li>{% trans "Now you can connect to the machine with the generated port number." %}</li>
</ol>
</blockquote>
<h3 id="my-machines-lease-is-short-how-can-i-extend-it">{% trans "My machine's lease is too short. How can I extend it?" %}</h3>
<blockquote>
<p>
{% blocktrans %}You can send a request to the administrators. On the VM's home panel click on the ‘renew’ button and ‘send request’.
Please explain why you need a longer lease and choose the most suitable one.{% endblocktrans %}
</p>
</blockquote>
<h3 id="how-can-i-have-more-cpumemory">{% trans "How can I have more CPU/memory?" %}</h3>
<blockquote>
<p>
{% blocktrans %}
You can send a request to the administrators.
On the VM's resources panel click <strong>Request&nbsp;more&nbsp;resources</strong>, modify the values, explain your request and finally hit save.
{% endblocktrans %}
</p>
</blockquote>
<h3 id="how-can-i-get-access-to-a-template">{% trans "How can I get access to a template?" %}</h3>
<blockquote>
<p>
{% blocktrans %}
When you want to create a VM below the template list there is an option to send a request.
Select which template you want, explain why you need it and then submit the form.
{% endblocktrans %}
</p>
</blockquote>
circle/templates/info/help/faq_toc.html 0 → 100644
{% load i18n %}
<ul><a href="#faq">{% trans "FAQ" %}</a>
<li><a href="#how-can-i-create-and-share-a-template">{% trans "How can I create and share a template?" %}</a></li>
<li><a href="#how-can-i-create-a-vm-and-give-to-another-user">{% trans "How can I create a VM and give to another user?" %}</a></li>
<li><a href="#how-can-i-portforward">{% trans "How can I portforward?" %}</a></li>
<li><a href="#my-machines-lease-is-short-how-can-i-extend-it">{% trans "My machine’s lease is short. How can I extend it?" %}</a></li>
<li><a href="#how-can-i-have-more-cpumemory">{% trans "How can I have more CPU/memory?" %}</a></li>
<li><a href="#how-can-i-get-access-to-a-template">{% trans "How can I get acces to a template?" %}</a></li>
</li>
</ul>
circle/templates/info/help/overview_toc.html 0 → 100644
{% load i18n %}
<ul>
<a href="#overview">{% trans "Overview" %}</a>
<li><ul><a href="#introduction">{% trans "Introduction" %}</a></ul></li>
<li>
<ul><a href="#dashboard">{% trans "Dashboard" %}</a>
<li><a href="#virtual-machines-box">{% trans "Virtual Machines box" %}</a>
<ul>
<li><a href="#how-can-i-create-a-vm">{% trans "How can I create a VM?" %}</a></li>
<li><a href="#how-can-i-mark-frequently-used-vms">{% trans "How can I mark frequently used VMs?" %}</a></li>
<li><a href="#how-can-i-search-for-vms">{% trans "How can I search for VMs?" %}</a></li>
</ul>
</li>
<li><a href="#templates-box">{% trans "Templates box" %}</a></li>
</ul>
</li>
<li>
<ul><a href="#virtual-machines">{% trans "Virtual Machines" %}</a>
<li>
<ul><a href="#details">{% trans "Details" %}</a>
<li><a href="#how-can-i-connect-to-the-virtual-machine">{% trans "How can I connect to the virtual machine?" %}</a></li>
<li><a href="#how-can-i-change-the-vms-password">{% trans "How can I change the VM’s password?" %}</a></li>
</ul>
</li>
<li>
<ul><a href="#operations">{% trans "Operations" %}</a>
<li><a href="#what-kind-of-operations-are-allowed-to-do-with-my-vm">{% trans "What kind of operations are allowed to do with my VM?" %}</a></li>
<li>
</ul>
</li>
<li>
<ul><a href="#home">{% trans "Home" %}</a>
<li><a href="#expiration">{% trans "Expiration" %}</a></li>
<li><a href="#how-can-i-expand-the-vms-expiration-date">{% trans "How can I expand the VM’s expiration date?" %}</a></li>
<li><a href="#file-management">{% trans "File management" %}</a></li>
<li><a href="#how-can-i-share-previously-uploaded-files-with-the-vm">{% trans "How can I share previously uploaded files with the VM?" %}</a></li>
</ul>
</li>
<li><ul><a href="#resources">{% trans "Resources" %}</a></ul></li>
<li><a href="#console">{% trans "Console" %}</a></li>
<li><a href="#access">{% trans "Access" %}</a><ul>
<li><a href="#how-can-i-give-access-to-others">{% trans "How can I give access to others?" %}</a></li>
<li><a href="#what-kind-of-permissions-are-available">{% trans "What kind of permissions are available?" %}</a></li>
<li>
<ul><a href="#network">{% trans "Network" %}</a>
<li><a href="#how-can-i-add-a-network-interface">{% trans "How can I add a network interface?" %}</a></li>
</ul>
</li>
<li><a href="#activity">{% trans "Activity" %}</a></li>
<li><a href="#multiple-vm-operations">{% trans "Multiple VM operations" %}</a>
<li><a href="#how-can-i-show-shared-or-destroyed-vms">{% trans "How can I show shared or destroyed VMs?" %}</a></li>
</ul>
</li>
</ul>
</li>
<li>
<ul><a href="#templates">{% trans "Templates" %}</a>
<li><a href="#how-can-i-create-templates">{% trans "How can I create templates?" %}</a></li>
<li><a href="#what-kind-of-options-are-customizable-in-the-template">{% trans "What kind of options are customizable in the template?" %}</a></li>
<li><a href="#how-can-i-change-the-expiration-of-the-templates-vms">{% trans "How can I change the expiration of the tempalte's VMs" %}</a></li>
<li><a href="#how-can-i-give-the-template-to-other-user">{% trans "How can I give the template to other user" %}</a></li>
<li><a href="#how-can-i-give-access-to-users-or-groups-to-the-template">{% trans "How can I give access to users or groups to the template?"%}</a></li>
</ul>
</li>
<li>
<ul><a href="#groups">{% trans "Groups" %}</a>
<li><a href="#how-can-i-create-groups">{% trans "How can I create groups?" %}</a></li>
<li><a href="#how-can-i-manage-the-users-in-a-group">{% trans "How can I manage the users in a group?" %}</a></li>
<li><a href="#how-can-i-manage-privileges-with-the-group">{% trans "How can I manage privileges with the group?" %}</a></li>
</ul>
</li>
<li>
<ul><a href="#files">{% trans "Files" %}</a>
<li><a href="#how-can-i-share-my-files-with-a-vm">{% trans "How can I share my files with a VM?" %}</a></li>
</ul>
</li>
<li>
<ul><a href="#profile">{% trans "Profile" %}</a>
<li><a href="#how-can-i-change-my-password">{% trans "How can I change my password?" %}</a></li>
<li><a href="#how-can-i-store-public-keys-on-the-vms">{% trans "How can I store public keys on the VMs?" %}</a></li>
<li><a href="#how-can-i-change-connection-template">{% trans "How can I change connection template" %}</a></li>
</ul>
</li>
</ul>
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