Code resource usage cards of the dashboard.

musician/static/musician/css/default.css

@@ -172,3 +172,51 @@ 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;
+}

musician/templates/musician/dashboard.html

@@ -3,20 +3,33 @@
 
 {% 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">

musician/views.py

@@ -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
@@ -30,8 +31,37 @@ class DashboardView(CustomContextMixin, UserTokenRequiredMixin, TemplateView):
         # 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 = []
+
         context.update({
-            'domains': raw_domains
+            'domains': raw_domains,
+            'resource_usage': resource_usage,
+            'notifications': notifications,
         })
 
         return context