Display transport settings for relay domains.

fix #3637

frontend/src/components/admin/domains/DomainSummary.vue

@@ -43,11 +43,7 @@
       <v-row>
         <v-col cols="6">{{ $gettext('Enabled') }}</v-col>
         <v-col cols="6">
-          <v-icon
-            :color="domain.enabled ? 'success' : 'error'"
-            :icon="domain.enabled ? 'mdi-check-circle' : 'mdi-close-circle'"
-            variant="flat"
-          />
+          <BooleanIcon :value="domain.enabled" variant="flat" />
         </v-col>
       </v-row>
     </v-card-text>
@@ -56,6 +52,7 @@
 
 <script setup lang="js">
 import { useGettext } from 'vue3-gettext'
+import BooleanIcon from '@/components/tools/BooleanIcon'
 
 const { $gettext } = useGettext()
 defineProps({ domain: { type: Object, default: null } })

frontend/src/components/admin/domains/RelayDomainSummary.vue

@@ -0,0 +1,57 @@
+<template>
+  <v-card v-if="props.domain">
+    <v-card-title>
+      <div class="headline">{{ $gettext('Transport') }}</div>
+    </v-card-title>
+    <v-card-text>
+      <v-row>
+        <v-col cols="6">{{ $gettext('Service') }}</v-col>
+        <v-col cols="6">{{ props.domain.transport.service }}</v-col>
+      </v-row>
+      <template v-if="currentBackend">
+        <v-row v-for="(setting, index) in currentBackend.settings" :key="index">
+          <v-col cols="6">{{ setting.label }}</v-col>
+          <v-col cols="6">
+            <template v-if="setting.type !== 'boolean'">
+              {{ getSettingValue(setting.name) }}
+            </template>
+            <template v-else>
+              <BooleanIcon
+                :value="getSettingValue(setting.name)"
+                variant="flat"
+              />
+            </template>
+          </v-col>
+        </v-row>
+      </template>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import transportApi from '@/api/transports'
+import BooleanIcon from '@/components/tools/BooleanIcon'
+
+const props = defineProps({
+  domain: {
+    type: Object,
+    default: null,
+  },
+})
+
+const backends = ref([])
+
+const currentBackend = computed(() => {
+  return backends.value.find(
+    (backend) => backend.name === props.domain.transport.service
+  )
+})
+
+const getSettingValue = (name) => {
+  return props.domain.transport.settings[`${currentBackend.value.name}_${name}`]
+}
+
+const resp = await transportApi.getAll()
+backends.value = resp.data
+</script>

frontend/src/components/tools/BooleanIcon.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-icon :icon="iconName" :color="iconColor" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  value: {
+    type: Boolean,
+  },
+})
+
+const iconName = computed(() => {
+  return props.value ? 'mdi-check-circle' : 'mdi-close-circle'
+})
+
+const iconColor = computed(() => {
+  return props.value ? 'success' : 'error'
+})
+</script>

frontend/src/views/admin/domains/DomainView.vue

@@ -35,6 +35,10 @@
           <v-col cols="12" md="6">
             <DomainSummary :domain="domain" />
             <div class="mt-4" />
+            <template v-if="domain.type === 'relaydomain'">
+              <RelayDomainSummary :domain="domain" />
+              <div class="mt-4" />
+            </template>
             <DomainAdminList :domain="domain" />
           </v-col>
           <v-col cols="12" md="6">
@@ -84,6 +88,7 @@ import DomainAdminList from '@/components/admin/domains/DomainAdminList.vue'
 import DmarcAligmentChart from '@/components/admin/dmarc/DmarcAligmentChart.vue'
 import DNSDetail from '@/components/admin/domains/DNSDetail.vue'
 import DomainSummary from '@/components/admin/domains/DomainSummary.vue'
+import RelayDomainSummary from '@/components/admin/domains/RelayDomainSummary.vue'
 import LoadingData from '@/components/tools/LoadingData.vue'
 import ResourcesForm from '@/components/tools/ResourcesForm.vue'
 import TimeSerieChart from '@/components/tools/TimeSerieChart.vue'