perf: 优化平台

src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue

@@ -48,7 +48,10 @@ export default {
     return {
       defaultSetting: {
         sftp_enabled: true,
-        sftp_home: '/tmp'
+        sftp_home: '/tmp',
+        username_selector: '#username',
+        password_selector: '#password',
+        submit_selector: '.btn-submit'
       },
       loading: true,
       form: {},
@@ -88,6 +91,24 @@ export default {
             type: 'input',
             helpText: this.$t('assets.SFTPHelpMessage'),
             hidden: (form) => this.item.name !== 'ssh' || !form['sftp_enabled']
+          },
+          {
+            id: 'username_selector',
+            label: '用户名输入框选择器',
+            type: 'input',
+            hidden: (form) => this.item.name !== 'http'
+          },
+          {
+            id: 'password_selector',
+            label: '密码输入框选择器',
+            type: 'input',
+            hidden: (form) => this.item.name !== 'http'
+          },
+          {
+            id: 'submit_selector',
+            label: '提交按钮选择器',
+            type: 'input',
+            hidden: (form) => this.item.name !== 'http'
           }
         ]
       }

src/views/assets/Asset/AssetList/components/BaseList.vue

@@ -82,15 +82,15 @@ export default {
       defaultConfig: {
         url: '/api/v1/assets/hosts/',
         columns: [
-          'name', 'ip', 'category', 'type', 'platform',
+          'name', 'address', 'category', 'type', 'platform',
           'protocols', 'is_active', 'connectivity',
           'created_by', 'date_created', 'comment',
           'org_name', 'actions'
         ],
         columnsShow: {
-          min: ['name', 'ip', 'actions'],
+          min: ['name', 'address', 'actions'],
           default: [
-            'name', 'ip', 'platform', 'category', 'type',
+            'name', 'address', 'platform', 'category', 'type',
             'connectivity', 'actions'
           ]
         },

src/views/assets/Asset/AssetList/components/PlatformDialog.vue

@@ -5,33 +5,16 @@
     :visible.sync="iVisible"
     width="60%"
     top="1vh"
-    @confirm="onConfirm"
-    @cancel="onConfirm"
+    :show-cancel="false"
+    :show-confirm="false"
   >
     <div style="margin: 0 10px">
-      <el-row v-if="showRecentPlatforms.length > 0" :gutter="20">
-        <p class="recent">{{ this.$t('assets.RecentlyUsed') }}</p>
-        <el-col
-          v-for="(item, index) of showRecentPlatforms"
-          :key="item.id"
-          :span="6"
-        >
-          <el-card
-            :style="{ borderLeftColor: randomBorderColor(index) }"
-            class="platform-item"
-            shadow="hover"
-            @click.native="createAsset(item)"
-          >
-            {{ item.name }}
-          </el-card>
-        </el-col>
-      </el-row>
       <el-row :gutter="20">
-        <el-collapse v-model="activePlatform" accordion>
+        <el-collapse v-model="activeType" accordion>
           <el-collapse-item
             v-for="(ps, categoryName) in sortedPlatforms"
             :key="categoryName"
-            :title="categoryMapper[categoryName]"
+            :title="categoryName"
             :name="categoryName"
           >
             <el-col
@@ -69,17 +52,14 @@ export default {
     },
     category: {
       type: String,
-      Validator: (value) => {
-        return ['all', 'host', 'networking', 'database', 'cloud', 'web'].includes(value)
-      },
       default: 'all'
     }
   },
   data() {
     return {
       platforms: [],
-      recentPlatforms: {},
-      activePlatform: 'host',
+      recentPlatformIds: [],
+      activeType: 'host',
       typeIconMapper: {
         linux: 'fa-linux',
         windows: 'fa-windows',
@@ -97,65 +77,52 @@ export default {
       set(val) {
         this.$emit('update:visible', val)
       },
-      get() {
-        return this.visible
-      }
+      get() { return this.visible }
     },
     sortedPlatforms() {
-      const { category, platforms } = this
-      const filterPlatforms = _.groupBy(platforms, (item) => item.category.value)
-      return category === 'all' ? filterPlatforms : this.arrangePlatforms(filterPlatforms[category])
-    },
-    categoryMapper() {
-      const mapper = {}
-      for (const p of this.platforms) {
-        if (this.category === 'all') {
-          mapper[p.category.value] = p.category.label
-        } else {
-          mapper[p.type.value] = p.type.label
-        }
+      const recentPlatforms = {}
+      if (this.category === 'all') {
+        recentPlatforms[this.$t('assets.RecentlyUsed')] = this.allRecentPlatforms
+        return { ...recentPlatforms, ...this.allSortedPlatforms }
+      } else {
+        recentPlatforms[this.$t('assets.RecentlyUsed')] = this.recentPlatforms
+        return { ...recentPlatforms, ...this.typeSortedPlatforms }
       }
-      return mapper
     },
-    showRecentPlatforms() {
-      return this.category === 'all' ? this.recentPlatforms : this.typeRecentPlatforms()
+    allSortedPlatforms() {
+      return _.groupBy(this.platforms, (item) => item.category.label)
+    },
+    typeSortedPlatforms() {
+      const typedPlatforms = this.platforms.filter(item => item.category.value === this.category)
+      return _.groupBy(typedPlatforms, (item) => item.type.label)
+    },
+    recentPlatforms() {
+      return this.category === 'all' ? this.allRecentPlatforms : this.typeRecentPlatforms
+    },
+    allRecentPlatforms() {
+      return this.recentPlatformIds
+        .map(i => this.platforms.find(p => p.id === i))
+        .filter(p => p)
+    },
+    typeRecentPlatforms() {
+      return this.allRecentPlatforms.filter(item => item.category.value === this.category)
     }
   },
   created() {
     this.$axios.get('/api/v1/assets/platforms/').then(data => {
       this.platforms = data
+      this.loadRecentPlatformIds()
+      this.activeType = Object.keys(this.sortedPlatforms)[0]
     })
-    this.getRecentPlatforms()
   },
   methods: {
-    getRecentPlatforms() {
-      this.recentPlatforms = JSON.parse(localStorage.getItem('RecentPlatforms')) || []
-    },
-    setRecentPlatforms(platform) {
-      const recentPlatforms = this.recentPlatforms || []
-      const item = {
-        id: platform.id,
-        name: platform.name,
-        category: platform.category
-      }
-
-      if (!_.some(recentPlatforms, item)) {
-        if (recentPlatforms.length >= 8) {
-          recentPlatforms.pop()
-        }
-        recentPlatforms.unshift(item)
-        localStorage.setItem('RecentPlatforms', JSON.stringify(recentPlatforms))
-      }
-    },
-    typeRecentPlatforms() {
-      const typePlatforms = []
-      const { category, recentPlatforms } = this
-      for (const item of recentPlatforms) {
-        if (item.category.value === category) {
-          typePlatforms.push(item)
-        }
-      }
-      return typePlatforms
+    loadRecentPlatformIds() {
+      const recentPlatformIds = JSON.parse(localStorage.getItem('RecentPlatforms')) || []
+      this.recentPlatformIds = recentPlatformIds
+        .map(i => this.platforms.find(p => p.id === i))
+        .filter(p => p)
+        .map(p => p.id)
+      console.log('This. platform id: ', this.recentPlatformIds)
     },
     onConfirm() {
       this.iVisible = false
@@ -166,34 +133,20 @@ export default {
       const color = this.bottomColors[colorIndex]
       return color
     },
-    createAsset(platform) {
-      // debugger
-      const mapper = {
-        host: 'HostCreate',
-        database: 'DatabaseCreate',
-        cloud: 'CloudCreate',
-        web: 'WebCreate',
-        remote_app: 'RemoteAppCreate'
+    addToRecentPlatforms(platform) {
+      const recentPlatformIds = this.recentPlatformIds.filter(i => i !== platform.id)
+      recentPlatformIds.unshift(platform.id)
+      if (recentPlatformIds.length > 8) {
+        recentPlatformIds.pop()
       }
-      const route = mapper[platform.category.value] || 'HostCreate'
-      this.$router.push({ name: route, query: { platform: platform.id }})
-      this.iVisible = false
-      this.setRecentPlatforms(platform)
+      this.recentPlatformIds = recentPlatformIds
+      localStorage.setItem('RecentPlatforms', JSON.stringify(recentPlatformIds))
     },
-    arrangePlatforms(data = []) {
-      const filterField = {}
-      data.length > 0 && data.forEach(el => {
-        if (el.internal) {
-          filterField[el.type.value] = [el]
-        } else {
-          filterField[el.type.value]?.push(el)
-        }
-      })
-
-      const filterFieldKey = Object.keys(filterField)
-      this.activePlatform = filterFieldKey.length > 0 ? filterFieldKey[0] : ''
-
-      return filterField
+    createAsset(platform) {
+      const route = _.capitalize(platform.category.value) + 'Create' || 'HostCreate'
+      this.addToRecentPlatforms(platform)
+      this.iVisible = false
+      this.$router.push({ name: route, query: { platform: platform.id }})
     }
   }
 }

src/views/assets/Asset/AssetList/index.vue

@@ -27,31 +27,26 @@ export default {
           {
             title: this.$t('applications.host'),
             name: 'hosts',
-            hidden: () => false,
             component: () => import('@/views/assets/Asset/AssetList/HostList.vue')
           },
           {
             title: this.$t('route.Device'),
             name: 'devices',
-            hidden: () => false,
             component: () => import('@/views/assets/Asset/AssetList/DeviceList.vue')
           },
           {
             title: this.$t('route.Database'),
             name: 'databases',
-            hidden: () => false,
             component: () => import('@/views/assets/Asset/AssetList/DatabaseList.vue')
           },
           {
             title: this.$t('assets.Cloud'),
             name: 'clouds',
-            hidden: () => false,
             component: () => import('@/views/assets/Asset/AssetList/CloudList.vue')
           },
           {
             title: 'Web',
             name: 'web',
-            hidden: () => false,
             component: () => import('@/views/assets/Asset/AssetList/WebList.vue')
           }
         ]

src/views/assets/Platform/PlatformCreateUpdate.vue

@@ -83,7 +83,7 @@ export default {
             }
           }
         },
-        brand: {},
+        charset: {},
         protocols_enabled: {
           el: {
             disabled: false
@@ -158,6 +158,11 @@ export default {
         _.set(this.fieldsMeta, `${field}.el.disabled`, disabled)
       }
       this.fieldsMeta.protocols.el.choices = constraints['protocols'] || []
+
+      if (constraints['charset_enabled'] === false) {
+        this.fieldsMeta.charset.hidden = () => true
+      }
+
       await this.setAutomations(constraints['automation'])
     },
     async setAutomations(automation) {
@@ -186,7 +191,6 @@ export default {
           return { value: method['id'], label: method['name'] }
         })
       }
-      console.log('Initial: ', initial)
     }
   }
 }

src/views/assets/const.js

@@ -6,7 +6,7 @@ import { Select2 } from '@/components/FormFields'
 
 export const assetFieldsMeta = () => {
   return {
-    ip: {},
+    address: {},
     protocols: {
       component: ProtocolSelector,
       on: {},