Merge branch 'gui-dashboard'
This commit is contained in:
Santiago Lamora
commit
20da66cfec
|
|
@ -4,6 +4,9 @@ import urllib.parse
|
|||
from django.conf import settings
|
||||
from django.urls.exceptions import NoReverseMatch
|
||||
|
||||
from .models import Domain, DatabaseService, MailService, SaasService, UserAccount
|
||||
|
||||
|
||||
DOMAINS_PATH = 'domains/'
|
||||
TOKEN_PATH = '/api-token-auth/'
|
||||
|
||||
|
|
@ -52,9 +55,11 @@ class Orchestra(object):
|
|||
|
||||
return response.json().get("token", None)
|
||||
|
||||
def request(self, verb, resource, raise_exception=True):
|
||||
def request(self, verb, resource, querystring=None, raise_exception=True):
|
||||
assert verb in ["HEAD", "GET", "POST", "PATCH", "PUT", "DELETE"]
|
||||
url = self.build_absolute_uri(resource)
|
||||
if querystring is not None:
|
||||
url = "{}?{}".format(url, querystring)
|
||||
|
||||
verb = getattr(self.session, verb.lower())
|
||||
response = verb(url, headers={"Authorization": "Token {}".format(
|
||||
|
|
@ -68,16 +73,45 @@ class Orchestra(object):
|
|||
|
||||
return status, output
|
||||
|
||||
def retrieve_service_list(self, service_name):
|
||||
def retrieve_service_list(self, service_name, querystring=None):
|
||||
pattern_name = '{}-list'.format(service_name)
|
||||
if pattern_name not in API_PATHS:
|
||||
raise ValueError("Unknown service {}".format(service_name))
|
||||
_, output = self.request("GET", pattern_name)
|
||||
_, output = self.request("GET", pattern_name, querystring=querystring)
|
||||
return output
|
||||
|
||||
def retreve_profile(self):
|
||||
_, output = self.request("GET", 'my-account')
|
||||
return output
|
||||
def retrieve_profile(self):
|
||||
status, output = self.request("GET", 'my-account')
|
||||
if status >= 400:
|
||||
raise PermissionError("Cannot retrieve profile of an anonymous user.")
|
||||
return UserAccount.new_from_json(output[0])
|
||||
|
||||
def retrieve_domain_list(self):
|
||||
output = self.retrieve_service_list(Domain.api_name)
|
||||
domains = []
|
||||
for domain_json in output:
|
||||
# filter querystring
|
||||
querystring = "domain={}".format(domain_json['id'])
|
||||
|
||||
# retrieve services associated to a domain
|
||||
domain_json['mails'] = self.retrieve_service_list(
|
||||
MailService.api_name, querystring)
|
||||
# TODO(@slamora): databases and sass are not related to a domain, so cannot be filtered
|
||||
# domain_json['databases'] = self.retrieve_service_list(DatabaseService.api_name, querystring)
|
||||
# domain_json['saas'] = self.retrieve_service_list(SaasService.api_name, querystring)
|
||||
|
||||
# TODO(@slamora): update when backend provides resource disk usage data
|
||||
domain_json['usage'] = {
|
||||
'usage': 300,
|
||||
'total': 650,
|
||||
'unit': 'MB',
|
||||
'percent': 50,
|
||||
}
|
||||
|
||||
# append to list a Domain object
|
||||
domains.append(Domain.new_from_json(domain_json))
|
||||
|
||||
return domains
|
||||
|
||||
def verify_credentials(self):
|
||||
"""
|
||||
|
|
|
|||
|
|
@ -46,6 +46,11 @@ class ExtendedPaginationMixin:
|
|||
|
||||
|
||||
class UserTokenRequiredMixin(UserPassesTestMixin):
|
||||
"""
|
||||
Checks that the request has a token that authenticates him/her.
|
||||
If the user is logged adds context variable 'profile' with its information.
|
||||
"""
|
||||
|
||||
def test_func(self):
|
||||
"""Check that the user has an authorized token."""
|
||||
token = self.request.session.get(SESSION_KEY_TOKEN, None)
|
||||
|
|
@ -60,3 +65,10 @@ class UserTokenRequiredMixin(UserPassesTestMixin):
|
|||
return False
|
||||
|
||||
return True
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
context = super().get_context_data(**kwargs)
|
||||
context.update({
|
||||
'profile': self.orchestra.retrieve_profile(),
|
||||
})
|
||||
return context
|
||||
|
|
|
|||
|
|
@ -39,6 +39,12 @@ class OrchestraModel:
|
|||
c.data = data
|
||||
return c
|
||||
|
||||
def __repr__(self):
|
||||
return '<%s: %s>' % (self.__class__.__name__, self)
|
||||
|
||||
def __str__(self):
|
||||
return '%s object (%s)' % (self.__class__.__name__, self.id)
|
||||
|
||||
|
||||
class BillingContact(OrchestraModel):
|
||||
param_defaults = {
|
||||
|
|
@ -117,6 +123,37 @@ class DatabaseService(OrchestraModel):
|
|||
return super().new_from_json(data=data, users=users, usage=usage)
|
||||
|
||||
|
||||
class Domain(OrchestraModel):
|
||||
api_name = 'domain'
|
||||
param_defaults = {
|
||||
"id": None,
|
||||
"name": None,
|
||||
"records": [],
|
||||
"mails": [],
|
||||
"usage": {},
|
||||
}
|
||||
|
||||
@classmethod
|
||||
def new_from_json(cls, data, **kwargs):
|
||||
records = cls.param_defaults.get("records")
|
||||
if 'records' in data:
|
||||
records = [DomainRecord.new_from_json(record_data) for record_data in data['records']]
|
||||
|
||||
return super().new_from_json(data=data, records=records)
|
||||
|
||||
def __str__(self):
|
||||
return self.name
|
||||
|
||||
|
||||
class DomainRecord(OrchestraModel):
|
||||
param_defaults = {
|
||||
"type": None,
|
||||
"value": None,
|
||||
}
|
||||
def __str__(self):
|
||||
return '<%s: %s>' % (self.type, self.value)
|
||||
|
||||
|
||||
class MailService(OrchestraModel):
|
||||
api_name = 'address'
|
||||
verbose_name = _('Mail addresses')
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
# allowed resources limit hardcoded because cannot be retrieved from the API.
|
||||
ALLOWED_RESOURCES = {
|
||||
'INDIVIDUAL':
|
||||
{
|
||||
# 'disk': 1024,
|
||||
# 'traffic': 2048,
|
||||
'mailbox': 2,
|
||||
},
|
||||
'ASSOCIATION': {
|
||||
# 'disk': 5 * 1024,
|
||||
# 'traffic': 20 * 1024,
|
||||
'mailbox': 10,
|
||||
}
|
||||
}
|
||||
|
|
@ -172,3 +172,81 @@ h1.service-name {
|
|||
.service-card .card-body .service-brand i.fab {
|
||||
color: #9C9AA7;
|
||||
}
|
||||
|
||||
.card.resource-usage {
|
||||
border-left: 5px solid #4C426A;
|
||||
}
|
||||
|
||||
.card.resource-usage .progress {
|
||||
height: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.card.resource-usage h5.card-title {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card.resource-usage h5.card-title:after {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
|
||||
color: #E8E7EB;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.card.resource-usage.resource-disk h5.card-title:after {
|
||||
content: "\f0a0";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.card.resource-usage.resource-traffic h5.card-title:after {
|
||||
content: "\f362";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.card.resource-usage.resource-mailbox h5.card-title:after {
|
||||
content: "\f0e0";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.card.resource-usage.resource-notifications h5.card-title:after {
|
||||
content: "\f0f3";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#configDetailsModal .modal-header {
|
||||
border-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#configDetailsModal .modal-header .modal-title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#configDetailsModal .modal-body {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
#configDetailsModal .modal-body label {
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
padding-right: 4%;
|
||||
}
|
||||
|
||||
#configDetailsModal .modal-body span {
|
||||
display: inline-block;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
#configDetailsModal .modal-footer {
|
||||
border-top: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
<div class="dropdown dropright">
|
||||
<button type="button" class="btn btn-primary nav-link text-light w-100" data-toggle="dropdown">
|
||||
<img id="user-avatar" class="float-right" width="64" height="64" src="{% static "musician/images/default-profile-picture.png" %}" alt="user-profile-picture"/>
|
||||
<strong>{{ user.username|default:"Username" }}</strong><br/>
|
||||
<strong>{{ profile.username }}</strong><br/>
|
||||
<i class="fas fa-cog"></i> Settings
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
|
|
@ -93,6 +93,7 @@
|
|||
<script src="{% static "musician/js/jquery-3.3.1.slim.min.js" %}"></script>
|
||||
<script src="{% static "musician/js/popper.min.js" %}"></script>
|
||||
<script src="{% static "musician/js/bootstrap.min.js" %}"></script>
|
||||
{% block extrascript %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -3,38 +3,140 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
<h2>Welcome back {{ user.username }}</h2>
|
||||
<h3>Last time you logged in was {{ user.last_login }}</h3>
|
||||
<h2>{% trans "Welcome back" %} <strong>{{ profile.username }}</strong></h2>
|
||||
<p>{% blocktrans with last_login=profile.last_login|default:"N/A" %}Last time you logged in was: {{ last_login }}{% endblocktrans %}</p>
|
||||
|
||||
<div class="row">
|
||||
{% for i in "1234"|make_list %}
|
||||
<div class="col-3 border">
|
||||
Resource usage block
|
||||
<div class="card-deck">
|
||||
{% for resource, usage in resource_usage.items %}
|
||||
<div class="card resource-usage resource-{{ resource }}">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ usage.verbose_name }}</h5>
|
||||
{% include "musician/components/usage_progress_bar.html" with detail=usage %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="card resource-usage resource-notifications">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{% trans "Notifications" %}</h5>
|
||||
{% for message in notifications %}
|
||||
<p class="card-text">{{ message }}</p>
|
||||
{% empty %}
|
||||
<p class="card-text">{% trans "There is no notifications at this time." %}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h1>Domains and websites</h1>
|
||||
<p>Little description of what to be expected...</p>
|
||||
<h1 class="service-name">{% trans "Your domains and websites" %}</h1>
|
||||
<p class="service-description">Little description of what to be expected...</p>
|
||||
|
||||
{% for domain in domains %}
|
||||
<div class="row border mt-4">
|
||||
<div class="col-12 bg-light">
|
||||
<h3>{{ domain.name }}</h3>
|
||||
<div class="card service-card">
|
||||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<strong>{{ domain.name }}</strong>
|
||||
</div>
|
||||
{% for service in "123"|make_list %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{% cycle 'Mail' 'Mailing list' 'Databases' %}</h5>
|
||||
<div class="col-md-8">
|
||||
<button type="button" class="btn text-secondary" data-toggle="modal" data-target="#configDetailsModal"
|
||||
data-domain="{{ domain.name }}" data-username="john" data-password="s3cre3t" data-root="/domainname/">
|
||||
{% trans "view configuration" %} <strong class="fas fa-tools"></strong>
|
||||
</button>
|
||||
</div>
|
||||
<img class="card-img-bottom" src="..." alt="Card image cap">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
||||
content.</p>
|
||||
<div class="col-md text-right">
|
||||
{% trans "Expiration date" %}: <strong>{{ domain.expiration_date|date:"SHORT_DATE_FORMAT" }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor card %}
|
||||
</div><!-- /card-header-->
|
||||
<div class="card-body row text-center">
|
||||
<div class="col-md-2 border-right">
|
||||
<h4>{% trans "Mail" %}</h4>
|
||||
<p class="card-text"><i class="fas fa-envelope fa-3x"></i></p>
|
||||
<p class="card-text text-dark">
|
||||
{{ domain.mails|length }} {% trans "mail addresses created" %}
|
||||
{% if domain.address_left.alert %}
|
||||
<br/>
|
||||
<span class="text-{{ domain.address_left.alert }}">{{ domain.address_left.count }} mail address left</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
<a class="stretched-link" href="{% url 'musician:mails' %}?domain={{ domain.id }}"></a>
|
||||
</div>
|
||||
<div class="col-md-2 border-right">
|
||||
<h4>{% trans "Mail list" %}</h4>
|
||||
<p class="card-text"><i class="fas fa-mail-bulk fa-3x"></i></p>
|
||||
<a class="stretched-link" href="{% url 'musician:mailing-lists' %}?domain={{ domain.id }}"></a>
|
||||
</div>
|
||||
<div class="col-md-2 border-right">
|
||||
<h4>{% trans "Databases" %}</h4>
|
||||
<p class="card-text"><i class="fas fa-database fa-3x"></i></p>
|
||||
<p class="card-text text-dark">
|
||||
0 {% trans "databases created" %}
|
||||
{% comment %}
|
||||
<!-- TODO databases related to a domain and resource usage
|
||||
{{ domain.databases|length }} {% trans "databases created" %}<br/>
|
||||
20 MB of 45MB
|
||||
-->
|
||||
{% endcomment %}
|
||||
</p>
|
||||
<a class="stretched-link" href="{% url 'musician:databases' %}?domain={{ domain.id }}"></a>
|
||||
</div>
|
||||
<div class="col-md-2 border-right">
|
||||
<h4>{% trans "Software as a Service" %}</h4>
|
||||
<p class="card-text"><i class="fas fa-fire fa-3x"></i></p>
|
||||
<p class="card-text text-dark">Nothing installed</p>
|
||||
<a class="stretched-link" href="{% url 'musician:saas' %}?domain={{ domain.id }}"></a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h4>{% trans "Disk usage" %}</h4>
|
||||
<p class="card-text"><i class="fas fa-hdd fa-3x"></i></p>
|
||||
<div class="w-75 m-auto">
|
||||
{% include "musician/components/usage_progress_bar.html" with detail=domain.usage %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
<!-- configuration details modal -->
|
||||
<div class="modal fade" id="configDetailsModal" tabindex="-1" role="dialog" aria-labelledby="configDetailsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title text-secondary" id="configDetailsModalLabel">Configuration details</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6 class="pl-4 mb-4">{% trans "FTP access:" %}</h6>
|
||||
<div class="">
|
||||
<p>
|
||||
<label>{% trans "Username" %}:</label> <span id="config-username" class="font-weight-bold">username</span><br/>
|
||||
<label>{% trans "Password:" %}</label> <span id="config-password" class="font-weight-bold">password</span>
|
||||
</p>
|
||||
<p class="border-top pt-3"><label>Root directory:</label> <span id="config-root" class="font-weight-bold">root directory</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary">{% trans "View DNS records" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block extrascript %}
|
||||
<script>
|
||||
$('#configDetailsModal').on('show.bs.modal', function (event) {
|
||||
var button = $(event.relatedTarget); // Button that triggered the modal
|
||||
var modal = $(this);
|
||||
|
||||
// Extract info from data-* attributes
|
||||
modal.find('.modal-title').text(button.data('domain'));
|
||||
modal.find('.modal-body #config-username').text(button.data('username'));
|
||||
modal.find('.modal-body #config-password').text(button.data('password'));
|
||||
modal.find('.modal-body #config-root').text(button.data('root'));
|
||||
})
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ from django.http import HttpResponseRedirect
|
|||
from django.shortcuts import render
|
||||
from django.urls import reverse_lazy
|
||||
from django.utils.http import is_safe_url
|
||||
from django.utils.translation import gettext_lazy as _
|
||||
from django.views.generic.base import RedirectView, TemplateView
|
||||
from django.views.generic.detail import DetailView
|
||||
from django.views.generic.edit import FormView
|
||||
|
|
@ -19,6 +20,7 @@ from .mixins import (CustomContextMixin, ExtendedPaginationMixin,
|
|||
UserTokenRequiredMixin)
|
||||
from .models import (DatabaseService, MailinglistService, MailService,
|
||||
PaymentSource, SaasService, UserAccount)
|
||||
from .settings import ALLOWED_RESOURCES
|
||||
|
||||
|
||||
class DashboardView(CustomContextMixin, UserTokenRequiredMixin, TemplateView):
|
||||
|
|
@ -26,12 +28,56 @@ class DashboardView(CustomContextMixin, UserTokenRequiredMixin, TemplateView):
|
|||
|
||||
def get_context_data(self, **kwargs):
|
||||
context = super().get_context_data(**kwargs)
|
||||
domains = self.orchestra.retrieve_domain_list()
|
||||
|
||||
# TODO retrieve all data needed from orchestra
|
||||
raw_domains = self.orchestra.retrieve_service_list('domain')
|
||||
# TODO(@slamora) update when backend provides resource usage data
|
||||
resource_usage = {
|
||||
'disk': {
|
||||
'verbose_name': _('Disk usage'),
|
||||
'usage': 534,
|
||||
'total': 1024,
|
||||
'unit': 'MB',
|
||||
'percent': 50,
|
||||
},
|
||||
'traffic': {
|
||||
'verbose_name': _('Traffic'),
|
||||
'usage': 300,
|
||||
'total': 2048,
|
||||
'unit': 'MB/month',
|
||||
'percent': 25,
|
||||
},
|
||||
'mailbox': {
|
||||
'verbose_name': _('Mailbox usage'),
|
||||
'usage': 1,
|
||||
'total': 2,
|
||||
'unit': 'accounts',
|
||||
'percent': 50,
|
||||
},
|
||||
}
|
||||
|
||||
# TODO(@slamora) update when backend supports notifications
|
||||
notifications = []
|
||||
|
||||
# show resource usage based on plan definition
|
||||
# TODO(@slamora): validate concept of limits with Pangea
|
||||
profile_type = context['profile'].type
|
||||
for domain in domains:
|
||||
address_left = ALLOWED_RESOURCES[profile_type]['mailbox'] - len(domain.mails)
|
||||
alert = None
|
||||
if address_left == 1:
|
||||
alert = 'warning'
|
||||
elif address_left < 1:
|
||||
alert = 'danger'
|
||||
|
||||
domain.address_left = {
|
||||
'count': address_left,
|
||||
'alert': alert,
|
||||
}
|
||||
|
||||
context.update({
|
||||
'domains': raw_domains
|
||||
'domains': domains,
|
||||
'resource_usage': resource_usage,
|
||||
'notifications': notifications,
|
||||
})
|
||||
|
||||
return context
|
||||
|
|
@ -60,14 +106,12 @@ class ProfileView(CustomContextMixin, UserTokenRequiredMixin, TemplateView):
|
|||
|
||||
def get_context_data(self, **kwargs):
|
||||
context = super().get_context_data(**kwargs)
|
||||
json_data = self.orchestra.retreve_profile()
|
||||
try:
|
||||
pay_source = self.orchestra.retrieve_service_list(
|
||||
PaymentSource.api_name)[0]
|
||||
except IndexError:
|
||||
pay_source = {}
|
||||
context.update({
|
||||
'profile': UserAccount.new_from_json(json_data[0]),
|
||||
'payment': PaymentSource.new_from_json(pay_source)
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue