feat: 将asset user table抽出来

2026-01-29 21:28:52 +00:00 · 2020-06-08 20:05:37 +08:00
parent 1f3a508155
commit ab03712220
13 changed files with 137 additions and 263 deletions
--- a/src/components/AssetUserTable/index.vue
+++ b/src/components/AssetUserTable/index.vue
@@ -15,13 +15,25 @@
          </el-form-item>
        </el-form>
      </div>
-      <div v-else style="display: flex;justify-content:space-between;">
-        <div style="line-height: 34px;text-align: center">MFA</div>
-        <div style="width: 70%">
+      <el-row v-else :gutter="20">
+        <el-col :span="4">
+          <div style="line-height: 34px;text-align: center">MFA</div>
+        </el-col>
+        <el-col :span="14">
          <el-input v-model="MFAInput" />
-        </div>
-        <el-button size="small" type="primary" @click="MFAConfirm">{{ this.$t('common.Confirm') }}</el-button>
-      </div>
+          <span class="help-tips help-block">{{ $t('common.MFARequireForSecurity') }}</span>
+        </el-col>
+        <el-col :span="4">
+          <el-button size="mini" type="primary" style="line-height:20px " @click="MFAConfirm">{{ this.$t('common.Confirm') }}</el-button>
+        </el-col>
+      </el-row>
+      <!--      <div v-else style="display: flex;justify-content:space-between; padding: 30px 20px 0">-->
+      <!--        <div style="line-height: 34px;text-align: center">MFA</div>-->
+      <!--        <div style="width: 70%">-->
+      <!--          <el-input v-model="MFAInput" />-->
+      <!--        </div>-->
+      <!--        <el-button size="small" type="primary" style="line-height:20px " @click="MFAConfirm">{{ this.$t('common.Confirm') }}</el-button>-->
+      <!--      </div>-->
    </Dialog>
    <Dialog width="50" :title="this.$t('assets.UpdateAssetUserToken')" :visible.sync="showDialog" @confirm="handleConfirm()" @cancel="handleCancel()">
      <el-form label-position="right" label-width="80px" :model="dialogInfo">
@@ -59,6 +71,10 @@ export default {
      type: String,
      required: true
    },
+    hasLeftActions: {
+      type: Boolean,
+      default: false
+    },
    otherActions: {
      type: Array,
      default: null
@@ -164,14 +180,20 @@ export default {
        ]
      },
      headerActions: {
-        hasRightActions: false,
-        hasLeftActions: false,
+        hasLeftActions: this.hasLeftActions,
+        hasBulkDelete: false,
        hasSearch: true
      }
    }
  },
  computed: {
  },
+  watch: {
+    url(iNew) {
+      this.$set(this.tableConfig, 'url', iNew)
+      console.log('Url change', this.tableConfig)
+    }
+  },
  mounted() {
    if (this.otherActions) {
      const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
--- a/src/components/AutoDataTable/index.vue
+++ b/src/components/AutoDataTable/index.vue
@@ -21,9 +21,20 @@ export default {
      loading: true,
      method: 'get',
      iConfig: {},
+      autoConfig: {},
      meta: {}
    }
  },
+  computed: {
+  },
+  watch: {
+    config: {
+      handler(iNew) {
+        this.$log.debug('AutoDataTable Config change found: ', iNew)
+      },
+      deep: true
+    }
+  },
  mounted() {
    this.optionUrlMetaAndGenCols()
  },
@@ -118,7 +129,7 @@ export default {
      return col
    },
    generateColumns() {
-      const config = Object.assign({}, this.config)
+      // const config = Object.assign({}, this.config)
      const columns = []
      for (let col of this.config.columns) {
        if (typeof col === 'object') {
@@ -128,7 +139,8 @@ export default {
          columns.push(col)
        }
      }
-      this.iConfig = Object.assign(config, { columns: columns })
+      this.autoConfig.columns = columns
+      this.iConfig = Object.assign(this.config, this.autoConfig)
    }
  }
 }
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -27,6 +27,7 @@ export default {
            draw: 1
          }
        },
+        extraQuery: {},
        defaultAlign: 'left',
        dataPath: 'results',
        totalPath: 'count',
@@ -85,12 +86,22 @@ export default {
  computed: {
    tableConfig() {
      const config = Object.assign(this.defaultConfig, this.config)
+      this.$log.debug('Datatable found config change')
      return config
    },
    iListeners() {
      return Object.assign({}, this.$listeners, this.tableConfig.listeners)
    }
  },
+  watch: {
+    config: {
+      handler() {
+        this.$log.debug('DataTable: found config change', this.tableConfig.url)
+        // this.getList()
+      },
+      deep: true
+    }
+  },
  methods: {
    getList() {
      this.$refs.table.clearSelection()
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -2,7 +2,7 @@
  <div>
    <TableAction :table-url="iTableConfig.url" :search-table="search" :date-pick="handleDateChange" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
    <IBox class="table-content">
-      <AutoDataTable :key="iTableConfig.url" ref="dataTable" :config="iTableConfig" @selection-change="handleSelectionChange" v-on="$listeners" />
+      <AutoDataTable ref="dataTable" :config="iTableConfig" @selection-change="handleSelectionChange" v-on="$listeners" />
    </IBox>
  </div>
 </template>
@@ -36,35 +36,50 @@ export default {
    return {
      selectedRows: [],
      init: false,
-      iTableConfig: {
-        extraQuery: {
-          date_from: '',
-          date_to: ''
-        },
-        ...this.tableConfig
-      }
+      extraQuery: {}
    }
  },
  computed: {
    dataTable() {
+      console.log(this.$refs.dataTable.$refs)
      return this.$refs.dataTable.$refs.dataTable
+    },
+    iTableConfig() {
+      const config = Object.assign(this.tableConfig, { extraQuery: this.extraQuery })
+      this.$log.debug('ListTable: iTableConfig change', config)
+      return config
    }
  },
+  watch: {
+    extraQuery: {
+      handler() {
+        this.$log.debug('ListTable: found extraQuery change')
+      },
+      deep: true
+    }
+  },
+  mounted() {
+  },
  methods: {
    handleSelectionChange(val) {
      this.selectedRows = val
    },
+    getDataTable() {
+      return this.$refs.dataTable.$refs.dataTable
+    },
    reloadTable() {
-      this.dataTable.getList()
+      this.getDataTable().getList()
    },
    search(attrs) {
      return this.dataTable.search(attrs, true)
    },
    handleDateChange(attrs) {
-      this.iTableConfig.extraQuery = {
-        date_from: attrs[0].toISOString(),
-        date_to: attrs[1].toISOString()
-      }
+      this.$set(this.extraQuery, 'date_from', attrs[0].toISOString())
+      this.$set(this.extraQuery, 'date_to', attrs[1].toISOString())
+      // this.extraQuery = {
+      //   date_from: attrs[0].toISOString(),
+      //   date_to: attrs[1].toISOString()
+      // }
      return this.dataTable.searchDate({
        date_from: attrs[0].toISOString(),
        date_to: attrs[1].toISOString()
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@@ -21,7 +21,9 @@
          </div>
        </div>
        <div class="transition-box" style="width: calc(100% - 17px);">
-          <ListTable ref="ListTable" :key="componentKey" :table-config="iTableConfig" :header-actions="headerActions" />
+          <slot name="table">
+            <ListTable ref="ListTable" :key="componentKey" :table-config="iTableConfig" :header-actions="headerActions" />
+          </slot>
        </div>
      </div>
    </div>
@@ -60,15 +62,14 @@ export default {
      iTableConfig: this.tableConfig,
      iShowTree: this.showTree,
      componentKey: 0
-
    }
  },
  watch: {
-
  },
  methods: {
    handleUrlChange(_url) {
      this.$set(this.iTableConfig, 'url', _url)
+      this.$emit('urlChange', _url)
      this.forceRerender()
    },
    forceRerender() {
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -148,6 +148,7 @@
  "common": {
    "CrontabHelpTips": "eg：每周日 03:05 执行 <5 3 * * 0> <br> 提示： 使用5位 Linux crontab 表达式 <分 时 日 月 星期> （<a href='https://tool.lu/crontab/' target='_blank'>在线工具</a>） <br>注意： 如果同时设置了定期执行和周期执行，优先使用定期执行",
    "BadRequestErrorMsg": "请求错误，请检查填写内容",
+    "MFARequireForSecurity": "为了安全请输入MFA",
    "DateLast24Hours": "最近一天",
    "DateLastWeek": "最近一周",
    "DateLastMonth": "最近一月",
@@ -845,7 +846,8 @@
    "restoreDialogTitle": "你确认吗",
    "technologyConsult": "技术咨询",
    "Vault": {
-      "Vault": "密码匣子"
+      "Vault": "密码匣子",
+      "Create": "创建密码"
    },
    "Cloud": {
      "CloudCenter": "云管中心",
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -148,6 +148,7 @@
    "CrontabHelpTips": "eg: Every Sunday 03:05 run <5 3 * * 0> <br>Tips:Using 5 digits linux crontab expressions<min hour day month week> (<a href='https://tool.lu/crontab/' target='_blank'>Online tools</a>) <br>Note:If both Regularly perform and Cycle perform are set,give priority to Regularly perform",
    "BadRequestErrorMsg" : "Bad request, please check again",
    "DateLast24Hours": "Last 24 hours",
+    "MFARequireForSecurity": "MFA required for security",
    "TestSuccessMsg": "Test Success",
    "DateLastWeek": "Last week",
    "DateLastMonth": "Last month",
--- a/src/layout/components/Footer/index.vue
+++ b/src/layout/components/Footer/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="footer" :style="style">
    <div class="pull-right">
-      Version <strong>1.5.6-228</strong> <span v-if="!publicSettings.XPACK_LICENSE_IS_VALID"> GPLv2. </span>
+      Version <strong>2.0.0-rc</strong> <span v-if="!publicSettings.XPACK_LICENSE_IS_VALID"> GPLv2. </span>
    </div>
    <div v-if="!publicSettings.XPACK_LICENSE_IS_VALID" style="padding-left:20px;">
      <strong>Copyright</strong> FIT2CLOUD 飞致云 © 2014-2020
--- a/src/layout/components/GenericTreeListPage/index.vue
+++ b/src/layout/components/GenericTreeListPage/index.vue
@@ -2,6 +2,9 @@
  <Page>
    <el-alert v-if="helpMessage" type="success"> {{ helpMessage }} </el-alert>
    <TreeTable ref="TreeTable" :table-config="tableConfig" :header-actions="headerActions" :tree-setting="treeSetting">
+      <template #table>
+        <slot name="table" />
+      </template>
      <div slot="rMenu" slot-scope="{data}">
        <slot name="rMenu" :data="data" />
      </div>
--- a/src/layout/components/NavHeader/Help.vue
+++ b/src/layout/components/NavHeader/Help.vue
@@ -4,8 +4,8 @@
      {{ $t('common.nav.Help') }}<i class="el-icon-arrow-down el-icon--right" />
    </span>
    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item icon="el-icon-plus" command="docs">{{ $t('common.nav.Docs') }}</el-dropdown-item>
-      <el-dropdown-item icon="el-icon-circle-plus" command="support">{{ $t('common.nav.Support') }}</el-dropdown-item>
+      <el-dropdown-item command="docs">{{ $t('common.nav.Docs') }}</el-dropdown-item>
+      <el-dropdown-item command="support">{{ $t('common.nav.Support') }}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
 </template>
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -135,3 +135,11 @@ h4 {
 .el-dialog__body {
  padding-top: 10px;
 }
+
+.help-block {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: #737373;
+  font-size: 13px
+}
--- a/src/views/xpack/Vault/VaultList.vue
+++ b/src/views/xpack/Vault/VaultList.vue
@@ -1,261 +1,60 @@
 <template>
  <div>
-    <GenericTreeListPage ref="TreeTablePage" :table-config="tableConfig" :header-actions="headerActions" :tree-setting="treeSetting" />
-    <Dialog width="25%" :title="this.$t('common.MFAConfirm')" :visible.sync="showMFADialog" :show-confirm="false" @cancel="handleMFAConfirm()">
-      <div v-if="MFAConfirmed">
-        <el-form label-position="right" label-width="80px" :model="MFAInfo">
-          <el-form-item :label="this.$t('assets.Hostname')">
-            <el-input v-model="MFAInfo.hostname" disabled />
-          </el-form-item>
-          <el-form-item :label="this.$t('assets.Username')">
-            <el-input v-model="MFAInfo.username" disabled />
-          </el-form-item>
-          <el-form-item :label="this.$t('assets.Password')">
-            <el-input v-model="MFAInfo.password" type="password" show-password />
-          </el-form-item>
-        </el-form>
-      </div>
-      <div v-else style="display: flex;justify-content:space-between;">
-        <div style="line-height: 34px;text-align: center">MFA</div>
-        <div style="width: 70%">
-          <el-input v-model="MFAInput" />
-        </div>
-        <el-button size="small" type="primary" @click="MFAConfirm">{{ this.$t('common.Confirm') }}</el-button>
-      </div>
-    </Dialog>
-    <Dialog width="50" :title="this.$t('assets.UpdateAssetUserToken')" :visible.sync="showDialog" @confirm="handleConfirm()" @cancel="handleCancel()">
-      <el-form label-position="right" label-width="80px" :model="dialogInfo">
-        <el-form-item :label="this.$t('assets.Hostname')">
-          <el-input v-model="dialogInfo.hostname" disabled />
-        </el-form-item>
-        <el-form-item :label="this.$t('assets.Username')">
-          <el-input v-model="dialogInfo.username" disabled />
-        </el-form-item>
-        <el-form-item :label="this.$t('assets.Password')">
-          <el-input v-model="dialogInfo.password" type="password" />
-        </el-form-item>
-        <el-form-item :label="this.$t('assets.sshkey')">
-          <input type="file" @change="Onchange">
-        </el-form-item>
-      </el-form>
-    </Dialog>
+    <GenericTreeListPage ref="TreeTablePage" :tree-setting="treeSetting">
+      <template #table>
+        <AssetUserTable ref="table" v-bind="assetUserConfig" />
+      </template>
+    </GenericTreeListPage>
  </div>
 </template>

 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
-import { ActionsFormatter, DateFormatter } from '@/components/ListTable/formatters'
-import Dialog from '@/components/Dialog'
+import { AssetUserTable } from '@/components'
+import { setUrlParam } from '@/utils/common'

 export default {
  name: 'Vault',
  components: {
    GenericTreeListPage,
-    Dialog
+    AssetUserTable
  },
  data() {
+    const vm = this
    return {
-      MFAConfirmed: false,
-      MFAInput: '',
-      MFAInfo: {
-        asset: '',
-        username: '',
-        hostname: '',
-        password: ''
-      },
-      showDialog: false,
-      showMFADialog: false,
-      dialogInfo: {
-        asset: '',
-        username: '',
-        hostname: '',
-        password: '',
-        key: ''
+      assetUserConfig: {
+        hasLeftActions: true,
+        hasCreate: true,
+        url: '/api/v1/assets/asset-users/?latest=1'
      },
      treeSetting: {
        showMenu: false,
        showRefresh: false,
        showAssets: true,
        url: '/api/v1/assets/asset-users/',
-        treeUrl: '/api/v1/assets/nodes/children/tree/?assets=1'
-      },
-      headerActions: {
-        hasLeftActions: true,
-        hasRightActions: true,
-        hasExport: true,
-        hasImport: true,
-        hasRefresh: true,
-        hasSearch: true,
-        hasBulkDelete: false,
-        hasCreate: true
-      },
-      tableConfig: {
-        url: `/api/v1/assets/asset-users/?latest=1`,
-        columns: [
-          {
-            prop: 'hostname',
-            label: this.$t('assets.Hostname')
-          },
-          {
-            prop: 'ip',
-            label: this.$t('assets.ip')
-          },
-          {
-            prop: 'username',
-            label: this.$t('assets.Username')
-          },
-          {
-            prop: 'version',
-            label: this.$t('assets.Version')
-          },
-          {
-            prop: 'date_created',
-            label: this.$t('assets.date_joined'),
-            formatter: DateFormatter
-          },
-          {
-            prop: 'id',
-            align: 'center',
-            label: this.$t('assets.Action'),
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasUpdate: false, // can set function(row, value)
-              canUpdate: false, // can set function(row, value)
-              hasDelete: false, // can set function(row, value)
-              canDelete: false,
-              extraActions: [
-                {
-                  name: this.$t('common.View'),
-                  title: this.$t('common.View'),
-                  type: 'primary',
-                  callback: function(val) {
-                    this.MFAInfo.asset = val.cellValue
-                    this.showMFADialog = true
-                  }.bind(this)
-                },
-                {
-                  name: 'delete',
-                  title: this.$t('common.Delete'),
-                  type: 'primary',
-                  callback: (val) => {
-                    this.$axios.delete(`/api/v1/assets/asset-users/${val.cellValue}/`).then(
-                      this.$refs.TreeTablePage.$refs.TreeTable.$refs.ListTable.reloadTable()
-                    )
-                  }
-                },
-                {
-                  name: this.$t('common.Test'),
-                  title: this.$t('common.Test'),
-                  callback: (val) => {
-                    console.log(val.cellValue)
-                    this.$axios.post(
-                      `/api/v1/assets/asset-users/tasks/?id=${val.cellValue}`,
-                      { action: 'test' }
-                    ).then(res => {
-                      window.open(`/#/ops/celery/task/${res.task}/log/`, '', 'width=900,height=600')
-                    })
-                  }
-                },
-                {
-                  name: this.$t('common.Update'),
-                  title: this.$t('common.Update'),
-                  callback: function(val) {
-                    console.log(val)
-                    this.showDialog = true
-                    this.dialogInfo.asset = val.row.asset
-                    this.dialogInfo.hostname = val.row.hostname
-                    this.dialogInfo.username = val.row.username
-                  }.bind(this)
-                }
-              ]
+        treeUrl: '/api/v1/assets/nodes/children/tree/?assets=1',
+        callback: {
+          onSelected: function(event, treeNode) {
+            let url = vm.assetUserConfig.url
+            if (treeNode.meta.type === 'node') {
+              const nodeId = treeNode.meta.node.id
+              url = setUrlParam(url, 'asset_id', '')
+              url = setUrlParam(url, 'node_id', nodeId)
+            } else if (treeNode.meta.type === 'asset') {
+              const assetId = treeNode.meta.asset.id
+              console.log('Asset id: ', assetId)
+              url = setUrlParam(url, 'node_id', '')
+              url = setUrlParam(url, 'asset_id', assetId)
            }
+            setTimeout(() => {
+              vm.assetUserConfig.url = url
+            }, 100)
          }
-        ]
+        }
      }
    }
  },
-  methods: {
-    MFAConfirm() {
-      if (this.MFAInput.length !== 6) {
-        return this.$message.error(this.$t('common.updateErrorMsg'))
-      }
-      this.$axios.post(
-        `/api/v1/authentication/otp/verify/`, {
-          code: this.MFAInput
-        }
-      ).then(
-        res => {
-          this.$axios.get(`/api/v1/assets/asset-user-auth-infos/${this.MFAInfo.asset}/`).then(res => {
-            this.MFAConfirmed = true
-            this.MFAInfo.hostname = res.hostname
-            this.MFAInfo.password = res.password
-            this.MFAInfo.username = res.username
-          })
-        }
-      )
-    },
-    handleMFAConfirm() {
-      this.MFAInfo = {
-        asset: '',
-        username: '',
-        hostname: '',
-        password: ''
-      }
-      this.MFAInput = ''
-      this.showMFADialog = false
-      this.MFAConfirmed = false
-    },
-    handleCancel() {
-      this.dialogInfo = {
-        asset: '',
-        username: '',
-        hostname: '',
-        password: '',
-        key: ''
-      }
-      this.showDialog = false
-    },
-    Onchange(e) {
-      const vm = this
-      // TODO 校验文件类型
-      const reader = new FileReader()
-      reader.onload = function() {
-        vm.dialogInfo.key = this.result
-      }
-      reader.readAsText(
-        e.target.files[0]
-      )
-    },
-    handleConfirm() {
-      const data = {
-        asset: this.dialogInfo.asset,
-        username: this.dialogInfo.username
-      }
-      if (this.dialogInfo.password !== '') {
-        data.password = this.dialogInfo.password
-      }
-      if (this.dialogInfo.key !== '') {
-        data.key = this.dialogInfo.key
-      }
-      this.$axios.post(
-        `/api/v1/assets/asset-users/`,
-        data
-      ).then(res => {
-        this.$refs.TreeTablePage.$refs.TreeTable.$refs.ListTable.reloadTable()
-        this.$message.success(this.$t('common.updateSuccessMsg'))
-      }).catch(err => {
-        this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
-      })
-      this.dialogInfo = {
-        asset: '',
-        username: '',
-        hostname: '',
-        password: '',
-        key: ''
-      }
-      this.showDialog = false
-    }
-  }
+  methods: {}
 }
 </script>

--- a/src/views/xpack/router.js
+++ b/src/views/xpack/router.js
@@ -8,7 +8,7 @@ export default {
  component: Layout,
  redirect: '/applications/remote-apps/',
  name: 'Xpack',
-  meta: { title: 'Xpack', icon: 'sitemap', licenseRequired: true },
+  meta: { title: 'X-Pack', icon: 'sitemap', licenseRequired: true },
  children: [
    {
      path: 'change-auth-plan',