Improved form and list views for domain.

frontend/src/components/DomainList.vue

@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <div class="columns">
-      <div class="column">
-        <h1 class="title">Domains</h1>
-      </div>
-      <div class="column">
-        <router-link :to="{ name: 'DomainAdd' }" class="button is-primary">Add</router-link>
-      </div>
-    </div>
-    <b-table :data="domains" checkable>
-      <template slot-scope="props">
-        <b-table-column>
-          <router-link :to="{ name: 'DomainEdit', params: { domainPk: props.row.pk }}">
-            <b-icon icon="pencil"></b-icon>
-          </router-link>
-        </b-table-column>
-        <b-table-column field="name" label="Name">
-          {{ props.row.name }}
-        </b-table-column>
-        <b-table-column field="quota" label="Quota">
-          <progress class="progress is-primary">30%</progress>
-        </b-table-column>
-      </template>
-    </b-table>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-    computed: mapGetters([
-        'domains'
-    ]),
-    data () {
-        return {
-            columns: [
-                {},
-                {
-                    field: 'name',
-                    label: 'Name'
-                },
-                {
-                    field: 'quota',
-                    label: 'Quota'
-                }
-            ]
-        }
-    },
-    created () {
-        this.$store.dispatch('getDomains')
-    }
-}
-</script>

frontend/src/components/domains/DomainForm.vue

@@ -3,15 +3,49 @@
     <h1 class="title">Add domain</h1>
     <form>
       <b-field label="Name" :type="formErrors && formErrors.name ? 'is-danger' : ''"
-               :message="formErrors && formErrors.name ? formErrors.name[0] : ''">
+               :message="formErrors && formErrors.name ? formErrors.name[0] : ''"
+               horizontal>
         <b-input v-model="domain.name"></b-input>
       </b-field>
       <b-field label="Quota" :type="formErrors && formErrors.quota ? 'is-danger' : ''"
-               :message="formErrors && formErrors.quota ? formErrors.quota[0] : ''">
+               :message="formErrors && formErrors.quota ? formErrors.quota[0] : ''"
+               horizontal>
         <b-input v-model="domain.quota"></b-input>
+        <p class="control">
+          <span class="button is-static">MB</span>
+        </p>
       </b-field>
-      <b-field>
-        <button class="button is-primary" @click="saveDomain">Save</button>
+      <b-field label="Default mailbox quota"
+               :type="formErrors && formErrors.default_mailbox_quota ? 'is-danger' : ''"
+               :message="formErrors && formErrors.default_mailbox_quota ? formErrors.default_mailbox_quota[0] : ''"
+               horizontal>
+        <b-input v-model="domain.default_mailbox_quota"></b-input>
+        <p class="control">
+          <span class="button is-static">MB</span>
+        </p>
+      </b-field>
+      <b-field label="Enabled" horizontal>
+        <b-checkbox v-model="domain.enabled"></b-checkbox>
+      </b-field>
+      <b-field label="Enable DNS checks" horizontal>
+        <b-checkbox v-model="domain.enable_dns_checks"></b-checkbox>
+      </b-field>
+      <b-field label="Enable DKIM signing" horizontal>
+        <b-checkbox v-model="domain.enable_dkim"></b-checkbox>
+      </b-field>
+      <b-field label="DKIM key selector" v-if="domain.enable_dkim" horizontal>
+        <b-checkbox v-model="domain.dkim_key_selector"></b-checkbox>
+      </b-field>
+      <b-field label="DKIM keu length" v-if="domain.enable_dkim" horizontal>
+        <b-checkbox v-model="domain.dkim_key_length"></b-checkbox>
+      </b-field>
+      <b-field grouped horizontal>
+        <p class="control">
+          <button class="button is-primary" @click="saveDomain">Save</button>
+        </p>
+        <p class="control">
+          <button class="button" @click="cancel">Cancel</button>
+        </p>
       </b-field>
     </form>
   </div>
@@ -62,7 +96,17 @@ export default {
                     position: 'is-bottom'
                 })
             }, this.onSaveError)
+        },
+        cancel () {
+            this.$router.push({ name: 'DomainList' })
         }
     }
 }
 </script>
+
+<style>
+ form {
+     background: #ffffff;
+     padding: 20px;
+ }
+</style>

frontend/src/components/domains/DomainList.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class="columns">
+      <div class="column">
+        <h1 class="title">Domains</h1>
+      </div>
+      <div class="column">
+        <router-link :to="{ name: 'DomainAdd' }" class="button is-primary">Add</router-link>
+      </div>
+      <div class="column">
+        <b-field>
+          <b-input placeholder="Search..." type="search" icon="magnify"></b-input>
+        </b-field>
+      </div>
+    </div>
+    <b-table :data="domains" paginated checkable>
+      <template slot-scope="props">
+        <b-table-column :sortable="false">
+          <router-link :to="{ name: 'DomainEdit', params: { domainPk: props.row.pk }}">
+            <b-icon icon="pencil"></b-icon>
+          </router-link>
+          <a href="#" title="Remove"  @click="confirmDelete(props.row)">
+            <b-icon icon="delete"></b-icon>
+          </a>
+        </b-table-column>
+        <b-table-column sortable field="name" label="Name">
+          {{ props.row.name }}
+        </b-table-column>
+        <b-table-column field="dns_status" label="DNS status">
+          <b-tag v-if="props.row.dns_status.checks === 'disabled'" rounded>Disabled</b-tag>
+          <b-tag v-if="props.row.dns_status.checks === 'pending'" type="is-info" rounded>Pending</b-tag>
+          <b-taglist v-if="props.row.dns_status.checks === 'active'">
+            <b-tag v-if="props.row.dns_status.mx" :type="getDNSTagType(props.row.dns_status.mx)" rounded>MX</b-tag>
+            <b-tag v-if="props.row.dns_status.dnsbl" :type="getDNSTagType(props.row.dns_status.dnsbl)" rounded>DNSBL</b-tag>
+          </b-taglist>
+        </b-table-column>
+        <b-table-column field="quota" label="Quota">
+          <progress class="progress is-primary"
+                    :value="props.row.allocated_quota_in_percent" max="100">
+            {{ props.row.allocated_quota_in_percent }}%
+          </progress>
+        </b-table-column>
+      </template>
+    </b-table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+    computed: mapGetters([
+        'domains'
+    ]),
+    data () {
+        return {
+        }
+    },
+    created () {
+        this.$store.dispatch('getDomains')
+    },
+    methods: {
+        confirmDelete (domain) {
+            this.$dialog.prompt({
+                message: `Delete domain ${domain.name}?`,
+                inputAttrs: {
+                    type: 'checkbox',
+                    placeholder: 'Keep mailboxes on filesystem'
+                },
+                onConfirm: (value) => this.$toast.open(`Your age is: ${value}`)
+            })
+        },
+        getDNSTagType (value) {
+            if (value === 'unknown') {
+                return 'is-warning'
+            } else if (value === 'ok') {
+                return 'is-danger'
+            } else {
+                return 'is-success'
+            }
+        }
+    }
+}
+</script>

frontend/src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import DomainList from '@/components/DomainList'
-import DomainForm from '@/components/DomainForm'
+import DomainList from '@/components/domains/DomainList'
+import DomainForm from '@/components/domains/DomainForm'
 
 Vue.use(Router)
 

modoboa/admin/models/domain.py

@@ -158,6 +158,27 @@ class Domain(AdminObject):
             return True
         return False
 
+    @cached_property
+    def dns_status(self):
+        """Return information about current DNS status."""
+        if not self.enable_dns_checks or self.uses_a_reserved_tld:
+            return {"checks": "disabled"}
+        elif self.awaiting_checks():
+            return {"checks": "pending"}
+        result = {"checks": "active"}
+        config = dict(param_tools.get_global_parameters("admin"))
+        if config["enable_mx_checks"]:
+            result["mx"] = "ok" if self.mxrecord_set.has_valids() else "ko"
+        if config["enable_dnsbl_checks"]:
+            if not self.dnsblresult_set.exists():
+                status = "unknown"
+            elif self.dnsblresult_set.blacklisted().exists():
+                status = "ko"
+            else:
+                status = "ok"
+            result["dnsbl"] = status
+        return result
+
     @cached_property
     def dnsbl_status_color(self):
         """Shortcut to DNSBL results."""

modoboa/admin/serializers.py

@@ -37,7 +37,9 @@ class DomainSerializer(serializers.ModelSerializer):
             "mailbox_count", "mbalias_count", "domainalias_count"
         )
         read_only_fields = (
-            "pk", "mailbox_count", "mbalias_count", "domainalias_count"
+            "pk", "dkim_public_key", "dns_status", "allocated_quota_in_percent"
+            "mailbox_count", "mbalias_count", "domainalias_count",
+            "enable_dns_checks"
         )
 
     def validate_name(self, value):