Added global monitoring section in new UI

It also includes a graphic about accounts creation and global parameters
for maillog app.

docker/Dockerfile.dev

@@ -7,7 +7,7 @@ ENV PATH="$VIRTUAL_ENV/bin:$PATH"
 FROM base as build
 
 RUN apk add --update openssl librrd python3-dev libffi-dev gcc g++ musl-dev libxml2-dev libxslt-dev \
-    libressl-dev jpeg-dev rrdtool-dev file make gettext freetype-dev \
+    libressl-dev jpeg-dev rrdtool-dev file make gettext freetype-dev cairo-dev \
     && rm -rf /var/cache/apk/*
 RUN python3 -m venv $VIRTUAL_ENV
 WORKDIR /tmp

frontend/src/components/layout/Navbar.vue

@@ -184,9 +184,14 @@ export default {
         },
         {
           icon: 'mdi-history',
-          text: this.$gettext('Logs'),
+          text: this.$gettext('Monitoring'),
           roles: ['SuperAdmins', 'Resellers', 'DomainAdmins'],
           children: [
+            {
+              text: this.$gettext('Statistics'),
+              to: { name: 'Statistics' },
+              roles: ['SuperAdmins']
+            },
             {
               text: this.$gettext('Audit trail'),
               to: { name: 'AuditTrail' },

frontend/src/components/tools/TimeSerieChart.vue

@@ -65,7 +65,14 @@ export default {
     apexchart: VueApexCharts,
     DateField
   },
-  props: ['domain', 'graphicSet', 'graphicName'],
+  props: {
+    domain: {
+      type: Object,
+      required: false
+    },
+    graphicSet: String,
+    graphicName: String
+  },
   computed: {
     title () {
       if (this.statistics) {
@@ -133,8 +140,10 @@ export default {
       const args = {
         graphSet: this.graphicSet,
         period: this.period,
-        graphicName: this.graphicName,
-        searchQuery: this.domain.name
+        graphicName: this.graphicName
+      }
+      if (this.domain) {
+        args.searchQuery = this.domain.name
       }
       if (this.period === 'custom') {
         args.start = this.start
@@ -149,7 +158,7 @@ export default {
     this.fetchStatistics()
   },
   watch: {
-    graphicName (newValue) {
+    graphicName () {
       this.$set(this.options, 'colors', this.getColors())
     }
   }

frontend/src/router/index.js

@@ -152,18 +152,27 @@ const routes = [
     }
   },
   {
-    path: '/logs/audit_trail',
-    name: 'AuditTrail',
-    component: () => import('../views/logs/AuditTrail.vue'),
+    path: '/monitoring/statistics',
+    name: 'Statistics',
+    component: () => import('../views/monitoring/Statistics.vue'),
     meta: {
       requiresAuth: true,
       allowedRoles: ['SuperAdmins']
     }
   },
   {
-    path: '/logs/messages',
+    path: '/monitoring/audit_trail',
+    name: 'AuditTrail',
+    component: () => import('../views/monitoring/AuditTrail.vue'),
+    meta: {
+      requiresAuth: true,
+      allowedRoles: ['SuperAdmins']
+    }
+  },
+  {
+    path: '/monitoring/messages',
     name: 'MessageLog',
-    component: () => import('../views/logs/Messages.vue'),
+    component: () => import('../views/monitoring/Messages.vue'),
     meta: {
       requiresAuth: true,
       allowedRoles: ['DomainAdmins', 'SuperAdmins']

frontend/src/views/monitoring/Statistics.vue

@@ -0,0 +1,45 @@
+<template>
+<div>
+  <v-toolbar flat>
+    <v-toolbar-title><translate>Statistics</translate></v-toolbar-title>
+  </v-toolbar>
+  <v-layout class="pa-2">
+    <v-row class="mt-2">
+      <v-col cols="12">
+        <time-serie-chart
+          graphic-set="mailtraffic"
+          graphic-name="averagetraffic"
+          />
+      </v-col>
+      <v-col cols="12">
+        <time-serie-chart
+          graphic-set="mailtraffic"
+          graphic-name="averagetrafficsize"
+          />
+      </v-col>
+      <v-col cols="12">
+        <time-serie-chart
+          graphic-set="accountgraphicset"
+          graphic-name="accountcreationgraphic"
+          />
+      </v-col>
+    </v-row>
+  </v-layout>
+</div>
+</template>
+
+<script>
+import TimeSerieChart from '@/components/tools/TimeSerieChart'
+
+export default {
+  components: {
+    TimeSerieChart
+  }
+}
+</script>
+
+<style scoped>
+.v-toolbar {
+  background-color: #f7f8fa !important;
+}
+</style>

modoboa/maillog/api/v2/serializers.py

@@ -75,3 +75,12 @@ class MaillogSerializer(serializers.ModelSerializer):
             "size", "status"
         )
         model = models.Maillog
+
+
+class MaillogGlobalParemetersSerializer(serializers.Serializer):
+    """A serializer for global parameters."""
+
+    logfile = serializers.CharField(default="/var/log/mail.log")
+    rrd_rootdir = serializers.CharField(default="/tmp/modoboa")
+    greylist = serializers.BooleanField(default=False)
+    enable_domain_limits = serializers.BooleanField(default=False)

modoboa/maillog/apps.py

@@ -1,8 +1,44 @@
 """AppConfig for stats."""
 
-from django.apps import AppConfig
+import collections
 
-from .forms import load_settings
+from django.apps import AppConfig
+from django.utils.translation import gettext, gettext_lazy as _
+
+
+GLOBAL_PARAMETERS_STRUCT = collections.OrderedDict([
+    ("general", {
+        "label": _("General"),
+        "params": collections.OrderedDict([
+            ("logfile", {
+                "label": _("Path to the log file"),
+                "help_text": _("Path to log file used to collect statistics")
+            }),
+            ("rrd_rootdir", {
+                "label": _("Directory to store RRD files"),
+                "help_text": _("Path to directory where RRD files are stored")
+            }),
+            ("greylist", {
+                "label": _("Show greylisted messages"),
+                "help_text": _("Differentiate between hard and soft rejects (greylisting)")
+            })
+        ])
+    })
+])
+
+
+def load_maillog_settings():
+    """Load app settings."""
+    from modoboa.maillog import forms
+    from modoboa.maillog.api.v2 import serializers
+    from modoboa.parameters import tools as param_tools
+
+    param_tools.registry.add(
+        "global", forms.ParametersForm, gettext("Statistics"))
+    param_tools.registry.add2(
+        "global", "maillog", gettext("Statistics"), GLOBAL_PARAMETERS_STRUCT,
+        serializers.MaillogGlobalParemetersSerializer
+    )
 
 
 class MaillogConfig(AppConfig):
@@ -12,5 +48,5 @@ class MaillogConfig(AppConfig):
     verbose_name = "Modoboa graphical statistics"
 
     def ready(self):
-        load_settings()
+        load_maillog_settings()
         from . import handlers

modoboa/maillog/forms.py

@@ -49,11 +49,3 @@ class ParametersForm(param_forms.AdminParametersForm):
         test_mode = getattr(settings, "RRDTOOL_TEST_MODE", False)
         if rrd_version < required_version and not test_mode:
             del self.fields["greylist"]
-
-
-def load_settings():
-    """Load app settings."""
-    from modoboa.parameters import tools as param_tools
-
-    param_tools.registry.add(
-        "global", ParametersForm, gettext_lazy("Statistics"))