perf: 修改 host

src/components/AutoDataForm/utils.js

@@ -11,7 +11,7 @@ export class FormFieldGenerator {
   }
   generateFieldByType(type, field, fieldMeta, fieldRemoteMeta) {
     switch (type) {
-      case 'display_choice':
+      case 'labeled_choice':
       case 'choice':
         if (!fieldRemoteMeta.read_only) {
           field.options = fieldRemoteMeta.choices.map(v => {

src/components/AutoDataTable/index.vue

@@ -27,7 +27,7 @@ import {
   DisplayFormatter,
   ActionsFormatter,
   ChoicesFormatter,
-  NestedObjectFormatter
+  ObjectRelatedFormatter
 } from '@/components/TableFormatters'
 import i18n from '@/i18n/i18n'
 import ColumnSettingPopover from './components/ColumnSettingPopover'
@@ -145,15 +145,19 @@ export default {
           col.formatter = DateFormatter
           col.width = '160px'
           break
-        case 'nested object':
-          col.formatter = NestedObjectFormatter
+        case 'object_related_field':
+          col.formatter = ObjectRelatedFormatter
+          break
+        case 'm2m_related_field':
+          col.formatter = ObjectRelatedFormatter
           break
         case 'field':
           if (meta.child && meta.child.type === 'nested object') {
-            col.formatter = NestedObjectFormatter
+            col.formatter = ObjectRelatedFormatter
           }
           break
       }
+      this.$log.debug('Field: ', type, col.prop, col)
       return col
     },
     addHelpTipsIfNeed(col) {

src/components/TableFormatters/index.js

@@ -12,7 +12,7 @@ import DialogDetailFormatter from './DialogDetailFormatter'
 import EditableInputFormatter from './EditableInputFormatter'
 import StatusFormatter from './StatusFormatter'
 import TagsFormatter from './TagsFormatter'
-import NestedObjectFormatter from './NestedObjectFormatter'
+import ObjectRelatedFormatter from './ObjectRelatedFormatter'
 import ChoicesDisplayFormatter from './ChoicesDisplayFormatter'
 
 export default {
@@ -30,7 +30,7 @@ export default {
   EditableInputFormatter,
   StatusFormatter,
   TagsFormatter,
-  NestedObjectFormatter,
+  ObjectRelatedFormatter,
   ChoicesDisplayFormatter
 }
 
@@ -49,6 +49,6 @@ export {
   EditableInputFormatter,
   StatusFormatter,
   TagsFormatter,
-  NestedObjectFormatter,
+  ObjectRelatedFormatter,
   ChoicesDisplayFormatter
 }

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

@@ -12,35 +12,38 @@
         :tree="treeRef"
         @showAll="showAll"
       />
+      <BaseList
+        slot="table"
+        v-bind="tableConfig"
+      />
     </TreeTable>
 
     <AssetBulkUpdateDialog
       :visible.sync="updateSelectedDialogSetting.visible"
       v-bind="updateSelectedDialogSetting"
     />
-    <PlatformDialog :visible.sync="showPlatform" :category="category" />
+    <PlatformDialog #platform-dialog :visible.sync="showPlatform" :category="category" />
   </div>
 </template>
 
 <script>
 import { TreeTable } from '@/components'
-import { DetailFormatter, ActionsFormatter, TagsFormatter, ChoicesDisplayFormatter } from '@/components/TableFormatters'
 import $ from '@/utils/jquery-vendor'
 import { mapGetters } from 'vuex'
-import { connectivityMeta } from '@/components/AccountListTable/const'
 import AssetBulkUpdateDialog from './components/AssetBulkUpdateDialog'
 import TreeMenu from './components/TreeMenu'
 import PlatformDialog from './components/PlatformDialog'
+import BaseList from './components/BaseList'
 
 export default {
   components: {
     TreeTable,
     AssetBulkUpdateDialog,
     TreeMenu,
-    PlatformDialog
+    PlatformDialog,
+    BaseList
   },
   data() {
-    const vm = this
     return {
       treeRef: null,
       showPlatform: false,
@@ -61,185 +64,12 @@ export default {
         treeUrl: '/api/v1/assets/nodes/children/tree/?assets=0'
       },
       tableConfig: {
-        url: '/api/v1/assets/assets/',
-        hasTree: true,
-        columns: [
-          'name', 'ip', 'public_ip', 'admin_user_display',
-          'protocols', 'platform', 'hardware_info', 'model',
-          'cpu_model', 'cpu_cores', 'cpu_count', 'cpu_vcpus',
-          'disk_info', 'disk_total', 'memory', 'os', 'os_arch',
-          'os_version', 'number', 'vendor', 'sn', 'is_active',
-          'connectivity', 'labels_display',
-          'created_by', 'date_created', 'comment', 'org_name', 'actions'
-        ],
-        columnsShow: {
-          min: ['hostname', 'ip', 'actions'],
-          default: [
-            'hostname', 'ip', 'platform', 'protocols', 'hardware_info',
-            'connectivity', 'actions'
-          ]
-        },
-        columnsMeta: {
-          type: { formatter: ChoicesDisplayFormatter },
-          category: { formatter: ChoicesDisplayFormatter },
-          name: {
-            formatter: DetailFormatter,
-            formatterArgs: {
-              route: 'AssetDetail'
-            },
-            showOverflowTooltip: true,
-            sortable: true
-          },
-          platform: {
-            sortable: true
-          },
-          protocols: {
-            formatter: function(row) {
-              return <span> {row.protocols.toString()} </span>
-            }
-          },
-          ip: {
-            sortable: 'custom',
-            width: '140px'
-          },
-          hardware_info: {
-            showOverflowTooltip: true
-          },
-          cpu_model: {
-            showOverflowTooltip: true
-          },
-          sn: {
-            showOverflowTooltip: true
-          },
-          comment: {
-            showOverflowTooltip: true
-          },
-          connectivity: connectivityMeta,
-          labels_display: {
-            formatter: TagsFormatter
-          },
-          actions: {
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              performDelete: ({ row, col }) => {
-                const id = row.id
-                const url = `/api/v1/assets/assets/${id}/`
-                return this.$axios.delete(url)
-              },
-              extraActions: [
-                {
-                  name: 'View',
-                  title: this.$t(`common.UpdateAssetDetail`),
-                  type: 'primary',
-                  can: vm.$hasPerm('assets.refresh_assethardwareinfo'),
-                  callback: function({ cellValue, tableData, row }) {
-                    return this.$router.push({
-                      name: 'AssetMoreInformationEdit',
-                      params: { id: row.id }
-                    })
-                  }
-                }
-              ]
-            }
-          }
-        }
+        url: '/api/v1/assets/assets/'
       },
       headerActions: {
-        createRoute: () => {
-          return {
-            name: 'AssetCreate',
-            query: this.$route.query
-          }
-        },
         onCreate: () => {
           this.showPlatform = true
-        },
-        createInNewPage: true,
-        searchConfig: {
-          options: [
-            { label: this.$t('assets.Label'), value: 'label' }
-          ]
-        },
-        extraMoreActions: [
-          {
-            name: 'DeactiveSelected',
-            title: this.$t('assets.DeactiveSelected'),
-            type: 'primary',
-            can: ({ selectedRows }) => {
-              return selectedRows.length > 0 && vm.$hasPerm('assets.change_asset')
-            },
-            callback: function({ selectedRows }) {
-              const ids = selectedRows.map((v) => {
-                return { pk: v.id, is_active: false }
-              })
-              this.$axios.patch(`/api/v1/assets/assets/`, ids).then(res => {
-                this.$message.success(this.$t('common.updateSuccessMsg'))
-              }).catch(err => {
-                this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
-              })
-            }.bind(this)
-          },
-          {
-            name: 'ActiveSelected',
-            title: this.$t('assets.ActiveSelected'),
-            type: 'primary',
-            can: ({ selectedRows }) => {
-              return selectedRows.length > 0 && vm.$hasPerm('assets.change_asset')
-            },
-            callback: function({ selectedRows }) {
-              const ids = selectedRows.map((v) => {
-                return { pk: v.id, is_active: true }
-              })
-              this.$axios.patch(`/api/v1/assets/assets/`, ids).then(res => {
-                this.$message.success(this.$t('common.updateSuccessMsg'))
-              }).catch(err => {
-                this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
-              })
-            }.bind(this)
-          },
-          {
-            name: 'actionUpdateSelected',
-            title: this.$t('common.updateSelected'),
-            can: ({ selectedRows }) => {
-              return selectedRows.length > 0 &&
-                !vm.currentOrgIsRoot &&
-                vm.$hasPerm('assets.change_asset')
-            },
-            callback: ({ selectedRows }) => {
-              vm.updateSelectedDialogSetting.selectedRows = selectedRows
-              vm.updateSelectedDialogSetting.visible = true
-            }
-          },
-          {
-            name: 'RemoveFromCurrentNode',
-            title: this.$t('assets.RemoveFromCurrentNode'),
-            can: ({ selectedRows }) => {
-              if (!vm.$route.query.node) {
-                return false
-              }
-              return selectedRows.length > 0 &&
-                !vm.currentOrgIsRoot &&
-                vm.$hasPerm('assets.change_node')
-            },
-            callback: function({ selectedRows, reloadTable }) {
-              const assetsId = []
-              for (const item of selectedRows) {
-                assetsId.push(item.id)
-              }
-              const nodeId = this.$route.query.node
-              if (!nodeId) {
-                return
-              }
-              const url = `/api/v1/assets/nodes/${nodeId}/assets/remove/`
-              this.$axios.put(url, { assets: assetsId }).then(res => {
-                this.$message.success(this.$t('common.removeSuccessMsg'))
-                reloadTable()
-              }).catch(err => {
-                this.$message.error(this.$t('common.removeErrorMsg' + ' ' + err))
-              })
-            }.bind(this)
-          }
-        ]
+        }
       },
       helpMessage: this.$t('assets.AssetListHelpMessage'),
       updateSelectedDialogSetting: {

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

@@ -1,9 +1,5 @@
 <template>
-  <BaseList
-    :category="'cloud'"
-    :table-config="tableConfig"
-    :header-actions="headerActions"
-  />
+  <BaseList v-bind="tableConfig" />
 </template>
 
 <script>
@@ -16,16 +12,12 @@ export default {
   data() {
     return {
       tableConfig: {
+        category: 'cloud',
         url: '/api/v1/assets/clouds/',
-        columns: [
-          'name', 'ip', 'public_ip', 'admin_user_display',
-          'protocols', 'category', 'type', 'platform', 'sn',
-          'is_active', 'connectivity', 'labels_display',
-          'created_by', 'date_created', 'comment', 'org_name', 'actions'
-        ]
-      },
-      headerActions: {
-        createRoute: 'CloudCreate'
+        headerActions: {
+          createRoute: 'CloudCreate'
+        },
+        addColumns: ['cluster']
       }
     }
   }

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

@@ -1,9 +1,5 @@
 <template>
-  <BaseList
-    :category="'database'"
-    :table-config="tableConfig"
-    :header-actions="headerActions"
-  />
+  <BaseList v-bind="config" />
 </template>
 
 <script>
@@ -15,22 +11,13 @@ export default {
   },
   data() {
     return {
-      tableConfig: {
+      config: {
+        category: 'database',
         url: '/api/v1/assets/databases/',
-        columns: [
-          'name', 'ip', 'public_ip', 'admin_user_display',
-          'protocols', 'category', 'type', 'platform', 'sn',
-          'is_active', 'connectivity', 'labels_display',
-          'created_by', 'date_created', 'comment', 'org_name', 'actions'
-        ],
-        columnsMeta: {
-          platform: {
-            sortable: false
-          }
+        addColumns: ['db_name'],
+        extraHeaderActions: {
+          createRoute: 'DatabaseCreate'
         }
-      },
-      headerActions: {
-        createRoute: 'DatabaseCreate'
       }
     }
   }

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

@@ -1,9 +1,5 @@
 <template>
-  <BaseList
-    :category="'host'"
-    :table-config="tableConfig"
-    :header-actions="headerActions"
-  />
+  <BaseList v-bind="config" />
 </template>
 
 <script>
@@ -17,8 +13,20 @@ export default {
   data() {
     const vm = this
     return {
-      tableConfig: {
+      config: {
         url: '/api/v1/assets/hosts/',
+        category: 'host',
+        headerActions: {
+          createRoute: 'HostCreate',
+          extraActions: [
+            {
+              name: this.$t('xpack.Cloud.CloudSync'),
+              title: this.$t('xpack.Cloud.CloudSync'),
+              has: () => vm.$hasPerm('xpack.view_account') && vm.$hasLicense(),
+              callback: () => this.$router.push({ name: 'CloudCenter' })
+            }
+          ]
+        },
         columnsMeta: {
           actions: {
             formatter: ActionsFormatter,
@@ -45,18 +53,8 @@ export default {
             }
           }
         }
-      },
-      headerActions: {
-        createRoute: 'HostCreate',
-        extraActions: [
-          {
-            name: this.$t('xpack.Cloud.CloudSync'),
-            title: this.$t('xpack.Cloud.CloudSync'),
-            has: () => vm.$hasPerm('xpack.view_account') && vm.$hasLicense(),
-            callback: () => this.$router.push({ name: 'CloudCenter' })
-          }
-        ]
       }
+
     }
   }
 }

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

@@ -1,9 +1,5 @@
 <template>
-  <BaseList
-    :category="'networking'"
-    :table-config="tableConfig"
-    :header-actions="headerActions"
-  />
+  <BaseList v-bind="config" />
 </template>
 
 <script>
@@ -15,11 +11,12 @@ export default {
   },
   data() {
     return {
-      tableConfig: {
-        url: '/api/v1/assets/networks/'
-      },
-      headerActions: {
-        createRoute: 'NetworkingCreate'
+      config: {
+        url: '/api/v1/assets/networks/',
+        category: 'networking',
+        headerActions: {
+          createRoute: 'NetworkingCreate'
+        }
       }
     }
   }

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

@@ -1,9 +1,5 @@
 <template>
-  <BaseList
-    :category="'web'"
-    :table-config="tableConfig"
-    :header-actions="headerActions"
-  />
+  <BaseList v-bind="config" />
 </template>
 
 <script>
@@ -15,11 +11,12 @@ export default {
   },
   data() {
     return {
-      tableConfig: {
-        url: '/api/v1/assets/webs/'
-      },
-      headerActions: {
-        createRoute: 'WebCreate'
+      config: {
+        category: 'web',
+        url: '/api/v1/assets/webs/',
+        headerActions: {
+          createRoute: 'WebCreate'
+        }
       }
     }
   }

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

@@ -1,16 +1,18 @@
 <template>
   <div>
-    <ListTable
-      :table-config="iTableConfig"
-      :header-actions="iHeaderActions"
-    />
+    <ListTable :table-config="iTableConfig" :header-actions="iHeaderActions" />
     <PlatformDialog :visible.sync="showPlatform" :category="category" />
   </div>
 </template>
 
 <script>
 import { ListTable } from '@/components'
-import { ActionsFormatter, DetailFormatter, TagsFormatter, ChoicesDisplayFormatter } from '@/components/TableFormatters'
+import {
+  ActionsFormatter,
+  DetailFormatter,
+  TagsFormatter,
+  ChoicesDisplayFormatter
+} from '@/components/TableFormatters'
 import { connectivityMeta } from '@/components/AccountListTable/const'
 import PlatformDialog from '../components/PlatformDialog'
 
@@ -20,6 +22,14 @@ export default {
     PlatformDialog
   },
   props: {
+    url: {
+      type: String,
+      required: true
+    },
+    category: {
+      type: String,
+      default: 'all'
+    },
     tableConfig: {
       type: Object,
       default: () => ({})
@@ -28,9 +38,17 @@ export default {
       type: Object,
       default: () => ({})
     },
-    category: {
-      type: String,
-      default: 'all'
+    addColumns: {
+      type: Array,
+      default: () => []
+    },
+    addColumnsMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    addExtraMoreActions: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -40,10 +58,10 @@ export default {
       defaultConfig: {
         url: '/api/v1/assets/hosts/',
         columns: [
-          'name', 'ip', 'public_ip', 'admin_user_display',
-          'protocols', 'category', 'type', 'platform', 'sn',
-          'is_active', 'connectivity', 'labels_display',
-          'created_by', 'date_created', 'comment', 'org_name', 'actions'
+          'name', 'ip', 'category', 'type', 'platform',
+          'protocols', 'is_active', 'connectivity',
+          'created_by', 'date_created', 'comment',
+          'org_name', 'actions'
         ],
         columnsShow: {
           min: ['name', 'ip', 'actions'],
@@ -67,8 +85,10 @@ export default {
             sortable: true
           },
           protocols: {
-            formatter: function(row) {
-              return <span> {row.protocols.toString()} </span>
+            formatter: (row) => {
+              let data = row.protocols.map(item => item.name + '/' + item.port)
+              data = data.join(', ')
+              return <span> {data} </span>
             }
           },
           ip: {
@@ -167,10 +187,25 @@ export default {
   },
   computed: {
     iTableConfig() {
-      return _.merge(this.defaultConfig, this.tableConfig)
+      const config = _.merge({}, this.defaultConfig, this.tableConfig)
+      if (this.addColumns) {
+        config.columns = [
+          ...config.columns.slice(0, 2),
+          ...this.addColumns,
+          ...config.columns.slice(2)
+        ]
+      }
+      if (this.addColumnsMeta) {
+        config.columnsMeta = _.merge(config.columnsMeta, this.addColumnsMeta)
+      }
+      return config
     },
     iHeaderActions() {
-      return _.merge(this.defaultHeaderActions, this.headerActions)
+      const actions = _.merge({}, this.defaultHeaderActions, this.headerActions)
+      if (this.addExtraMoreActions) {
+        actions.extraMoreActions = [...actions.extraMoreActions, ...this.addExtraMoreActions]
+      }
+      return actions
     }
   }
 }