refactor: 重构云同步账号模块 (#624)

* refactor: cloud (v0.1)

* refactor: 重构云同步账号模块

* fix: 干掉多余的代码

Co-authored-by: Bai <bugatti_it@163.com>
Co-authored-by: Orange <orangemtony@gmail.com>

src/views/xpack/Cloud/Account/AccountCreateUpdate.vue

@@ -1,53 +1,79 @@
 <template>
-  <GenericCreateUpdatePage v-bind="$data" :initial="initial" />
+  <GenericCreateUpdatePage
+    v-bind="$data"
+    :initial="initial"
+    :perform-submit="performSubmit"
+  />
 </template>
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
 import { Required } from '@/components/DataForm/rules'
+import { ACCOUNT_PROVIDER_ATTRS_MAP, aliyun } from '../const'
 
 export default {
   components: {
     GenericCreateUpdatePage
   },
   data() {
+    const accountProvider = this.$route.query.provider || aliyun
+    const accountProviderAttrs = ACCOUNT_PROVIDER_ATTRS_MAP[accountProvider]
     return {
-      fields: [
-        [
-          this.$t('common.Basic'), [
-            'name', 'provider', 'access_key_id', 'access_key_secret', 'comment'
-          ]
-        ]
-      ],
+      initial: {
+        provider: this.$route.query.provider,
+        port: 443
+      },
       url: '/api/v1/xpack/cloud/accounts/',
+      fields: [
+        [this.$t('common.Basic'), ['name', 'provider']],
+        [this.$t(accountProviderAttrs.title), accountProviderAttrs.attrs],
+        [this.$t('common.Other'), ['comment']]
+      ],
       fieldsMeta: {
         provider: {
           rules: [Required],
           el: {
             disabled: true
           }
-        },
-        access_key_id: {
-          rules: [
-            { required: this.$route.meta.action === 'create', message: this.$t('common.fieldRequiredError') }
-          ]
-        },
-        access_key_secret: {
-          el: {
-            showPassword: true
-          },
-          rules: [
-            { required: this.$route.meta.action === 'create', message: this.$t('common.fieldRequiredError') }
-          ]
         }
       },
       updateSuccessNextRoute: { name: 'CloudCenter' },
-      createSuccessNextRoute: { name: 'CloudCenter' }
+      createSuccessNextRoute: { name: 'CloudCenter' },
+      getUrl() {
+        const params = this.$route.params
+        let url = `/api/v1/xpack/cloud/accounts/`
+        if (params.id) {
+          url = `${url}${params.id}/`
+        }
+        return `${url}?provider=${accountProvider}`
+      }
     }
   },
   computed: {
-    initial() {
-      return this.$route.query
+  },
+  methods: {
+    performSubmit(validValues) {
+      const method = this.getMethod()
+      const accountProvider = this.$route.query.provider || aliyun
+      const accountProviderAttrs = ACCOUNT_PROVIDER_ATTRS_MAP[accountProvider]
+      const attrs = {}
+      for (const attr of accountProviderAttrs.attrs) {
+        const v = validValues[attr]
+        if (!v) {
+          continue
+        }
+        attrs[attr] = v
+      }
+      validValues.attrs = attrs
+      return this.$axios[method](`${this.getUrl()}`, validValues)
+    },
+    getMethod() {
+      const params = this.$route.params
+      if (params.id) {
+        return 'put'
+      } else {
+        return 'post'
+      }
     }
   }
 }

src/views/xpack/Cloud/Account/AccountList.vue

@@ -4,6 +4,7 @@
 
 <script type="text/jsx">
 import ListTable from '@/components/ListTable'
+import { ACCOUNT_PROVIDER_ATTRS_MAP, aliyun, aws_china, aws_international, huaweicloud, qcloud, azure, vmware } from '../const'
 import { BooleanFormatter, DetailFormatter } from '@/components/ListTable/formatters'
 
 export default {
@@ -35,12 +36,19 @@ export default {
             formatterArgs: {
               updateRoute: 'AccountUpdate',
               onUpdate: ({ row, col }) => {
-                if (row.provider === 'azure') {
-                  vm.$router.push({ name: 'AzureAccountUpdate', params: { id: row.id }})
-                } else {
-                  vm.$router.push({ name: 'AccountUpdate', params: { id: row.id }})
+                vm.$router.push({ name: 'AccountUpdate', params: { id: row.id }, query: { provider: row.provider }})
+              },
+              extraActions: [
+                {
+                  name: 'TestConnection',
+                  title: this.$t('assets.TestConnection'),
+                  callback: function(val) {
+                    this.$axios.get(`/api/v1/xpack/cloud/accounts/${val.row.id}/test-connective/`).then(res => {
+                      this.$message.success(this.$t('common.TestSuccessMsg'))
+                    })
+                  }
                 }
-              }
+              ]
             }
           },
           validity: {
@@ -64,65 +72,61 @@ export default {
         moreActionsType: 'primary',
         extraMoreActions: [
           {
-            name: 'aliyun',
-            title: this.$t('xpack.Cloud.Aliyun'),
+            name: aliyun,
+            title: ACCOUNT_PROVIDER_ATTRS_MAP[aliyun].title,
             type: 'primary',
             can: true,
-            callback: this.createAliyun.bind(this)
-          }, {
-            name: 'qcloud',
-            title: this.$t('xpack.Cloud.Qcloud'),
-            type: 'primary',
-            can: true,
-            callback: this.createQcloud.bind(this)
-          }, {
-            name: 'AWS_China',
-            title: this.$t('xpack.Cloud.AWS_China'),
-            type: 'primary',
-            can: true,
-            callback: this.createAwsChina.bind(this)
+            callback: this.createAccount(aliyun).bind(this)
           },
           {
-            name: 'AWS_Int',
-            title: this.$t('xpack.Cloud.AWS_Int'),
+            name: qcloud,
+            title: ACCOUNT_PROVIDER_ATTRS_MAP[qcloud].title,
             type: 'primary',
             can: true,
-            callback: this.createAwsInt.bind(this)
-          }, {
-            name: 'HuaweiCloud',
-            title: this.$t('xpack.Cloud.HuaweiCloud'),
+            callback: this.createAccount(qcloud).bind(this)
+          },
+          {
+            name: aws_china,
+            title: ACCOUNT_PROVIDER_ATTRS_MAP[aws_china].title,
             type: 'primary',
             can: true,
-            callback: this.createhuawei.bind(this)
-          }, {
-            name: 'Azure',
-            title: this.$t('xpack.Cloud.Azure'),
+            callback: this.createAccount(aws_china).bind(this)
+          },
+          {
+            name: aws_international,
+            title: ACCOUNT_PROVIDER_ATTRS_MAP[aws_international].title,
             type: 'primary',
             can: true,
-            callback: this.createAzure.bind(this)
+            callback: this.createAccount(aws_international).bind(this)
+          },
+          {
+            name: huaweicloud,
+            title: ACCOUNT_PROVIDER_ATTRS_MAP[huaweicloud].title,
+            type: 'primary',
+            can: true,
+            callback: this.createAccount(huaweicloud).bind(this)
+          },
+          {
+            name: azure,
+            title: ACCOUNT_PROVIDER_ATTRS_MAP[azure].title,
+            type: 'primary',
+            can: true,
+            callback: this.createAccount(azure).bind(this)
+          },
+          {
+            name: vmware,
+            title: ACCOUNT_PROVIDER_ATTRS_MAP[vmware].title,
+            type: 'primary',
+            can: true,
+            callback: this.createAccount(vmware).bind(this)
           }
         ]
       }
     }
   },
   methods: {
-    createAzure() {
-      this.$router.push({ name: 'AzureAccountCreate', query: { provider: 'azure' }})
-    },
-    createAliyun() {
-      this.$router.push({ name: 'AccountCreate', query: { provider: 'aliyun' }})
-    },
-    createQcloud() {
-      this.$router.push({ name: 'AccountCreate', query: { provider: 'qcloud' }})
-    },
-    createAwsChina() {
-      this.$router.push({ name: 'AccountCreate', query: { provider: 'aws_china' }})
-    },
-    createAwsInt() {
-      this.$router.push({ name: 'AccountCreate', query: { provider: 'aws_international' }})
-    },
-    createhuawei() {
-      this.$router.push({ name: 'AccountCreate', query: { provider: 'huaweicloud' }})
+    createAccount(provider) {
+      return () => { this.$router.push({ name: 'AccountCreate', query: { provider: provider }}) }
     }
   }
 }

src/views/xpack/Cloud/Account/AzureAccountCreateUpdate.vue

@@ -1,88 +0,0 @@
-<template>
-  <GenericCreateUpdatePage v-bind="$data" :initial="initial" />
-</template>
-
-<script>
-import { GenericCreateUpdatePage } from '@/layout/components'
-import { Required } from '@/components/DataForm/rules'
-
-export default {
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      fields: [
-        [
-          '', [
-            'name', 'provider', 'access_key_id', 'access_key_secret', 'attrs', 'comment'
-          ]
-        ]
-      ],
-      url: '/api/v1/xpack/cloud/accounts/',
-      fieldsMeta: {
-        provider: {
-          rules: [Required],
-          el: {
-            disabled: true
-          }
-        },
-        access_key_id: {
-          rules: [
-            { required: this.$route.meta.action === 'create', message: this.$t('common.fieldRequiredError') }
-          ]
-        },
-        access_key_secret: {
-          el: {
-            showPassword: true
-          },
-          rules: [
-            { required: this.$route.meta.action === 'create', message: this.$t('common.fieldRequiredError') }
-          ]
-        }
-      },
-      updateSuccessNextRoute: { name: 'CloudCenter' },
-      createSuccessNextRoute: { name: 'CloudCenter' },
-      performSubmit(validValues) {
-        const params = this.$route.params
-        const baseUrl = `/api/v1/xpack/cloud/accounts/`
-        const url = (params.id) ? `${baseUrl}${params.id}/` : baseUrl
-        const method = this.getMethod()
-        validValues.attrs = {
-          subscription_id: validValues.subscription_id,
-          tenant_id: validValues.tenant_id
-        }
-        return this.$axios[method](`${url}?provider=${validValues.provider}`, validValues)
-      },
-      getUrl() {
-        const params = this.$route.params
-        let url = `/api/v1/xpack/cloud/accounts/`
-        const method = this.getMethod()
-        if (params.id) {
-          url = `${url}${params.id}/`
-        }
-        return method === 'post' ? `${url}?provider=${this.$route.query.provider}` : `${url}?provider=azure`
-      }
-    }
-  },
-  computed: {
-    initial() {
-      return this.$route.query
-    }
-  },
-  methods: {
-    getMethod() {
-      const params = this.$route.params
-      if (params.id) {
-        return 'put'
-      } else {
-        return 'post'
-      }
-    }
-  }
-}
-
-</script>
-
-<style lang="less" scoped>
-</style>

src/views/xpack/Cloud/const.js

@@ -0,0 +1,47 @@
+import i18n from '@/i18n/i18n'
+
+export const aliyun = 'aliyun'
+export const aws_international = 'aws_international'
+export const aws_china = 'aws_china'
+export const huaweicloud = 'huaweicloud'
+export const qcloud = 'qcloud'
+export const azure = 'azure'
+export const vmware = 'vmware'
+
+export const ACCOUNT_PROVIDER_ATTRS_MAP = {
+  [aliyun]: {
+    name: aliyun,
+    title: i18n.t('xpack.Cloud.Aliyun'),
+    attrs: ['access_key_id', 'access_key_secret']
+  },
+  [aws_international]: {
+    name: aws_international,
+    title: i18n.t('xpack.Cloud.AWS_Int'),
+    attrs: ['access_key_id', 'access_key_secret']
+  },
+  [aws_china]: {
+    name: aws_china,
+    title: i18n.t('xpack.Cloud.AWS_China'),
+    attrs: ['access_key_id', 'access_key_secret']
+  },
+  [huaweicloud]: {
+    name: huaweicloud,
+    title: i18n.t('xpack.Cloud.HuaweiCloud'),
+    attrs: ['access_key_id', 'access_key_secret']
+  },
+  [qcloud]: {
+    name: qcloud,
+    title: i18n.t('xpack.Cloud.Qcloud'),
+    attrs: ['access_key_id', 'access_key_secret']
+  },
+  [azure]: {
+    name: azure,
+    title: i18n.t('xpack.Cloud.Azure'),
+    attrs: ['access_key_id', 'access_key_secret', 'tenant_id', 'subscription_id']
+  },
+  [vmware]: {
+    name: vmware,
+    title: 'VMware',
+    attrs: ['host', 'port', 'username', 'password']
+  }
+}

src/views/xpack/router.js

@@ -83,19 +83,6 @@ export default {
           name: 'AccountUpdate',
           hidden: true,
           meta: { title: i18n.t('xpack.Cloud.AccountUpdate'), action: 'update', activeMenu: '/xpack/cloud' }
-        }, {
-          path: 'azure/account/create',
-          component: () => import('@/views/xpack/Cloud/Account/AzureAccountCreateUpdate'),
-          name: 'AzureAccountCreate',
-          hidden: true,
-          meta: { title: i18n.t('xpack.Cloud.AccountCreate'), action: 'create', activeMenu: '/xpack/cloud' }
-        },
-        {
-          path: 'azure/account/:id/update',
-          component: () => import('@/views/xpack/Cloud/Account/AzureAccountCreateUpdate'),
-          name: 'AzureAccountUpdate',
-          hidden: true,
-          meta: { title: i18n.t('xpack.Cloud.AccountUpdate'), action: 'update', activeMenu: '/xpack/cloud' }
         },
         {
           path: 'accounts/:id/',