domaininfo: remove some info and update view with action handling

app/src/i18n/locales/en.json

@@ -146,9 +146,9 @@
     "domain": {
       "cert": {
         "types": {
-          "self-signed": "Self-signed",
-          "lets-encrypt": "Let's Encrypt",
-          "other-unknown": "Other/Unknown"
+          "selfsigned": "Self-signed",
+          "letsencrypt": "Let's Encrypt",
+          "other": "Other/Unknown"
         },
         "valid_for": "valid for {days}"
       },
@@ -188,8 +188,6 @@
       "info": {
         "apps_on_domain": "Apps installed on domain",
         "certificate_authority": "SSL Certification authority",
-        "dns_config_method": "DNS config method",
-        "dns_semi_auto_config_feature": "Semi-auto DNS configuration feature",
         "domain_type": "Domain type",
         "registrar": "Registrar"
       },

app/src/router/routes.js

@@ -141,14 +141,22 @@ const routes = [
     }
   },
   {
-    name: 'domain-info',
     path: '/domains/:name',
     component: () => import(/* webpackChunkName: "views/domain/info" */ '@/views/domain/DomainInfo'),
     props: true,
-    meta: {
-      args: { param: 'name' },
-      breadcrumb: ['domain-list', 'domain-info']
-    }
+    children: [
+      {
+        name: 'domain-info',
+        path: ':tabId?',
+        component: () => import(/* webpackChunkName: "components/configPanel" */ '@/components/ConfigPanel'),
+        props: true,
+        meta: {
+          routerParams: ['name'], // Override router key params to avoid view recreation at tab change.
+          args: { param: 'name' },
+          breadcrumb: ['domain-list', 'domain-info']
+        }
+      }
+    ]
   },
   {
     // no need for name here, only children are visited

app/src/store/data.js

@@ -34,8 +34,8 @@ export default {
       state.domains = domains
     },
 
-    'SET_DOMAINS_DETAILS' (state, [name, { domains }]) {
-      Vue.set(state.domains_details, name, domains[name])
+    'SET_DOMAINS_DETAILS' (state, [name, details]) {
+      Vue.set(state.domains_details, name, details)
     },
 
     'UPDATE_DOMAINS_DETAILS' (state, payload) {

app/src/views/domain/DomainInfo.vue

@@ -1,5 +1,8 @@
 <template>
-  <view-base :queries="queries" @queries-response="onQueriesResponse" skeleton="card-list-skeleton">
+  <view-base
+    :queries="queries" @queries-response="onQueriesResponse"
+    ref="view" skeleton="card-list-skeleton"
+  >
     <!-- INFO CARD -->
     <card v-if="domain" :title="name" icon="globe">
       <template #header-buttons>
@@ -31,49 +34,20 @@
             id="explain-main-domain"
             :title="$t('domain.types.main_domain')"
             :content="$t('domain.explain.main_domain', { domain: name })"
-          >{{ $t('domain.types.main_domain') }}</explain-what>
-          ,&nbsp;
+          >{{ $t('domain.types.main_domain') }}</explain-what>,&nbsp;
         </span>
         {{ $t('domain.types.' + (parentName ? 'subdomain' : 'parent_domain' )) }}
       </description-row>
 
       <!-- DOMAIN CERT AUTHORITY -->
       <description-row :term="$t('domain.info.certificate_authority')">
-        <icon :iname="cert.status.icon" :variant="cert.status.variant" class="mr-1" />
+        <icon :iname="cert.icon" :variant="cert.variant" class="mr-1" />
         {{ $t('domain.cert.types.' + cert.authority) }}
         ({{ $t('domain.cert.valid_for', { days: $tc('day_validity', cert.validity) }) }})
       </description-row>
 
-      <!-- DOMAIN DNS METHOD -->
-      <description-row v-if="dns" :term="$t('domain.info.dns_config_method')">
-        {{ $t('domain.dns.methods.' + dns.method) }}
-
-        <template v-if="dns.method === 'semi_auto'">
-          (<icon :iname="semiAuto.icon" :variant="semiAuto.variant" class="mr-1" />
-          {{ $t('domain.dns.semi_auto_status.' + dns.semi_auto_status) }})
-        </template>
-
-        <template v-else-if="dns.method === 'handled_in_parent'">
-          <b-button
-            variant="outline-dark" size="xs" class="py-0 ml-1"
-            :to="{ name: 'domain-info', params: { name: parentName }}"
-          >
-            {{ parentName }}
-          </b-button>
-        </template>
-      </description-row>
-
-      <!-- DOMAIN SEMI-AUTO OPTIONAL FEATURE STATUS -->
-      <description-row
-        v-if="!['semi_auto', 'auto', 'handled_in_parent', 'none'].includes(dns.method)"
-        :term="$t('domain.info.dns_semi_auto_config_feature')"
-      >
-        <icon :iname="semiAuto.icon" :variant="semiAuto.variant" class="mr-1" />
-        {{ $t('domain.dns.semi_auto_status.' + dns.semi_auto_status) }}
-      </description-row>
-
       <!-- DOMAIN REGISTRAR -->
-      <description-row v-if="dns.registrar" :term="$t('domain.info.registrar')" :details="dns.registrar" />
+      <description-row v-if="domain.registrar" :term="$t('domain.info.registrar')" :details="domain.registrar" />
 
       <!-- DOMAIN APPS -->
       <description-row :term="$t('domain.info.apps_on_domain')">
@@ -93,11 +67,11 @@
           </b-button>
         </b-button-group>
 
-        {{ domain.apps ? '' : $t('words.none') }}
+        {{ domain.apps.length ? '' : $t('words.none') }}
       </description-row>
     </card>
 
-    <config-panels v-if="config.panels" v-bind="config" @submit="applyConfig" />
+    <config-panels v-if="config.panels" v-bind="config" @submit="onConfigSubmit" />
   </view-base>
 </template>
 
@@ -146,26 +120,19 @@ export default {
       return this.$store.getters.highestDomainParentName(this.name)
     },
 
-    certStatus () {
-      const cert = this.domain.certificate
-      const trad = (cert.validity < 15 ? 'renew.' : '') + cert.authority
-      if (cert.validity <= 0) {
-        return { trad: 'invalid', icon: 'times', variant: 'danger' }
-      } else if (cert.authority === 'other-unknown') {
-        return cert.validity < 15
-          ? { trad, icon: 'exclamation', variant: 'danger' }
-          : { trad, icon: 'check', variant: 'success' }
-      } else if (cert.authority === 'lets-encrypt') {
-        return { trad, icon: 'thumbs-up', variant: 'success' }
-      }
-      return { trad, icon: 'exclamation', variant: 'warning' }
-    },
-
     cert () {
-      return {
-        ...this.domain.certificate,
-        status: this.certStatus
+      const { CA_type: authority, validity } = this.domain.certificate
+      const baseInfos = { authority, validity }
+      if (validity <= 0) {
+        return { icon: 'times', variant: 'danger', ...baseInfos }
+      } else if (authority === 'other') {
+        return validity < 15
+          ? { icon: 'exclamation', variant: 'danger', ...baseInfos }
+          : { icon: 'check', variant: 'success', ...baseInfos }
+      } else if (authority === 'letsencrypt') {
+        return { icon: 'thumbs-up', variant: 'success', ...baseInfos }
       }
+      return { icon: 'exclamation', variant: 'warning', ...baseInfos }
     },
 
     dns () {
@@ -175,18 +142,6 @@ export default {
     isMainDomain () {
       if (!this.mainDomain) return
       return this.name === this.mainDomain
-    },
-
-    semiAuto () {
-      const status = this.dns.semi_auto_status
-      if (!status) return
-      if (status === 'unavailable') return { icon: 'times', variant: 'danger' }
-      if (status === 'activable') return { icon: 'check', variant: 'info' }
-      if (status === 'activated') return { icon: 'check', variant: 'success' }
-      // FIXME mutate status on push --dry_run (misconfigured + has_diff)
-      if (status === 'has_changes') return { icon: 'wrench', variant: 'warning' }
-      if (status === 'misconfigured') return { icon: 'times', variant: 'danger' }
-      return undefined
     }
   },
 
@@ -195,23 +150,22 @@ export default {
       this.config = formatYunoHostConfigPanels(config)
     },
 
-    async applyConfig (id_) {
-      const formatedData = await formatFormData(
-        this.config.forms[id_],
-        { removeEmpty: false, removeNull: true, multipart: false }
-      )
+    async onConfigSubmit ({ id, form, action, name }) {
+      const args = await formatFormData(form, { removeEmpty: false, removeNull: true })
 
       api.put(
-        `domains/${this.name}/config`,
-        { key: id_, args: objectToParams(formatedData) },
-        { key: 'domains.update_config', name: this.name }
+        action
+          ? `domain/${this.name}/actions/${action}`
+          : `domains/${this.name}/config/${id}`,
+        { args: objectToParams(args) },
+        { key: `domains.${action ? 'action' : 'update'}_config`, id, name: this.name }
       ).then(() => {
         this.$refs.view.fetchQueries({ triggerLoading: true })
       }).catch(err => {
         if (err.name !== 'APIBadRequestError') throw err
-        const panel = this.config.panels.find(({ id }) => id_ === id)
+        const panel = this.config.panels.find(panel => panel.id === id)
         if (err.data.name) {
-          this.config.errors[id_][err.data.name].message = err.message
+          this.config.errors[id][err.data.name].message = err.message
         } else this.$set(panel, 'serverError', err.message)
       })
     },