Code styles of databases view.

musician/models.py

@@ -90,12 +90,14 @@ class DatabaseUser(OrchestraModel):
 
 class DatabaseService(OrchestraModel):
     api_name = 'database'
+    verbose_name = _('Databases')
     fields = ('name', 'type', 'users')
     param_defaults = {
         "id": None,
         "name": None,
         "type": None,
         "users": None,
+        "usage": {},
     }
 
     @classmethod
@@ -103,7 +105,16 @@ class DatabaseService(OrchestraModel):
         users = None
         if 'users' in data:
             users = [DatabaseUser.new_from_json(user_data) for user_data in data['users']]
-        return super().new_from_json(data=data, users=users)
+
+        # TODO(@slamora) retrieve database usage
+        usage = {
+            'usage': 250,
+            'total': 500,
+            'unit': 'MB',
+            'percent': 50,
+        }
+
+        return super().new_from_json(data=data, users=users, usage=usage)
 
 
 class MailService(OrchestraModel):

musician/static/musician/css/default.css

@@ -98,7 +98,8 @@ h1.service-name {
     table-layout: fixed;
 }
 /** TODO update theme instead of overriding **/
-.service-list thead.thead-dark th {
+.service-list thead.thead-dark th,
+.service-card .card-header {
     background: rgba(80, 70, 110, 0.25);
     color: #50466E;
     border-color: transparent;
@@ -138,3 +139,32 @@ h1.service-name {
 .service-list tfoot tr td {
     padding-top: 3rem;
 }
+
+.service-card {
+    margin-bottom: 3rem;
+}
+
+.service-card .card-body h4 {
+    color: #50466E;
+    font-weight: bold;
+}
+
+.service-card .card-body {
+    color: #787878;
+
+}
+
+.service-card .card-body i.fas {
+    color:#9C9AA7;
+}
+
+.service-manager-link {
+    position: absolute;
+    bottom: 0px;
+    right: 15px;
+}
+
+.service-card .service-manager-link a,
+.service-card .service-manager-link a i.fas {
+    color: white;
+}

musician/templates/musician/databases.html

@@ -3,45 +3,45 @@
 
 {% block content %}
 
-<h1>{{ service.verbose_name }}</h1>
-<p>{{ service.description }}</p>
+<h1 class="service-name">{{ service.verbose_name }}</h1>
+<p class="service-description">{{ service.description }}</p>
 
 {% for database in object_list %}
-  <div class="card">
-    <div class="card-header row">
+  <div class="card service-card">
+    <div class="card-header">
+      <div class="row">
         <div class="col-md-8">
           <strong>{{ database.name }}</strong>
         </div>
         <div class="col-md">
-        Type: <strong>{{ database.type }}</strong>
+          {% trans "Type" %}: <strong>{{ database.type }}</strong>
         </div>
         <div class="col-md text-right">
-          associated to: <strong>{{ database.domain|default:"-" }}</strong>
-        <div class="card-collapse-button d-inline-block nav-item dropdown">
-          <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
-          </button>
+            {% trans "associated to" %}: <strong>{{ database.domain|default:"-" }}</strong>
         </div>
       </div>
     </div><!-- /card-header-->
     <div class="card-body row">
       <div class="col-md-4">
         <h4>Database users</h4>
-        <ul>
-        {% for user in resource.users %}
-          <li>{{ user.username }}</li>
+        <ul class="list-unstyled pl-2">
+        {% for user in database.users %}
+          {# TODO(@slamora) render in two columns #}
+          <li><span class="d-inline-block w-25">{{ user.username }}</span> <i class="fas fa-user-edit"></i></li>
         {% empty %}
-          <li>No users for this database.</li>
+          <li>{% trans "No users for this database." %}</li>
         {% endfor %}
         </ul>
       </div>
-      <div class="col-md-2 border-left border-right">
+      <div class="col-md-3 border-left border-right">
           <h4>Database usage</h4>
-          <div class="progress">
-              <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
+          <p class="text-center"><i class="fas fa-database fa-3x"></i></p>
+          {% include "musician/components/usage_progress_bar.html" with detail=database.usage %}
       </div>
+      <div class="col-md-5 text-right">
+        <div class="service-manager-link">
+          <a class="btn btn-primary" href="#open-phpmyadmin">{% trans "Open database manager" %} <i class="fas fa-external-link-alt"></i></a>
         </div>
-      <div class="col-md-6 text-right">
-        <a class="btn btn-secondary" href="#open-phpmyadmin">Open database manager</a>
       </div>
     </div>
   </div>