Code resource usage cards of the dashboard.

This commit is contained in:
Santiago Lamora 2019-12-10 14:02:26 +01:00
parent 5abdcd56db
commit d6a3a8f559
3 changed files with 100 additions and 9 deletions

View File

@ -172,3 +172,51 @@ h1.service-name {
.service-card .card-body .service-brand i.fab { .service-card .card-body .service-brand i.fab {
color: #9C9AA7; 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;
}

View File

@ -3,20 +3,33 @@
{% block content %} {% block content %}
<h2>Welcome back {{ user.username }}</h2> <h2>{% trans "Welcome back" %} <strong>{{ profile.username }}</strong></h2>
<h3>Last time you logged in was {{ user.last_login }}</h3> <p>{% blocktrans with last_login=profile.last_login|default:"N/A" %}Last time you logged in was: {{ last_login }}{% endblocktrans %}</p>
<div class="row"> <div class="card-deck">
{% for i in "1234"|make_list %} {% for resource, usage in resource_usage.items %}
<div class="col-3 border"> <div class="card resource-usage resource-{{ resource }}">
Resource usage block <div class="card-body">
<h5 class="card-title">{{ usage.verbose_name }}</h5>
{% include "musician/components/usage_progress_bar.html" with detail=usage %}
</div>
</div> </div>
{% endfor %} {% 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> </div>
<h1>Domains and websites</h1> <h1 class="service-name">{% trans "Your domains and websites" %}</h1>
<p>Little description of what to be expected...</p> <p class="service-description">Little description of what to be expected...</p>
{% for domain in domains %} {% for domain in domains %}
<div class="row border mt-4"> <div class="row border mt-4">

View File

@ -6,6 +6,7 @@ from django.http import HttpResponseRedirect
from django.shortcuts import render from django.shortcuts import render
from django.urls import reverse_lazy from django.urls import reverse_lazy
from django.utils.http import is_safe_url 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.base import RedirectView, TemplateView
from django.views.generic.detail import DetailView from django.views.generic.detail import DetailView
from django.views.generic.edit import FormView from django.views.generic.edit import FormView
@ -30,8 +31,37 @@ class DashboardView(CustomContextMixin, UserTokenRequiredMixin, TemplateView):
# TODO retrieve all data needed from orchestra # TODO retrieve all data needed from orchestra
raw_domains = self.orchestra.retrieve_service_list('domain') 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 = []
context.update({ context.update({
'domains': raw_domains 'domains': raw_domains,
'resource_usage': resource_usage,
'notifications': notifications,
}) })
return context return context