feat: 资产详情页面添加关联系统用户列表

src/i18n/langs/cn.json

@@ -83,6 +83,7 @@
     "DBInfo": "数据库信息"
   },
   "assets": {
+    "AssociateSystemUsers": "关联系统用户",
     "AssociateAssets": "关联资产",
     "AssociateNodes": "关联节点",
     "Action": "动作",
@@ -163,6 +164,7 @@
     "PublicIp": "公网IP",
     "Push": "推送",
     "PushSystemUserNow": "推送系统用户",
+    "PushAllSystemUsersToAsset": "推送所有系统用户到资产",
     "QuickUpdate": "快速更新",
     "Reachable": "可连接",
     "Unreachable": "不可连接",
@@ -187,6 +189,7 @@
     "SystemUsers": "系统用户",
     "Test": "测试",
     "TestAssetsConnective": "测试资产可连接性",
+    "TestAllSystemUsersConnective": "测试所有系统用户可连接性",
     "TestConnection": "测试连接",
     "Type": "类型",
     "UnselectedAssets": "未选择资产或所选择的资产不支持SSH协议连接",
@@ -246,6 +249,9 @@
     "bind": "绑定",
     "unbind": "解绑",
     "PushSelected":"推送所选",
+    "PushSelectedSystemUsersToAsset": "推送所选系统用户到资产",
+    "TestSelected": "测试所选",
+    "TestSelectedSystemUsersConnective": "测试所选系统用户可连接性",
     "BadRequestErrorMsg": "请求错误，请检查填写内容",
     "BadRoleErrorMsg": "请求错误，无该操作权限",
     "BadConflictErrorMsg": "正在刷新中，请稍后再试",

src/i18n/langs/en.json

@@ -82,6 +82,7 @@
     "DBInfo": "Database Info"
   },
   "assets": {
+    "AssociateSystemUsers": "Associate system users",
     "AssociateAssets": "Associate assets",
     "AssociateNodes": "Associate nodes",
     "Action": "Action",
@@ -163,6 +164,7 @@
     "PublicIp": "Public ip",
     "Push": "Push",
     "PushSystemUserNow": "Push system user now",
+    "PushAllSystemUsersToAsset": "Push all system users to asset",
     "QuickUpdate": "Quick update",
     "Reachable": "Reachable",
     "Unreachable": "Unreachable",
@@ -186,6 +188,7 @@
     "SystemUsers": "System users",
     "Test": "Test",
     "TestAssetsConnective": "Test assets connective",
+    "TestAllSystemUsersConnective": "Test all system users connective",
     "TestConnection": "Test connection",
     "Type": "Type",
     "UnselectedAssets": "No asset selected or the selected asset does not support SSH protocol connection",
@@ -241,6 +244,9 @@
     "Add": "Add",
     "PleaseAgreeToTheTerms": "Please agree to the terms",
     "PushSelected":"Push selected",
+    "PushSelectedSystemUsersToAsset": "Push selected system users to asset",
+    "TestSelected": "Test selected",
+    "TestSelectedSystemUsersConnective": "Test selected system users connective",
     "UpdateAssetDetail": "Update more detail",
     "AddSuccessMsg": "Add success",
     "Auth": "Authorization",

src/views/assets/Asset/AssetDetail/SystemUser.vue

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="16">
+        <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
+      </el-col>
+      <el-col :span="8">
+        <QuickActions type="primary" :actions="quickActions" />
+        <RelationCard ref="systemUserRelation" style="margin-top: 15px" v-bind="systemUserRelationConfig" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import QuickActions from '@/components/QuickActions/index'
+import RelationCard from '@/components/RelationCard'
+import ListTable from '@/components/ListTable'
+import { DetailFormatter } from '@/components/TableFormatters'
+import { connectivityMeta } from '@/components/AccountListTable/const'
+
+export default {
+  name: 'SystemUserList',
+  components: {
+    QuickActions,
+    RelationCard,
+    ListTable
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    const vm = this
+    return {
+      tableConfig: {
+        url: `/api/v1/assets/system-users-assets-relations/?asset=${this.object.id}`,
+        columns: ['systemuser_display', 'connectivity', 'actions'],
+        columnsMeta: {
+          systemuser_display: {
+            label: this.$t('assets.SystemUser'),
+            showOverflowTooltip: true,
+            formatter: DetailFormatter,
+            formatterArgs: {
+              getRoute({ row }) {
+                return {
+                  name: 'SystemUserDetail',
+                  params: { id: row.systemuser }
+                }
+              }
+            }
+          },
+          connectivity: connectivityMeta,
+          actions: {
+            formatterArgs: {
+              hasUpdate: false, // can set function(row, value)
+              hasDelete: false, // can set function(row, value)
+              hasClone: false,
+              moreActionsTitle: this.$t('common.More'),
+              extraActions: [
+                {
+                  name: 'Test',
+                  title: this.$t('common.Test'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    const theUrl = `/api/v1/assets/system-users/${row.systemuser}/tasks/`
+                    const data = { action: 'test', assets: [this.object.id] }
+                    this.$axios.post(theUrl, data).then(resp => {
+                      window.open(`/#/ops/celery/task/${resp.task}/log/`, '', 'width=900,height=600')
+                    })
+                  }
+                },
+                {
+                  name: 'Push',
+                  title: this.$t('common.Push'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    const theUrl = `/api/v1/assets/system-users/${row.systemuser}/tasks/`
+                    const data = { action: 'push', assets: [this.object.id] }
+                    this.$axios.post(theUrl, data).then(resp => {
+                      window.open(`/#/ops/celery/task/${resp.task}/log/`, '', 'width=900,height=600')
+                    })
+                  }
+                },
+                {
+                  name: 'Delete',
+                  title: this.$t('common.Delete'),
+                  type: 'danger',
+                  can: !this.$store.getters.currentOrgIsRoot,
+                  callback: (val) => {
+                    this.$axios.delete(`/api/v1/assets/system-users-assets-relations/${val.row.id}/`).then(() => {
+                      this.$message.success(this.$t('common.deleteSuccessMsg'))
+                      this.$refs.ListTable.reloadTable()
+                    })
+                  }
+                }
+              ]
+            }
+          }
+        }
+      },
+      headerActions: {
+        hasBulkDelete: false,
+        hasImport: false,
+        hasCreate: false,
+        extraMoreActions: [
+          {
+            title: this.$t('common.TestSelectedSystemUsersConnective'),
+            name: 'TestSelected',
+            can({ selectedRows }) {
+              return selectedRows.length > 0
+            },
+            callback: this.bulkTestCallback.bind(this)
+          },
+          {
+            title: this.$t('common.PushSelectedSystemUsersToAsset'),
+            name: 'PushSelected',
+            can({ selectedRows }) {
+              return selectedRows.length > 0
+            },
+            callback: this.bulkPushCallback.bind(this)
+          }
+        ]
+      },
+      quickActions: [
+        {
+          title: this.$t('assets.TestAllSystemUsersConnective'),
+          attrs: {
+            type: 'primary',
+            label: this.$t('common.Test')
+          },
+          callbacks: {
+            click: function() {
+              const theUrl = `/api/v1/assets/assets/${this.object.id}/tasks/`
+              const data = { action: 'test_system_user' }
+              this.$axios.post(theUrl, data).then(resp => {
+                window.open(`/#/ops/task/task/${resp.task}/log/`, '', 'width=900,height=600')
+              })
+            }.bind(this)
+          }
+        },
+        {
+          title: this.$t('assets.PushAllSystemUsersToAsset'),
+          attrs: {
+            type: 'primary',
+            label: this.$t('common.Push')
+          },
+          callbacks: {
+            click: function({ row }) {
+              const theUrl = `/api/v1/assets/assets/${this.object.id}/tasks/`
+              const data = { action: 'push_system_user' }
+              this.$axios.post(theUrl, data).then(resp => {
+                window.open(`/#/ops/task/task/${resp.task}/log/`, '', 'width=900,height=600')
+              })
+            }.bind(this)
+          }
+        }
+      ],
+      systemUserRelationConfig: {
+        icon: 'fa-link',
+        type: 'info',
+        title: this.$t('assets.AssociateSystemUsers'),
+        objectsAjax: {
+          url: `/api/v1/assets/system-users/`
+        },
+        performAdd: (items, that) => {
+          const relationUrl = `/api/v1/assets/system-users-assets-relations/`
+          const data = items.map((i) => {
+            return {
+              'asset': this.object.id,
+              'systemuser': i.value
+            }
+          })
+          if (data.length === 0) {
+            return this.$message.error(this.$tc('assets.UnselectedSystemUsers'))
+          }
+          return this.$axios.post(relationUrl, data)
+        },
+        onAddSuccess: (items, that) => {
+          vm.$message.success(this.$t('common.updateSuccessMsg'))
+          vm.$refs.ListTable.reloadTable()
+          vm.$refs.systemUserRelation.$refs.select2.clearSelected()
+        }
+      }
+    }
+  },
+  methods: {
+    bulkPushCallback({ selectedRows }) {
+      const theUrl = `/api/v1/assets/assets/${this.object.id}/tasks/`
+      const systemUsers = selectedRows.map((v) => {
+        return v.systemuser
+      })
+      const data = { action: 'push_system_user', system_users: systemUsers }
+      this.$axios.post(theUrl, data).then(resp => {
+        window.open(`/#/ops/task/task/${resp.task}/log/`, '', 'width=900,height=600')
+      })
+    },
+    bulkTestCallback({ selectedRows }) {
+      const theUrl = `/api/v1/assets/assets/${this.object.id}/tasks/`
+      const systemUsers = selectedRows.map((v) => {
+        return v.systemuser
+      })
+      const data = { action: 'test_system_user', system_users: systemUsers }
+      this.$axios.post(theUrl, data).then(resp => {
+        window.open(`/#/ops/task/task/${resp.task}/log/`, '', 'width=900,height=600')
+      })
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>

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

@@ -10,13 +10,16 @@
 import { GenericDetailPage, TabPage } from '@/layout/components'
 import Detail from './Detail.vue'
 import Account from './Account.vue'
+import SystemUserList from './SystemUser.vue'
+
 export default {
   name: 'AssetListDetail',
   components: {
     GenericDetailPage,
     TabPage,
     Detail,
-    Account
+    Account,
+    SystemUserList
   },
   data() {
     return {
@@ -28,6 +31,10 @@ export default {
             title: this.$t('assets.AssetDetail'),
             name: 'Detail'
           },
+          {
+            title: this.$t('assets.SystemUser'),
+            name: 'SystemUserList'
+          },
           {
             title: this.$t('assets.AccountList'),
             name: 'Account'