Code styles of databases view.

This commit is contained in:
Santiago Lamora 2019-12-04 14:13:56 +01:00
parent 525f17e8b5
commit e59761a709
3 changed files with 68 additions and 27 deletions

View File

@ -90,12 +90,14 @@ class DatabaseUser(OrchestraModel):
class DatabaseService(OrchestraModel): class DatabaseService(OrchestraModel):
api_name = 'database' api_name = 'database'
verbose_name = _('Databases')
fields = ('name', 'type', 'users') fields = ('name', 'type', 'users')
param_defaults = { param_defaults = {
"id": None, "id": None,
"name": None, "name": None,
"type": None, "type": None,
"users": None, "users": None,
"usage": {},
} }
@classmethod @classmethod
@ -103,7 +105,16 @@ class DatabaseService(OrchestraModel):
users = None users = None
if 'users' in data: if 'users' in data:
users = [DatabaseUser.new_from_json(user_data) for user_data in data['users']] 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): class MailService(OrchestraModel):

View File

@ -98,7 +98,8 @@ h1.service-name {
table-layout: fixed; table-layout: fixed;
} }
/** TODO update theme instead of overriding **/ /** 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); background: rgba(80, 70, 110, 0.25);
color: #50466E; color: #50466E;
border-color: transparent; border-color: transparent;
@ -138,3 +139,32 @@ h1.service-name {
.service-list tfoot tr td { .service-list tfoot tr td {
padding-top: 3rem; 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;
}

View File

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