Create and code styles of saas view.

musician/static/musician/css/default.css

@@ -168,3 +168,7 @@ h1.service-name {
 .service-card .service-manager-link a i.fas {
     color: white;
 }
+
+.service-card .card-body .service-brand i.fab {
+    color: #9C9AA7;
+}

musician/templates/musician/saas.html

@@ -3,7 +3,41 @@
 
 {% block content %}
 
-<h1>Section title</h1>
-<p>Little description of what to be expected...</p>
+<h1 class="service-name">{{ service.verbose_name }}</h1>
+<p class="service-description">{{ service.description }}</p>
+
+{% for saas in object_list %}
+  <div class="card service-card">
+    <div class="card-header">
+      <div class="row">
+        <div class="col-md-8">
+          <strong>{{ saas.name }}</strong>
+        </div>
+        <div class="col-md text-right">
+            {% trans "Installed on" %}: <strong>{{ saas.domain|default:"-" }}</strong>
+        </div>
+      </div>
+    </div><!-- /card-header-->
+    <div class="card-body row">
+        <div class="col-md-4">
+          <h4>{{ saas.service|capfirst }}</h4>
+          <p class="text-center service-brand"><i class="fab fa-{{ saas.service }} fa-10x"></i></p>
+        </div>
+        <div class="col-md-3 border-left border-right">
+            <h4>{% trans "Service info" %}</h4>
+            <p>{% trans "Active" %}: {{ saas.is_active|yesno }}</p>
+            {# TODO (@slamora): implement saas details #}
+            <pre>
+                {{ saas.data }}
+            </pre>
+        </div>
+        <div class="col-md-5 text-right">
+          <div class="service-manager-link">
+            <a class="btn btn-primary" href="#open-service">{% trans "Open service admin panel" %} <i class="fas fa-external-link-alt"></i></a>
+          </div>
+        </div>
+      </div>
+    </div>
+{% endfor %}
 
 {% endblock %}

musician/views.py

@@ -1,5 +1,4 @@
 
-from django.views.generic.detail import DetailView
 from itertools import groupby
 
 from django.core.exceptions import ImproperlyConfigured
@@ -8,6 +7,7 @@ from django.shortcuts import render
 from django.urls import reverse_lazy
 from django.utils.http import is_safe_url
 from django.views.generic.base import RedirectView, TemplateView
+from django.views.generic.detail import DetailView
 from django.views.generic.edit import FormView
 from django.views.generic.list import ListView
 
@@ -15,9 +15,10 @@ from . import api, get_version
 from .auth import login as auth_login
 from .auth import logout as auth_logout
 from .forms import LoginForm
-from .mixins import (CustomContextMixin,
-                     ExtendedPaginationMixin, UserTokenRequiredMixin)
-from .models import DatabaseService, MailinglistService, MailService, UserAccount, PaymentSource
+from .mixins import (CustomContextMixin, ExtendedPaginationMixin,
+                     UserTokenRequiredMixin)
+from .models import (DatabaseService, MailinglistService, MailService,
+                     PaymentSource, SaasService, UserAccount)
 
 
 class DashboardView(CustomContextMixin, UserTokenRequiredMixin, TemplateView):
@@ -135,7 +136,8 @@ class DatabasesView(ServiceListView):
     service_class = DatabaseService
 
 
-class SaasView(CustomContextMixin, UserTokenRequiredMixin, TemplateView):
+class SaasView(ServiceListView):
+    service_class = SaasService
     template_name = "musician/saas.html"